HTML DOM对象 获取各种类型的节点

HTML DOM对象 获取各种类型的节点

1.节点（node）的分类

nodeName　　　　　　　　　　nodeValue　　　　　　　　　　nodeType

元素节点 标签名　　　　　　　　null　　　　　　　　　　　　　　1nt

属性节点属性名　　　　　　　　属性值　　　　　　　　　　　　　2

文本节点#text　　　　　　　　   文本值　　　　　　　　　　　　　3

注释节点#comment　　　　　　 注释内容　　　　　　　　　　　　 8

2.元素节点的4种获取方式

<div id="tt"  class="div"  name="yy"></div>

var stt = document.getElementById("tt");

var stt = document.getElementsByClassName("div")[0];　　　　[0]代表相同名字时第一个元素内容也就是父级元素下所有内容

详细解释：通过document.getElementsByClassName("div")获取到name为div的元素。[ n] n代表相同name情况下第几个元素

3.获取节点所有的子节点

console.log(stt.childNodes);

var sttChild = stt.childNode;

console.log(sttChild.nodeName//获取节点的name,sttChild.nodeValue//获取节点的值,sttChild.nodeType//获取节点的类型)

4.获取节点的属性节点

var sttattr = stt.attributes;

注意当一个元素内有多个属性 比如 id   class  style name  同时存在时 谁在前面先获取谁

 节点的层次关系

<div id="tt"  class="div"  name="yy"></div>

var stt = document.getElementById("tt");

stt.childNodes//获取所有子节点

stt.firstChild//获取第一个子节点

stt.lastChid//获取最后一个子节点

兄弟关系

stt.previousSibling//获取前一个兄弟的节点

stt.nextSibling//获取下一个兄弟的节点

stt.ownerDocument //获取根节点