DOM 节点

 DOM 节点

页面是由一个一个得节点组成

组成部分都是一个节点

       

   1. document

            一个页面中最大得节点, 只能有一个

            承载所有节点得容器, 不属于元素

            根节点

          2. html

            一个页面中最大的元素节点

            承载所有其他节点得

            根元素节点

          3. 元素节点

          head / body / div / ul / table / ...

            只是不同得标签再页面中得表现形式不一样

          

 

特点: 是页面得标签

          4. 文本节点

          每一段文本内容都是一个文本节点

            包含 换行 和 空格

            一般作为元素节点得子节点存在, 用来表示该元素节点再页面上显示得内容

          5. 属性节点

            

注意: 属性节点不作为独立节点出现, 必须依赖元素

            因为没有元素, 属性节点就是文本

          6. 注释节点

            作为独立节点出现

            为说明文本使用

 节点操作

        不止操作元素

        还要操作 注释节点 文本节点 属性节点

     

1.创建节点

          通过 JS 得语法来制造一个 标签 / 文本 / 注释 / ...

          1. createElement()

          2. createtextNode()

          3. createComment()

          4. createAttribute()

 

 

2.插入节点

          把我创造得节点插入另一个节点中, 出现父子结构

          1. appendChild()

          2. insertBefore()

      

3.删除节点

      把一个已经存在得节点移出

          1. removeChild()

          2. remove()

       

4. 替换节点

          创造一个节点去替换一个存在得节点

          1. replaceChild()

 

5.克隆节点

        把一个已经存在得节点复制一份

          1. cloneNode()

            参数默认为 false, 不克隆后代节点

          选填 true, 克隆后代节点

 

 

获取节点

       

   1. 方法（上面已经讲过）

          2. 属性

公共html部分
 <div id=&quot;box&quot; class=&quot;abc&quot; index=&quot;hello world&quot;>
 hello
 <p>你好</p>
 wolrd
 <p>世界</p>
 </div>
 获取元素
 var div = document.querySelector('div')

 1. childNodes

： 元素.childNodes

        元素得所有 子节点(伪数组)

 var child = div.childNodes；
 console.log(child)；

        

2. children

： 元素.children

          元素得所有 子元素节点(伪数组)

 var childEle = div.children；
 console.log(childEle)；

      

  3. firstChild

: 元素.firstChild

      元素得第一个 子节点

 var first = div.firstChild;
 console.log(first);

        4. firstElementChild ：元素.firstElementChild

          元素得第一个 子元素节点

var firstEle = div.firstElementChild;
 console.log(firstEle);

        5. lastChild： 元素.lastChild

      元素得最后一个 子节点

 var last = div.lastChild;
 console.log(last);

        6. lastElementChild: 元素.lastElementChild

          元素得最后一个 子元素节点

 

var lastEle = div.lastElementChild;
 console.log(lastEle);

 7. previousSibling:

 元素.previousSibling

        元素得上一个 兄弟节点

 var prev = div.previousSibling;
 console.log(prev);

      

  8. previousElementSibling

: 元素.previousElementSibling

        元素得上一个 兄弟元素节点

var prevEle = div.previousElementSibling;
 console.log(prevEle);

        

9. nextSibling:

 元素.nextSibling

          + 得到: 元素得下一个 兄弟节点

var next = div.nextSibling;
 console.log(next);

        

10. nextElementSibling:

 元素.nextElementSibling

        元素得下一个 兄弟元素节点

var nextEle = div.nextElementSibling;
console.log(nextEle);

 11. parentNode:

元素.parentNode

        该元素得 父节点

     

var parent = div.parentNode;
 console.log(parent);

        12. parentElement: 元素.parentElement

          该元素得 父元素节点

var parentEle = div.parentElement;
 console.log(parentEle);

        13. attributes:元素.attributes

        该元素得所有 属性节点

 var attrs = div.attributes;
 console.log(attrs);

节点属性

      属性节点

          元素身上放的属性，是一个节点

        节点属性

        描述找个节点得信息

        不同的节点有相同得属性名, 值不一样

  

 1. nodeType

            以数字得形式来表示一个节点类型

          一种节点得编号

            元素节点: 1

            属性节点: 2

          文本节点: 3

          注释节点: 8

          2. nodeName

            节点得名称

            元素节点: 大写标签名(全大写)

            属性节点: 属性名

        文本节点: 所有文本节点名称全部叫做 #text

          注释节点: 所有注释节点名称全部叫做 #comment

          3. nodeValue

          节点的值

          元素节点: null

          属性节点: 属性值

          文本节点: 文本内容(包含换行和空格)

          注释节点: 注释内容(包含换行和空格)

          


// 元素节点
 var div = document.querySelector('div')
 // 属性节点
 var attr = div.attributes[0]
 // 文本节点
 var text = div.childNodes[2]
 // 注释节点
 var comment = div.childNodes[1]

 console.log('元素节点 ', div)
 console.log('属性节点 ', attr)
 console.log('文本节点 ', text)
 console.log('注释节点 ', comment)

 console.log('===========================')


 // 节点属性 - 节点的值
 console.log('元素节点 ', div.nodeValue)
 console.log('属性节点 ', attr.nodeValue)
 console.log('文本节点 ', text.nodeValue)
 console.log('注释节点 ', comment.nodeValue)