JavaScipt：节点操作

得到父节点

    <ul >
        <li class="son">1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>

    <script>
        var son = document.querySelector('.son');
        console.log(son.parentNode);
    </script>

得到子节点

    <ul class="fa">
        <li class="son">1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>

    <script>
        var fa = document.querySelector('.fa');
        console.log(fa.children);
    </script>

得到第一或最后一个子节点

    <ul class="fa">
        <li class="son">1</li>
        <li>2</li>
        <li>3</li>
        <li class="son1">4</li>
    </ul>

    <script>
        var fa = document.querySelector('.fa');
        console.log(fa.firstElementChild);//第一个子节点
        console.log(fa.lastElementChild);//最后一个子节点
    </script>

兄弟节点

    <ul class="fa">
        <li class="son">1</li>
        <li class="son1">2</li>
        <li class="son2">3</li>
        <li class="son4">4</li>
    </ul>

    <script>
        var fa = document.querySelector('.son');
        console.log(fa.nextElementSibling);//第一个子节点

    </script>

创建节点

    <script>
        var add = document.createElement('li') //创建一个li节点
        console.log(add);

    </script>

添加节点

    <ul class="fa">
        <li class="son">1</li>
        <li class="son1">2</li>
        <li class="son2">3</li>
        <li class="son4">4</li>
    </ul>

    <script>
        var add = document.createElement('li') //创建一个li节点
        var uls = document.querySelector('.fa');
        uls.appendChild(add)

    </script>

这个是从后面添加

如果要从前面添加：

    <ul class="fa">
        <li class="son">1</li>
        <li class="son1">2</li>
        <li class="son2">3</li>
        <li class="son4">4</li>
    </ul>

    <script>
        var add = document.createElement('li') //创建一个li节点
        var uls = document.querySelector('.fa');
        uls.insertBefore(add,uls.children[0])

    </script>

删除节点

    <ul class="fa">
        <li class="son">1</li>
        <li class="son1">2</li>
        <li class="son2">3</li>
        <li class="son4">4</li>
    </ul>

    <script>
        var uls = document.querySelector('.fa');
        uls.removeChild(uls.children[2])//删除第三个子节点

    </script>

复制节点

 

    <ul class="fa">
        <li class="son">1</li>
        <li class="son1">2</li>
        <li class="son2">3</li>
        <li class="son4">4</li>
    </ul>

    <script>
        var son1 = document.querySelector('.son1');
        var son11 = son1.cloneNode(true)
        console.log(son11);
        

    </script>