层级关系

层级关系的获取

<div id="container">
    <div>
        <ul id="ul">
            <li>列表1</li>
            <li>列表2</li>
            <li>列表3</li>
            <li>列表4</li>
        </ul>
    </div>
</div>

<script>
    var ul = document.getElementById("ul");
    var div = ul.parentNode.parentNode;
    console.log(div);
    /*在js中，html中的换行或者空格被当做一个元素来处理*/
    var first = ul.firstChild;/*存在bug*/
    var first = ul.firstElementChild;/*修复以后提供的方法*/
    console.log(first);
    var last = ul.lastChild;
    var last = ul.lastElementChild;
    console.log(last);
</script>

<div id="container">
    <div>
        <ul id="ul">
            <li>列表1</li>
            <li>列表2</li>
            <li id="li" name="li3" title="列表3">列表3</li>
            <li>列表4</li>
            <li>列表4</li>
        </ul>
    </div>
</div>

<script>
    var ul = document.getElementById("ul");
    console.log(ul.childNodes);/*存在bug，空格和换行当做元素*/
    console.log(ul.children);/*修复以后的写法，只返回子元素*/
    /*返回当前元素的根节点*/
    console.log(ul.ownerDocument);
    var li = document.getElementById("li");
    /*存在bug，空格和换行当做元素*/
    console.log(li.previousSibling);
    console.log(li.nextSibling);
    /*/*修复以后的写法，只返回前后相邻元素*/
    console.log(li.previousElementSibling);
    console.log(li.nextElementSibling);
    console.log(li.attributes);
</script>

 

创建元素和追加元素

<div id="container">
    <div>
        <ul id="ul">
            <li>列表1</li>
            <li>列表2</li>
            <li>列表3</li>
            <li>列表4</li>
        </ul>
    </div>
</div>

<script>
    /*新增元素*/
    var li = document.createElement("li");
    li.innerHTML = "列表5";
    /*新元素插入到ul标签内*/
    var ul = document.getElementById("ul");
    ul.appendChild(li);
</script>

创建元素和插入元素

<div id="container">
    <div id="body">
        <ul id="ul">
            <li>列表1</li>
            <li>列表2</li>
            <li id="li3">列表3</li>
            <li>列表4</li>
        </ul>
    </div>
</div>

<script>
    /*新增元素*/
    var li = document.createElement("li");
    li.innerHTML = "列表5";
    /*新元素插入到ul标签内*/
    var ul = document.getElementById("ul");
    var li3= document.getElementById("li3");
    /*insertBefore(新元素,再该元素之前插入)
    * 调用insertBefore的元素只能是当前元素的直接父元素。*/
    ul.insertBefore(li,li3);
</script>

复制元素和插入元素

<div id="container">
    <div id="body">
        <ul id="ul">
            <li>列表1</li>
            <li>列表2</li>
            <li id="li3">列表3</li>
            <li>列表4</li>
        </ul>
    </div>
</div>

<script>
    var ul = document.getElementById("ul");
    var newLi = ul.firstElementChild.cloneNode(false);
    var li3 = document.getElementById("li3");
    ul.insertBefore(newLi,li3);
</script>