当前位置: 首页 > article >正文

前端DOM常用操作

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

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

一、创建节点

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

二、查询节点

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

三、添加节点

  1. appendChild:将子节点添加到父节点的最后一个子节点。
const list = document.getElementById('list');
const js = document.getElementById('js');
list.appendChild(js);
  1. 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>

四、删除节点

  1. 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>

五、修改节点内容案例

  1. 修改文本内容

    • 使用innerTextinnerHTML属性修改元素的文本内容或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()方法删除节点的属性。

    示例代码:

    <!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样式。

    示例代码:

    <!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属性添加、删除或切换元素的类名。

    示例代码:

    <!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. 动态创建列表
<!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. 动态显示时间
<!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>

http://www.kler.cn/a/327096.html

相关文章:

  • 贪心算法求解跳跃游戏
  • 增量训练(持续学习)
  • vuex如何进行状态管理?
  • 华院计算参与项目再次被《新闻联播》报道
  • 【C++读写.xlsx文件】OpenXLSX开源库在 Ubuntu 18.04 的编译、交叉编译与使用教程
  • 在 Sanic 应用中使用内存缓存管理 IP 黑名单
  • 什么是IIC通信协议?
  • JAVA姓氏头像情侣头像家庭头像签名头像谐音顽埂头像设计小程序头像大全系统小程序源码
  • sentinel2 L2A处理基线04.00 反射率计算方法
  • 【MySQL】视图和触发器
  • 使用代理爬取数据需要筛选合适的ip吗
  • C++11 多线程编程-小白零基础到手撕线程池
  • 【VUE】案例:商场会员管理系统
  • find()和findIndex()方法
  • 微信小程序——音乐播放器
  • 【有啥问啥】二分图(Bipartite Graph)算法原理详解
  • SpringMVC源码-AbstractUrlHandlerMapping处理器映射器将实现Controller接口的方式定义的路径存储进去
  • 健康生活,从日常细节开始
  • NVLM多模态 LLM 在图像和语言任务中的表现优于 GPT-4o
  • Oracle数据恢复—异常断电导致Oracle数据库报错的数据恢复案例
  • 第167天:应急响应-日志自动提取分析项目_ELK_Logkit_LogonTracer_Anolog等
  • Mysql高级篇(下)——日志
  • Microsoft Edge 五个好用的插件
  • MySQL存储过程循环操作
  • LVGL 笔记
  • SpringBoot3+Swagger3(最新版springdoc-openapi教程)