<body>

        <div id="only" class="demo">5
            <strong>赋值
                <em>1</em>
            </strong>
            <span></span>
            <!-- 注释节点comment -->
        </div>

<script type="text/javascript">

1.节点类型

元素节点----1（nodeType）

属性节点----2

文本节点----3

注释节点----8

document节点--9

DocumentFragment节点--11

dom元素的属性

一、遍历节点数

1.父节点.parentNode。

最顶端的父节点为--->document往上为null

var strong = document.getElementsByTagName("strong")[0];

strong.parentNode=<div id="only" class="demo">...</div>

父节点.jpg

2.子节点们.childNodes 返回当前元素所有子元素的数组

// 第一个子节点:firstChild

// 最后一个子节点:lastChild

// 前一个兄弟节点:previousSibling

// 后一个兄弟节点:nextSibling

var div = document.getElementsByTagName("div")[0];

子节点数.jpg

子节点数数.jpg

二、基于元素节点的遍历

//除了children以外其他的兼容性都不好IE9及以下

var div = document.getElementsByTagName("div")[0];

document--->自成节点,不是元素节点

1.父元素节点----.parentElement(IE不兼容),没有document

2.元素的元素子节点-----------.children

当前元素节点的子元素长度有两种方法:

1)node.childElementCount.`` 2)node.children.length

返回第一个元素子节点.firstElementChild(IE不兼容)

返回最后一个元素子节点.lastElementChild(IE不兼容)

返回前一个兄弟元素节点:.previousElementSibling

返回后一个兄弟元素节点.nextElementSibling

基于元素节点的遍历.jpg

节点的4个属性

1 nodeName---元素的标签名,以大写形式表示,只读(不能修改值)

2 nodeValue-->>>>>--Text节点或Comment节点的文本内容,可读写,其他节点nodeValue:null

3 nodeType---该节点的类型,只读!!!!!!!!!!

4 attributes--Element节点的属性集合

节点的一个方法:Node.hasChildNodes();------即使里面有一个空格也是true,是文本节点

attributes不常用.jpg

div下面的元素节点,封装一个方法,返回,不用children。例子

写法1

var div = document.getElementsByTagName("div")[0];
function retElementChild(node){//return
     var arr = [],
        child = node.childNodes
        len = child.length;
     for(var i = 0;i <len; i++){
         if(child[i].nodeType === 1){
             arr.push(child[i]);
         }
     }
     return arr;
 }
 console.log(retElementChild(div));

写法2类数组

 var div = document.getElementsByTagName("div")[0];
 function retElementChild(node){//return
     var temp = {
         length:0,
         push:Array.prototype.push,
         splice:Array.prototype.splice,//系统内部弄成数组
     },
     child = node.childNodes,
     len = child.length;
     for(var i = 0;i <len; i++){
         if(child[i].nodeType === 1){
            temp.push(child[i]);
         }
     }
     return temp;
 }
 console.log(retElementChild(div));

</script>

</body>

dom选择元素的属性类操作