HTML文档中的所有节点组成了一个文档树模型,HTML文档中的每个元素、属性、文本等都代表着树中的一个节点。这些节点相互联系,相互影响,构成一个完整的页面,我们称之为模型。

一、节点分类

  HTML文档中的每个成分都是一个节点:

    整个文档都是一个文档节点   document

    每个HTML标签是一个元素节点

    包含在HTML元素中的文本是文本节点

    每一个HTML属性是一个属性节点

    注释属于注释节点

 二、节点的属性

  1.通过节点的属性我们能够获得每个节点的详细信息(包括节点类型、节点名字、节点值)

   获得节点信息的属性

 

节点类型

nodeType(数值)

节点名字

nodeName

节点值

nodeValue

元素节点

1

标签名

null

属性节点

2

属性名

属性值

文本节点

3

#text

文本

注释节点

8

#comment

注释的文本

文档节点

9

#document

null

  2.通过节点的属性,能够获取到每个节点之间的关系,并且通过这种关系,准确快速的获取到相应节点的对象

   获得节点关系的属性

     obj.parentNode   获得父节点的引用

     obj.childNodes    获得子节点的集合

     obj.firstChild       获得第一个子节点的引用

     obj.lastChild        获得最后一个子节点的引用

     obj.nextSibling    获得下一个兄弟节点的引用

     obj.previousSibling    获得上一个兄弟节点的引用

  

<div class="aa">
    5  <!--sdc-->
</div>

  以上述文档节点为例,测试节点属性

var obj1=document.querySelector(".aa");
   console.log(obj1)   //文档节点
   var obj=obj1.childNodes[0];   //文本节点
   var obj=obj1.childNodes[1];   //注释节点
    
    //获取节点的属性
   console.log(obj.nodeName)  
   console.log(obj.nodeType)
   console.log(obj.nodeValue)

三、节点的创建

var obj=document.createElement("i")  //元素节点的创建
obj.setAttribute("str","aa")   //属性节点的创建
obj.innerHTML="我是创建的文档节点"  //文本节点的创建
document.body.appendChild(obj)   //将创建的文档元素追加到页面上

        1.创建元素节点

    document.createElement("元素标签名")  //创建出的对象属于DOM对象,只存在于内存中,不在页面显示

   2.创建属性节点

      a.对象.属性=“属性值”

      b.对象.setAttribute(属性名,属性值)

      c.var arrt=document.createAttribute("属性名")  

        arrt.nodeValue="属性值";

        obj.setAttributeNode(arrt);

   3.创建文本节点

      对象.innerHTML="";

      document.createTextNode("文本") 

   4.创建注释节点

document.createComment("注释内容")  

四、节点的方法

  • 节点追加
  • 父节点.appendChild(要添加的对象) //添加在父节点的最后
  • 父节点.insertBefore(要插入的对象,要插入的某个对象之前)
  • 节点操作的是现有的元素,元素原有的位置改变
  • 节点的删除
  • 父节点.removeChild(要删除的元素)
  • 节点的替换
  • 父对象.replaceChild(要替换的节点,被替换的节点)
  • 节点的复制
  • obj.cloneNode([boolean]):参数可传可不传 不传值或传False,只会拷贝当前的节点,事件和数据不会被拷贝
    如果传true,将这个节点的所有后代节点全部拷贝,同样不会拷贝事件和数据