javascript系列-class10.DOM（下）

1.node节点（更详细的获取（设置）页面中所有的内容）

 

 

 

 

根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点：

 

元素是节点的别称，节点包含元素当然节点还有好多细化的种类；

 

 

 

有元素节点、属性节点、文本节点.......

 

节点的关系从这里真正的体现出来

 

 

 

 

根节点：root>>>>HTML没有父节点；

 

节点操作：（通过父子系关系）

 

childNodes：获取当前元素的所有子节点；

 

nodeType:节点种类，返回值是数字；

 

nodeValue: 获取（文字）节点的文本内容；

 

nodeName：返回node节点名称（#text，注释， 标签....）；

 

一个可以找出元素节点的方法；

 

 

常见的节点类型：

 

1            元素（div、body、li、span ....... ） 

 

2*           属性代表属性节点 （class，src，href）

 

3            文本节点（text节点）

 

8            代表注释节点

 

9            代表document节点；

 

2.innerHTML和nodeValue;(当innerHTML和nodeValue分别作为左值的时候)

 

 box.innerHTML = '<strong>abc</strong>';

 

 box.childNodes[0].nodeValue = '<strong>abc</strong>';

 

innerHTML会将标签解析；

 

nodeValue不会进行解析，会将标签名转译成字符串，直接输出；

 

3.attribute属性

 

    document.getElementById('box').attributes    //  获取所有，该节点的属性信息；

 

    document.getElementById('box').attributes.length;//返回属性节点个数

 

    document.getElementById('box').attributes[0]; //返回第一个属性节点

 

    document.getElementById('box').attributes[0].nodeType; //2，属性

 

    document.getElementById('box').attributes[0].nodeValue; //属性值

 

    document.getElementById('box').attributes['id']; //返回属性为 id 的节点

 

    document.getElementById('box').attributes.getNamedItem('id'); // 获取 id 的节点；

 

     一般只用作获取；

 

4.节点操作

 

     DOM不仅仅可以获取设置节点，还可以创建，删除，复制、插入、替换节点；

 

     write()方法，是写入，和innerHTML类似；

 

     node三剑客

 

 

 

      createElement()创建一个节点；

 

          var oDiv=document.createElement('div')

 

      createTextNode()创建一个文字节点；

 

          var oText=document.createTextNode('dddd');

 

     oDiv.appendChild(oText)  将一个节点插入到另一个节点上；

 

      box.insertBefore(newNode, existNode) 把new node插入到existNode之前；

 

     oDiv.insertBefore(document.createTextNode('eeeeee'),oDiv.childNodes[0]) ；

 

      box.removeChild(oText) 删除节点

 

++定位

 

     offsetParent 这个属性的返回值是它根据谁定位的，如果它的所有父元素都没有定位，那么返回body

 

     offsetLeft          这个属性返回元素的左侧偏移值；

 

     offsetTop        这个属性返回元素的右侧偏移值；

     

     获取元素相对于窗口的绝对定位；

 

 

5.替换操作

 

 var p=document.createElement('p')

 

 oDiv.parentNode.replaceChild(p,oDiv);

 

6.复制节点

     

        var oDiv=document.getElementById('box');

 

        var clone=oDiv.cloneNode(true);

 

        oDiv.appendChild(clone)

 

        console.log(clone)

 

7.遍历节点（根据某一个节点位置找到它的父子、兄弟节点）

 

 父子节点：

 

 

 

 

 

 

 

兄弟节点：

 

 

 

 

 

 

 

 

 

     父（parent）、子（child）和同胞（sibling）等术语用于描述这些关系。父节点拥有子节点。同级的子节点被称      为同胞（兄弟或姐妹）。

 

     childNodes 获取当前元素节点的所有子节点

   

    firstChild 获取当前元素节点的第一个子节点

 

    lastChild | lastElementChild 获取当前元素节点的最后一个子节点

 

    ownerDocument 获取该节点的文档根节点，相当与 document

 

    parentNode 获取当前节点的父节点

 

    previousSibling 获取当前节点的前一个同级节点

 

    nextSibling 获取当前节点的后一个同级节点

 

案例

1.Table图片切换；

 

选项卡.rar
282.0 KB

 

        2.聊天对话；

 

聊天对话.html
3.9 KB

 

        3.隔行变色之鼠标移入变色

 

隔行变色.html
1.5 KB