node节点

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

一、节点分类

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

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

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

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

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

　　　　注释属于注释节点

 二、节点的属性

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

　　　获得节点信息的属性

 

节点类型

nodeType(数值)

节点名字

nodeName

节点值

nodeValue

元素节点1标签名null属性节点2属性名属性值文本节点3#text文本注释节点8#comment注释的文本文档节点9#documentnull

　　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，将这个节点的所有后代节点全部拷贝，同样不会拷贝事件和数据