js中Dom的方法

一、属性

 1.返回节点名称 nodename

 2.*** 返回当前节点的父节点 parentNode

 3.返回所有子节点  chileNodes   类数组

 4.返回第一个子节点 firstChild

*** 返回第一个子节点 firstElementChild

5.返回最后一个子节点 lastChild

*** 返回最后一个子节点 lastElementChild

6.返回上一个节点 previousSibling

*** 返回上一个节点 previousElementSibling

7.返回下一个节点 nextSibling

*** 返回下一个节点 netxElementSibling

二、方法

1.判断是否有子节点 hasChildNodes 得到的是布尔值

2.创建节点：document.createElement('节点名称')

  添加：

     (1).向当前节点末尾添加节点 appendChild()  父元素.appendChild(新节点)

     (2).向指定位置添加 insertBefore(新节点，参照节点)

3.替换 父元素.replaceChild(新节点，替换节点)

4.删除 父元素.removeChild(子节点)

5.克隆 cloneNode(布尔值)  布尔值为true：克隆子节点   布尔值为false：不克隆子节点   默认是false

布局： 

在</body>和</html>之间写<script></script>

<script>

    ************************************属性*****************************************

    //1.返回节点名称 nodename

    var ulList=document.querySelector('ul')

    var li=document.querySelector('.three')

    var ya=document.querySelector('.four')

    var btn=document.querySelector('button')

    var add=document.getElementsByClassName('btn')[0]

    console.log(ulList.nodeName);

    //2.(重点)*** 返回当前节点的父节点 parentNode

    console.log(ulList.parentNode.parentNode);

    //3.返回所有子节点  chileNodes   类数组

    console.log(ulList.childNodes);

    //4.返回第一个子节点 firstChild

    console.log(ulList.firstChild);

    //*** 返回第一个子节点 firstElementChild

    console.log(ulList.firstElementChild);

    //5.返回最后一个子节点 lastChild

    console.log(ulList.lastChild);

    //*** 返回最后一个子节点 lastElementChild

    console.log(ulList.lastElementChild);

    //6.返回上一个节点 previousSibling

    console.log(li.previousSibling);

    //*** 返回上一个节点 previousElementSibling

    console.log(li.previousElementSibling);

    //7.返回下一个节点 nextSibling

    console.log(li.nextSibling);

    //*** 返回下一个节点 netxElementSibling

    console.log(li.nextElementSibling);

    ************************************方法******************************************

    //1.判断是否有子节点 hasChildNodes 得到的是布尔值

    console.log(li.hasChildNodes());

    //2.创建节点：document.createElement('节点名称')

    // var newLi=document.createElement('li')

    //添加：

    //(1).向当前节点末尾添加节点 appendChild()  父元素.appendChild(新节点)

    // ulList.appendChild(newLi)

    btn.οnclick=function(){

        //1.创建li标签

        var newLi=document.createElement('li')

        newLi.innerHTML=Math.random()

        //2.向ul添加li标签

        ulList.appendChild(newLi)

    }

    //(2).向指定位置添加 insertBefore(新节点，参照节点)

    add.οnclick=function(){

        //1. 创建li标签

        var newLi=document.createElement('li')

        //1.1 丰富li标签内容

        newLi.innerHTML=Math.round(Math.random())

        //2. 向ul添加li标签

        ulList.insertBefore(newLi,li)

    }

    //3.替换 父元素.replaceChild(新节点，替换节点)

    // var newL=document.createElement('li')

    // newL.innerHTML="烤鸡爪"

    // ulList.replaceChild(newL,ya)

    //4.删除 父元素.removeChild(子节点)

    // ulList.removeChild(li)

    //5.克隆 cloneNode(布尔值)  布尔值为true：克隆子节点   布尔值为false：不克隆子节点   默认是false

    var newThree=li.cloneNode(true)

    ulList.appendChild(newThree)  

</script>