节点nodeType、parentNode、children。下拉菜单。

最新推荐文章于 2022-12-23 13:37:06 发布

mewgulfszd！

最新推荐文章于 2022-12-23 13:37:06 发布

阅读量240

点赞数

文章标签：前端 javascript

本文链接：https://blog.csdn.net/CLhen/article/details/125521476

版权

元素节点nodeType为1

属性节点nodeType为2

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

1、父节点

parentNode

得到的是离元素最近的父级节点，如果找不到父节点就返回null。

2、子节点

① childNode

得到所有子节点，包含元素节点文本节点等，麻烦，不推荐使用。没有就返回null。

② children

获取所有的子元素节点，常用。没有就返回null。

element.children[0] 获取第一个子元素节点

element.children[element.children.lengthi-1] 获取最后一个子元素节点。

③ firstChild

获取第一个子节点，不论文本节点还是元素节点。没有就返回null。

④ lastChild

获取最后一个子节点，不论文本节点还是元素节点。没有就返回null。

⑤ firstElementChild

返回第一个子元素节点。有兼容性问题 IE9以上。没有就返回null。

⑥ lastElementChild

返回最后一个子元素节点。有兼容性问题 IE9以上。没有就返回null。

下拉菜单。

<body>
    <ul class="nav">
        <li>
            <a href="#">首页</a>
            <ul class="list">
                <li>
                    <a href="#">1</a>
                </li>
                <li>
                    <a href="#">1</a>
                </li>
                <li>
                    <a href="#">1</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#">设置</a>
            <ul class="list">
                <li>
                    <a href="#">1</a>
                </li>
                <li>
                    <a href="#">1</a>
                </li>
                <li>
                    <a href="#">1</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#">我的</a>
            <ul class="list">
                <li>
                    <a href="#">1</a>
                </li>
                <li>
                    <a href="#">1</a>
                </li>
                <li>
                    <a href="#">1</a>
                </li>
            </ul>
        </li>
    </ul>
    <script>
        var nav = document.querySelector('.nav')
        var lis = nav.children
        console.log(lis);
        for (var i = 0; i < lis.length; i++) {
            lis[i].onmouseover = function () {
                this.children[1].style.display = 'block';
            }
            lis[i].onmouseout = function () {
                this.children[1].style.display = 'none';
            }
        }
    </script>
</body>

3、兄弟节点

① nextSibling

得到下一个兄弟节点，包含元素节点或者文本节点。没有就返回null。

② previousSibling

得到上一个兄弟节点，包含元素节点或者文本节点。没有就返回null。

③ nextElementSibling

得到下一个兄弟元素节点。没有就返回null。

④ previousElementSibling

得到上一个兄弟元素节点。没有就返回null。

4、创建和添加元素节点

createElement、appendChild、insertBefore

<body>
    <ul></ul>
    <script>
        // 1、创建元素节点
        var li = document.createElement('li');
        // 2、添加元素节点 node.appendChild(child) node父级 child子级 后面追加元素 相当于push
        var ul = document.querySelector('ul')
        ul.appendChild(li);
        // 3、添加节点 node.insertBefore(child,指定元素)
        var lili = document.createElement('li')
        ul.insertBefore(li, ul.children[0]);
    </script>
</body>

5、删除节点

removeChild

发布留言。

<body>
    <textarea cols="30" rows="10"></textarea>
    <button class="btn">发送</button>
    <ul></ul>
    <script>
        var text = document.querySelector('textarea')
        var btn = document.querySelector('.btn')
        var ul = document.querySelector('ul')
        btn.onclick = function () {
            if (text.value == '') {
                alert('请输入文字');
                return false;
            } else {
                var li = document.createElement('li');
                li.innerHTML = text.value + "<a href='javascript:;'>删除</a>";
                ul.insertBefore(li, ul.children[0]);
                var as = document.querySelectorAll('a')
                for (var i = 0; i < as.length; i++) {
                    as[i].onclick = function () {
                        ul.removeChild(this.parentNode)
                    }
                }
            }
            text.value = ''
        }
    </script>
</body>

6、复制节点

cloneNode

<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    <script>
        var ul=document.querySelector('ul');
        // 1、node.cloneNode();括号为空或者里面是false 为浅拷贝 只复制标签不复制里面的内容
        // 2、node.cloneNode(true);括号为true 为深拷贝 复制标签复制内容
        var lili=ul.children[0].cloneNode(true);
        ul.appendChild(lili);
    </script>
</body>