前端DOM常用操作

前端DOM常用操作及代码案例

在前端开发中，DOM（文档对象模型）操作是不可或缺的一部分。通过DOM，开发者可以查找节点、增删节点、修改节点内容、操作CSS样式等。本文将介绍一些常用的DOM操作，并提供相应的代码案例。

一、创建节点

createElement：用于创建新元素。

const divEl = document.createElement("div");

createTextNode：用于创建一个文本节点。

const textEl = document.createTextNode("content");

createDocumentFragment：用于创建一个文档碎片，可以存储临时节点，然后一次性添加到DOM中。

const fragment = document.createDocumentFragment();

二、查询节点

querySelector：传入CSS选择器，选中单个DOM元素（首个）。

const element = document.querySelector('.element');

querySelectorAll：返回一个包含所有匹配元素的节点列表。

const elements = document.querySelectorAll("p");

getElementById、getElementsByClassName、getElementsByTagName、getElementsByName：通过不同的属性获取元素集合。

const elementById = document.getElementById('id属性值');
const elementsByClassName = document.getElementsByClassName('class属性值');
const elementsByTagName = document.getElementsByTagName('标签名');
const elementsByName = document.getElementsByName('name属性值');

三、添加节点

appendChild：将子节点添加到父节点的最后一个子节点。

const list = document.getElementById('list');
const js = document.getElementById('js');
list.appendChild(js);

insertBefore：将子节点插入到指定位置的前面。

parentElement.insertBefore(newElement, referenceElement);

代码案例

<!DOCTYPE html>  
<html lang="en">  
<head>  <meta charset="UTF-8">  <meta name="viewport" content="width=device-width, initial-scale=1.0">  <title>Document</title>  
</head>  
<body>  <ul id="books">  <li id="book1">《三国演义》</li>  <li id="book2">《水浒传》</li>  </ul>  <script>  // 创建一个新的li元素  var newBook = document.createElement('li');  newBook.textContent = '《西游记》';  // 获取ul元素  var books = document.getElementById('books');  // 将新创建的li元素添加到ul元素的末尾  books.appendChild(newBook);  // 或者，将新创建的li元素插入到某个现有元素之前  // var book2 = document.getElementById('book2');  // books.insertBefore(newBook, book2);  </script>  
</body>  
</html>

四、删除节点

removeChild：从父节点中移除子节点。

const parent = document.getElementById('parent');
const child = document.getElementById('child');
parent.removeChild(child);

代码案列

<!DOCTYPE html>  
<html lang="en">  
<head>  <meta charset="UTF-8">  <meta name="viewport" content="width=device-width, initial-scale=1.0">  <title>Delete Node</title>  
</head>  
<body>  <div id="container">  <p id="removeNode">这个节点将被删除</p>  </div>  <button onclick="removeElement()">删除节点</button>  <script>  function removeElement() {  var container = document.getElementById('container');  var nodeToRemove = document.getElementById('removeNode');  container.removeChild(nodeToRemove);  }  </script>  
</body>  
</html>

五、修改节点内容案例

修改文本内容

使用innerText或innerHTML属性修改元素的文本内容或HTML内容。

示例代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Modify Content</title>
</head>
<body><div id="content">原始内容</div><button onclick="modifyContent()">修改内容</button><script>function modifyContent() {var contentDiv = document.getElementById('content');contentDiv.innerText = '修改后的内容';// 或者使用 innerHTML 修改 HTML 内容// contentDiv.innerHTML = '<strong>修改后的内容</strong>';}</script>
</body>
</html>

修改节点属性

使用setAttribute()方法设置节点的属性。
使用getAttribute()方法获取节点的属性值。
使用removeAttribute()方法删除节点的属性。

示例代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Modify Attribute</title>
</head>
<body><img id="image" src="original.jpg" alt="Original Image"><button onclick="modifyAttribute()">修改属性</button><script>function modifyAttribute() {var img = document.getElementById('image');img.setAttribute('src', 'modified.jpg');// 获取属性值// var srcValue = img.getAttribute('src');// console.log(srcValue);// 删除属性// img.removeAttribute('alt');}</script>
</body>
</html>

六、操作CSS样式案例

修改元素样式

使用style属性直接修改元素的CSS样式。

示例代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Modify Style</title>
</head>
<body><div id="styledElement" style="color: blue; font-size: 20px;">原始样式</div><button onclick="modifyStyle()">修改样式</button><script>function modifyStyle() {var styledElement = document.getElementById('styledElement');styledElement.style.color = 'red';styledElement.style.fontSize = '30px';}</script>
</body>
</html>

切换类名

使用classList属性添加、删除或切换元素的类名。

示例代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Toggle Class</title><style>.highlight {background-color: yellow;}</style>
</head>
<body><div id="toggleElement">点击切换类名</div><button onclick="toggleClass()">切换类名</button><script>function toggleClass() {var toggleElement = document.getElementById('toggleElement');toggleElement.classList.toggle('highlight');}</script>
</body>
</html>

代码案例

动态创建列表

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>动态创建列表</title>
</head>
<body><h1>动态创建列表</h1><ul class="list"></ul><script>var ulEl = document.querySelector(".list");var isFlag = true;while (isFlag) {var message = prompt("请输入信息:");if (!message) {isFlag = false;} else {var liEl = document.createElement("li");liEl.textContent = message;ulEl.append(liEl);}}</script>
</body>
</html>

动态显示时间

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>动态显示时间</title>
</head>
<body><h1 class="time">2022-05-19 11:14:30</h1><script>function padLeft(content, count, padStr) {count = count || 2;padStr = padStr || "0";content = String(content);return content.padStart(count, padStr);}var timeEl = document.querySelector(".time");setInterval(function() {var date = new Date();var year = date.getFullYear();var month = padLeft(date.getMonth() + 1);var day = padLeft(date.getDate());var hour = padLeft(date.getHours());var minute = padLeft(date.getMinutes());var second = padLeft(date.getSeconds());timeEl.textContent = `${year}-${month}-${day} ${hour}:${minute}:${second}`;}, 1000);</script>
</body>
</html>