常见的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>

  

posted on   晓风零乱  阅读(413)  评论(0编辑  收藏  举报

编辑推荐:
· 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)
· 程序员常用高效实用工具推荐,办公效率提升利器!
点击右上角即可分享
微信分享提示