前端DOM常用操作

emmm459

于 2024-09-30 15:37:04 发布

阅读量490

点赞数 12

文章标签：前端 javascript

本文链接：https://blog.csdn.net/qq_63447955/article/details/142656843

版权

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