码迷,mamicode.com
首页 > 其他好文 > 详细

node节点

时间:2017-05-23 19:46:12      阅读:185      评论:0      收藏:0      [点我收藏+]

标签:兄弟节点   删除   存在   com   app   组成   数据   操作   nodevalue   

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

node节点

标签:兄弟节点   删除   存在   com   app   组成   数据   操作   nodevalue   

原文地址:http://www.cnblogs.com/wykbk/p/6894417.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!