前端DOM常用操作

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

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

一、创建节点

  1. createElement:用于创建新元素。
javascript 复制代码
const divEl = document.createElement("div");
  1. createTextNode:用于创建一个文本节点。
javascript 复制代码
const textEl = document.createTextNode("content");
  1. createDocumentFragment:用于创建一个文档碎片,可以存储临时节点,然后一次性添加到DOM中。
javascript 复制代码
const fragment = document.createDocumentFragment();

二、查询节点

  1. querySelector:传入CSS选择器,选中单个DOM元素(首个)。
javascript 复制代码
const element = document.querySelector('.element');
  1. querySelectorAll:返回一个包含所有匹配元素的节点列表。
javascript 复制代码
const elements = document.querySelectorAll("p");
  1. getElementByIdgetElementsByClassNamegetElementsByTagNamegetElementsByName:通过不同的属性获取元素集合。
javascript 复制代码
const elementById = document.getElementById('id属性值');
const elementsByClassName = document.getElementsByClassName('class属性值');
const elementsByTagName = document.getElementsByTagName('标签名');
const elementsByName = document.getElementsByName('name属性值');

三、添加节点

  1. appendChild:将子节点添加到父节点的最后一个子节点。
javascript 复制代码
const list = document.getElementById('list');
const js = document.getElementById('js');
list.appendChild(js);
  1. insertBefore:将子节点插入到指定位置的前面。
javascript 复制代码
parentElement.insertBefore(newElement, referenceElement);

代码案例

html 复制代码
<!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>

四、删除节点

  1. removeChild:从父节点中移除子节点。
javascript 复制代码
const parent = document.getElementById('parent');
const child = document.getElementById('child');
parent.removeChild(child);

代码案列

html 复制代码
<!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>

五、修改节点内容案例

  1. 修改文本内容

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

    示例代码:

    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>
  2. 修改节点属性

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

    示例代码:

    html 复制代码
    <!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样式案例

  1. 修改元素样式

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

    示例代码:

    html 复制代码
    <!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>
  2. 切换类名

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

    示例代码:

    html 复制代码
    <!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>

代码案例

  1. 动态创建列表
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>
  1. 动态显示时间
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>
相关推荐
come1123411 分钟前
Vue 响应式数据传递:ref、reactive 与 Provide/Inject 完全指南
前端·javascript·vue.js
前端风云志33 分钟前
TypeScript结构化类型初探
javascript
musk12121 小时前
electron 打包太大 试试 tauri , tauri 安装打包demo
前端·electron·tauri
翻滚吧键盘1 小时前
js代码09
开发语言·javascript·ecmascript
万少2 小时前
第五款 HarmonyOS 上架作品 奇趣故事匣 来了
前端·harmonyos·客户端
OpenGL2 小时前
Android targetSdkVersion升级至35(Android15)相关问题
前端
rzl022 小时前
java web5(黑马)
java·开发语言·前端
Amy.Wang2 小时前
前端如何实现电子签名
前端·javascript·html5
海天胜景2 小时前
vue3 el-table 行筛选 设置为单选
javascript·vue.js·elementui
今天又在摸鱼2 小时前
Vue3-组件化-Vue核心思想之一
前端·javascript·vue.js