前端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>