获取节点元素

获取元素通常使用两种方式：

若获取元素的到的是一个元素集合，若获取不到返回一个空集合，        如果获取到是一个具体元素，若果获取不到返回null。

1.利用DOM提供的方法获取元素

2.利用节点层级关系获取元素：

        利用父子兄节点关系获取元素

         逻辑性强，但是兼容性稍差

节点概述：

一般的，节点至少拥有nodeType（节点类型），nodeName（节点名称），和nodeValue（节点值）这三个基本属性

    元素节点nodeType为1

    属性节点 nodeType为2

    文本节点 nodeType为3 （文本节点包含文字、空格、换行等）

开发中主要使用元素节点也就是取得标签

nodeType(节点类型)	nodeName（节点名称）	nodeValue（节点值）
值为1（元素节点）	大写的标签名	null
3（文本节点）	#test	文本内容
8（注释节点）	#comment	注释内容
9（文档节点）	#document	null

节点层次：

利用DOM树可以把节点划分为不同分层级关系，常见的是夫子兄层级关系

1.父级节点

    node.parentNode

    <div class="father">

        <span class="son"></span>

    </div>

    <script>

    var sp = document.querySelector(".son");

    //得到的是距离他最近的父级元素

    var fa = sp.parentNode ;

    console.log(sp);

    console.log(fa);

    </script>

利用node.parentNode,得到的是离本节点最近的父级节点，如果找不到父节点就返回为NULL

2.子节点

父元素.childNodes  

在标准浏览器下会将换行及空格当做文本节点

返回包含指定节点的子节点的集合，该集合为及时更新的集合。

注意：返回值里面包括了所有的子节点，包含元素节点，文本节点等。

          空格也算是一个子节点。

          如果只想要获得里面的元素节点，则需要专门处理，所以一般不提倡使用childNodes

取子节点的时候一定要切记：当遇到表格的时候，即使没有添加tbody，表格也会自动添加上tbody

获取元素子节点的方法：

var ul = document.querySelector("ul");

for(var i = 0 ; i < ul.childNodes.length ; i ++ ){

    if(ul.childNodes[i].nodType == 1){

        //ul.childNodes[i] 是元素节点

        console.log(ul.childNodes[i]);

    }

}

parentNode.firstchild               第一个个子节点

parentNode.lastchild                最后一个子节点

parentNode.previousSibling   上一个兄弟节点

parentNode.nextSibling          下一个兄弟节点

获取直接元素子节点：

//children   父元素.children

返回值：元素集合；

存在兼容问题：

IE8及以下会将注释节点获取到

var res = box.children ;

console.log(res) ;

这样就能获取到box下的直接元素子节点

---

创建节点：

     createElement（“元素名”）

        写法：var div = document.createElement("div");

                这样就创建了一个div元素节点，这个方法只能创建节点，但是页面中没有显示。并不是添加元素

添加元素：

     appendChild（"元素名"） 在末尾追加方式插入节点

        写法：document.body.appendChild("div")，这样就在body的末尾插入了一个div元素。

        用法：先创建一个节点，然后把创建的节点赋给变量，然后把变量传入插入节点的参数中

                例如：

                    var div = document.createElement("div");

                    document.body.appendChild(div);

insertBefor( ) :

作用：在指定节点前插入新节点；

box.insertBefore(新元素，旧元素);

例如：

 var img1 = document.createElement("img");

            img1.setAttribute("src","images/2.jpg");

            box.insertBefore(img1,img);

cloneNode( )

作用： 克隆节点；

 function fuzhi(){

            var img2 = img.cloneNode();

            document.body.appendChild(img2);

        }

removechild( )

作用：删除节点

function deleted(){

            var index = prompt("请输入要删除的索引")

            var imgs =document.getElementsByClassName("img"+index)[0];

            document.body.removeChild(imgs);

        }

replaceChild( )

作用：替换节点

 function replaceimg(){

            var newimg = document.createElement("img");

            newimg.setAttribute("src","images/2.jpg");

            box.replaceChild(newimg,img);

        }

懂法守法