常见的Dom操作
1.什么是DOM?
DOM又称文档对象模型( DOM, Document Object Model )主要用于对HTML和XML文档的内容进行操作。DOM描绘了一个层次化的节点树,通过对节点进行操作,实现对文档内容的添加、删除、修改、查找等功能。
2.什么是DOM树?
DOM树有两种,分别为节点树和元素树。
节点树:把文档中所有的内容都看成树上的节点;
元素树:仅把文档中的所有标签看成树上的节点。
3.DOM常用操作
1.查找节点
document.getElementById('id属性值'); |
返回拥有指定id的第一个对象的引用 |
document/element.getElementsByClassName('class属性值'); |
返回拥有指定class的对象集合 |
document/element.getElementsByTagName('标签名'); |
返回拥有指定标签名的对象集合 |
document.getElementsByName('name属性值'); |
返回拥有指定名称的对象结合 |
document/element.querySelector('CSS选择器'); |
仅返回第一个匹配的元素 |
document/element.querySelectorAll('CSS选择器'); |
返回所有匹配的元素 |
document.documentElement |
获取页面中的HTML标签 |
document.body |
获取页面中的BODY标签 |
document.all[''] |
获取页面中的所有元素节点的对象集合型 |
2.新建节点
document.createElement('元素名'); |
创建新的元素节点 |
document.createAttribute('属性名'); |
创建新的属性节点 |
document.createTextNode('文本内容'); |
创建新的文本节点 |
document.createComment('注释节点'); |
创建新的注释节点 |
document.createDocumentFragment( ); |
创建文档片段节点 |
3.添加新节点 注(添加新节点和新建节点不同,新建的节点如果不添加到DOM中,是不会有任何效果的)
parent.appendChild( element/txt/comment/fragment ); |
向父节点的最后一个子节点后追加新节点 |
parent.insertBefore( newChild, existingChild ); |
向父节点的某个特定子节点之前插入新节点 |
element.setAttributeNode( attributeName ); |
给元素增加属性节点 |
element.setAttribute( attributeName, attributeValue ); |
给元素增加指定属性,并设定属性值 |
4.删除节点
parentNode.removeChild( existingChild ); |
删除已有的子节点,返回值为删除节点 |
element.removeAttribute('属性名'); |
删除具有指定属性名称的属性,无返回值 |
element.removeAttributeNode( attrNode ); |
删除指定属性,返回值为删除的属性 |
5.修改节点
parentNode.replaceChild( newChild, existingChild ); |
用新节点替换父节点中已有的子节点 |
element.setAttributeNode( attributeName ); | 若原元素已有该节点,此操作能达到修改该属性值的目的 |
element.setAttribute( attributeName, attributeValue ); | 若原元素已有该节点,此操作能达到修改该属性值的目的 |
不多说了,直接上代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 | <!DOCTYPE html> <html lang= "en" > <head> <meta charset= "UTF-8" > <title>Document</title> </head> <body> <h2>创建文本节点</h2> <button onclick= "addText()" >创建文本节点</button> <p></p> <script> function addText(){ //创建文本节点 var a=document.createTextNode( 'this is a 文本' ); //创建文本节点 document.getElementsByTagName( 'p' )[0].appendChild(a); //添加文本节点 document.getElementsByTagName( 'button' )[0].innerHTML= '你看我变了没?' ; //新增文本内容 var b=document.createAttribute( 'id' ); //创建一个属性节点 也可以在创建时给他赋值 b.value= '123' ; //给这个属性节点赋值 document.getElementsByTagName( 'p' )[0].setAttributeNode(b); //给p元素设置新的属性 document.getElementsByTagName( 'button' )[0].setAttribute( 'id' , 'buttonId' ); //给button元素设置id属性 //创建新元素 var c=document.createElement( 'div' ); //创建一个新元素div var cul=document.createElement( 'ul' ); //创建一个新元素 ul var culli=document.createElement( 'li' ); //创建一个新元素 li culli.innerHTML= '6' ; // 新增文本内容 c.appendChild(cul).appendChild(culli); //添加子节点 document.body.appendChild(c); //往body中添加子节点 //等同于: //var d="<ul><li>6</li>"; //字符串 //c.append(d); //jquery append方法 //document.body.appendChild(c); } </script> </body> </html> |
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· Linux glibc自带哈希表的用例及性能测试
· 深入理解 Mybatis 分库分表执行原理
· 如何打造一个高并发系统?
· .NET Core GC压缩(compact_phase)底层原理浅谈
· 现代计算机视觉入门之:什么是图片特征编码
· 手把手教你在本地部署DeepSeek R1,搭建web-ui ,建议收藏!
· Spring AI + Ollama 实现 deepseek-r1 的API服务和调用
· 数据库服务器 SQL Server 版本升级公告
· C#/.NET/.NET Core技术前沿周刊 | 第 23 期(2025年1.20-1.26)
· 程序员常用高效实用工具推荐,办公效率提升利器!