JavaScript - 操作元素 - 节点操作

最新推荐文章于 2023-12-20 10:30:50 发布

学习中的小菜鸟.

最新推荐文章于 2023-12-20 10:30:50 发布

阅读量334

点赞数 1

分类专栏： JavaScript 文章标签： js

本文链接：https://blog.csdn.net/qq_33962481/article/details/118099731

版权

JavaScript 专栏收录该内容

66 篇文章 1 订阅

订阅专栏

一、利用节点的层次关系获取元素

网页中的所有内容都是节点(标签, 属性, 文本, 注释等.) 节点用node表示.

节点至少拥有nodeType(节点类型) . nodeName(节点名称) 和 nodeValue(节点值) 这三个基本属性.

元素节点 nodeType 为 1
属性节点 nodeType 为 2
文本节点 nodeType 为 3 (文本节点包括文字, 空格, 换行等)

二、节点层级

父级节点

node.parentNode

<body>
    <div class="box">
        <span class="erweima">×</span>
    </div>

    <script>
        // 父节点
        var erweima = document.querySelector('erweima');
        // 获取到的是离元素最近的父级节点.
        erweima.parentNode;
    </script>
</body>

子级节点

语法 :

parentNode.childNodes(标准)

parentNode.childNodes 返回包含指定节点的子节点的集合. 该集合为即时更新的集合.

使用

<body>
    <ul>
        <li>子节点</li>
        <li>子节点</li>
        <li>子节点</li>
        <li>子节点</li>
    </ul>

    <script>
        var ul = document.querySelector('ul');
        console.log(ul.childNodes); 
    </script>
</body>

返回的是 NodeList(9) [text, li, text, li, text, li, text, li, text]

childNodes 得到所有的子节点, 包含元素节点, 文本节点等等.

子节点 (只获得子元素节点)

语法 :

parentNode.children;

<body>
    <ul>
        <li>子节点</li>
        <li>子节点</li>
        <li>子节点</li>
        <li>子节点</li>
    </ul>

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

三、第一个子元素和最后一个子元素

获取第一个子元素和最后一个子元素

// 获取第一个子元素
parentNode.firstChild;
// 获取最后一个子元素
parentNode.lastChild;

获取所有的子元素节点, 包括文本节点.

获取第一个子元素和最后一个子元素 (只获得子元素节点)

// 获取第一个子元素节点
parentNode.firstElementChild;
// 获取最后一个子元素节点
parentNode.lastElementChild;

获取第一个子元素和最后一个子元素(第三种写法)

// 获取第一个子元素
parentNode.children[0];
// 获取最后一个子元素
parentNode.children[ul.children.length - 1];

下拉列表

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        a {
            color: black;
            text-decoration: none;
        }

        li {
            list-style: none;
        }

        a {
            display: block;
            width: 100px;
            height: 40px;
            text-align: center;
            line-height: 40px;
        }

        .nav {
            margin: 100px auto;
            width: 500px;
        }

        .nav>li {
            float: left;
            text-align: center;
        }

        .nav>li>ul {
            display: none;
        }

        .nav>li>ul>li {
            height: 40px;
            line-height: 40px;
            border: 1px solid orange;
            margin-top: -1px;
            box-shadow: 2px 0px 2px #ccc;
            padding: 0px 15px;
        }
    </style>
</head>

<body>
    <ul class="nav">
        <li>
            <a href="">微博</a>
            <ul>
                <li>私信</li>
                <li>评论</li>
                <li>@我</li>
            </ul>
        </li>

        <li>
            <a href="">博客</a>
            <ul>
                <li>博客评论</li>
                <li>未读提醒</li>
            </ul>
        </li>

        <li>
            <a href="">邮箱</a>
            <ul>
                <li>免费邮箱</li>
                <li>VIP邮箱</li>
                <li>企业邮箱</li>
                <li>新浪邮箱客户端</li>
            </ul>
        </li>
    </ul>
    </div>

    <script>
        // 获取元素
        var ul = document.querySelector('.nav');
        // 获取ul下面的li
        var lis = ul.children;

        for (var i = 0; i < lis.length; i++) {
            // 给li绑定事件
            lis[i].onmouseover = function () {
                // 改变li的第一个子类, 也就是a标签的样式
                this.firstElementChild.style.backgroundColor = '#ccc';
                this.firstElementChild.style.color = 'orange';
                // 让li的最后一个子类, 也就是ul显示
                this.lastElementChild.style.display = 'block';
            }
            lis[i].onmouseout = function () {
                this.firstElementChild.style.backgroundColor = '';
                this.firstElementChild.style.color = 'black';
                this.lastElementChild.style.display = 'none';
            }
        }

    </script>
</body>

</html>

四、兄弟节点

下一个兄弟节点

node.nextSibling

nextSibling 返回当前元素的下一个兄弟节点. 包含所有的节点.

上一个兄弟节点

node.previousSibling

previousSibling 返回当前元素的上一个兄弟节点. 包含所有的节点.

下一个兄弟元素节点

node.nextElementsSibling

nextElementsSibling 返回当前元素的下一个兄弟元素节点.

上一个兄弟元素节点

node.previousElementsSibling

previousElementsSibling 返回当前元素的上一个兄弟元素节点.

五、创建节点和添加节点

创建节点

语法 :

document.createElement('tagName')

由tagName 指定的 HTML元素, 因为这些元素原先不存在, 是根据我们的需求动态生成的. 所有我们也称为 动态创建元素节点.

<body>
    <ul></ul>
    <script>
        // 创建li标签
        var li = document.createElement('li');
    </script>
</body>

添加节点

语法 :

node.appendChild(child);

将一个节点添加到指定父节点的子节点列表末尾. 类似于 CSS 里面的 after伪元素.

node 是父级
child 是子级

<body>
    <ul></ul>
    <script>
        // 创建li标签
        var li = document.createElement('li');
        var ul = document.querySelector('ul');
        // 在ul里面添加li节点
        ul.appendChild(li);
    </script>
</body>

在指定元素前面添加节点

node.insertBefore(child, 指定元素)

将一个节点添加到父节点的指定子节点前面. 类似于CSS里面的 before 伪元素.

<body>
    <ul>
        <li>第一个li</li>
    </ul>
    <script>
        // 创建li标签
        var li = document.createElement('li');
        var ul = document.querySelector('ul');
        // 在ul里面第一个li之前添加li节点
        ul.insertBefore(li, ul.children[0]);
    </script>
</body>

简单的发布评论案例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        li {
            background-color: pink;
            color: orangered;
            list-style: none;
            text-indent: 1em;
        }

        .box {
            width: 300px;
            margin: 100px auto;
        }

        .box ul {
            margin-top: 50px;
        }
    </style>
</head>

<body>
    <div class="box">
        <textarea name="liuyan" id="" cols="30" rows="10"></textarea>
        <input type="submit" value="发布">

        <ul>
            <li>123</li>
        </ul>
    </div>
    <script>
        var texta = document.querySelector('textarea');
        var input = document.querySelector('input');
        var ul = document.querySelector('ul');

        input.onclick = function () {
            // 创建li标签
            var li = document.createElement('li');
            // 获得提交的文字, 并把文字给li
            li.innerHTML = texta.value;
            // 把最近提交的评论添加到最前面
            ul.insertBefore(li, ul.children[0]);
        }
    </script>
</body>

</html>

六、删除节点

node.removeChild(child);

从DOM中删除一个子节点. 返回删除的节点.

<body>
    <ul>
        <li>第一个li</li>
    </ul>
    <script>
        var ul = document.querySelector('ul');
        var li = document.querySelector('ul>li');
        ul.removeChild(li);
    </script>
</body>

案例 : 点击按钮删除元素

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button>删除</button>
    <ul>
        <li>第一个li</li>
        <li>第二个li</li>
        <li>第三个li</li>
        <li>第四个li</li>
    </ul>
    <script>
        // 获取元素
        var button = document.querySelector('button');
        var ul = document.querySelector('ul');

        // 绑定事件
        button.onclick = function () {
            // 防止删完了报错
            if (ul.children.length > 0) {
                ul.removeChild(ul.children[0]);
            } else {
                alert('删完了');
            }
        }
    </script>
</body>

</html>

案例 : 删除评论

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        a {
            color: black;
            text-decoration: none;
        }

        li {
            background-color: pink;
            color: orangered;
            list-style: none;
            text-indent: 1em;
        }

        .box {
            width: 300px;
            margin: 100px auto;
        }

        .box ul {
            margin-top: 50px;
        }

        .box ul li a {
            float: right;
            padding-right: 5px;
        }
    </style>
</head>

<body>
    <div class="box">
        <textarea name="liuyan" id="" cols="30" rows="10"></textarea>
        <input type="submit" value="发布">

        <ul>
            <li>123</li>
        </ul>
    </div>
    <script>
        var texta = document.querySelector('textarea');
        var input = document.querySelector('input');
        var ul = document.querySelector('ul');

        input.onclick = function () {
            // 创建li标签
            var li = document.createElement('li');
            // 获得提交的文字, 并把文字给li
            li.innerHTML = texta.value + "<a href='#'>删除</a>";
            // 把最近提交的评论添加到最前面
            ul.insertBefore(li, ul.children[0]);
            texta.value = '';

            var a = document.querySelectorAll('ul>li>a');

            for (var i = 0; i < a.length; i++) {
                a[i].onclick = function () {
                    ul.removeChild(this.parentNode);
                }
            }
        }
    </script>
</body>

</html>