javascript教程系列-10.DOM（下）

欢迎加入前端交流群交流知识获取视频资料：749539640

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