前端DOM常用操作及代码案例
在前端开发中，DOM（文档对象模型）操作是不可或缺的一部分。通过DOM，开发者可以查找节点、增删节点、修改节点内容、操作CSS样式等。本文将介绍一些常用的DOM操作，并提供相应的代码案例。
一、创建节点
- createElement：用于创建新元素。
javascript">const divEl = document.createElement("div");
- createTextNode：用于创建一个文本节点。
javascript">const textEl = document.createTextNode("content");
- createDocumentFragment：用于创建一个文档碎片，可以存储临时节点，然后一次性添加到DOM中。
javascript">const fragment = document.createDocumentFragment();
二、查询节点
- querySelector：传入CSS选择器，选中单个DOM元素（首个）。
javascript">const element = document.querySelector('.element');
- querySelectorAll：返回一个包含所有匹配元素的节点列表。
javascript">const elements = document.querySelectorAll("p");
- getElementById、getElementsByClassName、getElementsByTagName、getElementsByName：通过不同的属性获取元素集合。
javascript">const elementById = document.getElementById('id属性值');
const elementsByClassName = document.getElementsByClassName('class属性值');
const elementsByTagName = document.getElementsByTagName('标签名');
const elementsByName = document.getElementsByName('name属性值');
三、添加节点
- appendChild：将子节点添加到父节点的最后一个子节点。
javascript">const list = document.getElementById('list');
const js = document.getElementById('js');
list.appendChild(js);
- insertBefore：将子节点插入到指定位置的前面。
javascript">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>javascript"> // 创建一个新的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：从父节点中移除子节点。
javascript">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>javascript"> 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>javascript">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>javascript">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>javascript">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>javascript">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>javascript">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>javascript">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>
