JavaScript-节点操作

最新推荐文章于 2023-05-11 11:05:57 发布

qq_52822043

最新推荐文章于 2023-05-11 11:05:57 发布

阅读量1.4k

点赞数

文章标签：前端 html javascript

本文链接：https://blog.csdn.net/qq_52822043/article/details/123655477

版权

1. 节点概述

网页中的所有内容都是节点（标签、属性、文本、注释等），在DOM中，节点用node来表示。

HTML DOM树中的所有节点均可通过JavaScript进行访问，所有HTML元素（节点）均可被修改，也可以创建或删除。

一般的，节点至少拥有nodeType（节点类型）、nodeName（节点名称）和nodeValue（节点值）这三个基本属性。

元素节点 nodeType：1
属性节点 nodeType：2
文本节点 nodeType：3（文本节点包括文字、空格、换行等）

2. 节点层次

利用DOM树可以把节点划分为不同的层级关系，常见的是父子兄层级关系。

1）父级节点

node.parentNode
得到的是离元素最近的父级节点
如果指定的节点没有父节点则返回null

<body>
    <div class="box">
       <span class="num">1</span>
    </div>

    <div class="container"></div>
    <script>
        var num = document.querySelector('.num');
        //node.parentNode:得到的是离元素最近的父级节点,没有则返回null
        console.log(num.parentNode);

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

结果为：

2）子节点

parentNode.childNodes（标准）：得到的节点包括元素节点、文本节点等
parentNode.children（非标准）：是一个只读属性，返回所有的子元素节点
parentNode.firstChild：返回第一个子节点，找不到则返回null，包含所有的节点
parentNode.firstElementChild：返回第一个子节点，IE9以上才支持
parentNode.lastChild：返回最后一个子节点，找不到则返回null，包含所有的节点
parentNode.firstElementChild：返回最后一个子节点，IE9以上才支持

<body>
    <ul>
        <li></li>
        <li></li>
        <li></li>
    </ul>


    <script>
        var ul = document.querySelector('ul');
        var lis = ul.querySelector('li');
        //1.parentNode.childNodes（标准）：得到的节点包括元素节点、文本节点等
        console.log(ul.childNodes);
        console.log(ul.childNodes[0].nodeType);  //3,表示为文本节点
        console.log(ul.childNodes[1].nodeType);  //1,表示为元素节点
        //2.parentNode.children（非标准）：是一个只读属性，返回所有的子元素节点
        console.log(ul.children);
        //3.parentNode.firstChild：返回第一个子节点，找不到则返回null，包含所有的节点
        console.log(ul.firstChild);
        //4.parentNode.firstElementChild：返回第一个子节点，IE9以上才支持
        console.log(ul.firstElementChild);
        //5.parentNode.lastChild：返回最后一个子节点，找不到则返回null，包含所有的节点
        console.log(ul.lastChild);
        //6.parentNode.firstElementChild：返回最后一个子节点，IE9以上才支持
        console.log(ul.lastElementChild);
    </script>
</body>

结果为：

下拉显示菜单案例

    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        li {
            list-style-type: none;
        }
        
        a {
            text-decoration: none;
            font-size: 14px;
        }
        
        .nav {
            margin: 100px;
        }
        
        .nav>li {
            position: relative;
            float: left;
            width: 80px;
            height: 41px;
            text-align: center;
        }
        
        .nav li a {
            display: block;
            width: 100%;
            height: 100%;
            line-height: 41px;
            color: #333;
        }
        
        .nav>li>a:hover {
            background-color: #eee;
        }
        
        .nav ul {
            display: none;
            position: absolute;
            top: 41px;
            left: 0;
            width: 100%;
            border-left: 1px solid #FECC5B;
            border-right: 1px solid #FECC5B;
        }
        
        .nav ul li {
            border-bottom: 1px solid #FECC5B;
        }
        
        .nav ul li a:hover {
            background-color: #FFF5DA;
        }
    </style>
</head>
<body>
    <ul class="nav">
        <li>
            <a href="#">微博</a>
            <ul>
                <li>
                    <a href="#">私信</a>
                </li>
                <li>
                    <a href="#">评论</a>
                </li>
                <li>
                    <a href="#">@我</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#">微博</a>
            <ul>
                <li>
                    <a href="#">私信</a>
                </li>
                <li>
                    <a href="#">评论</a>
                </li>
                <li>
                    <a href="#">@我</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#">微博</a>
            <ul>
                <li>
                    <a href="#">私信</a>
                </li>
                <li>
                    <a href="#">评论</a>
                </li>
                <li>
                    <a href="#">@我</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#">微博</a>
            <ul>
                <li>
                    <a href="#">私信</a>
                </li>
                <li>
                    <a href="#">评论</a>
                </li>
                <li>
                    <a href="#">@我</a>
                </li>
            </ul>
        </li>
    </ul>

    <script>
        //1.获取元素
        var nav = document.querySelector('.nav');
        //返回所有的子节点，只包括元素节点
        var lis = nav.children;
        //2.注册事件 处理程序
        for(var i = 0; i < lis.length; i++) {
            lis[i].onmouseover = function() {
                //ul有两个子孩子->a和ul，要使得鼠标经过时ul显示出来，所以应该设置第二个子孩子display
                this.children[1].style.display = 'block';
            }
            lis[i].onmouseout = function() {
                this.children[1].style.display = 'none';
            }
        }
    </script>
</body>

结果为：当鼠标经过时，下拉的菜单就会显示；反之则隐藏起来

3）兄弟节点

node.nextSibling：返回当前元素的下一个兄弟节点，找不到则返回null，包含所有的节点
node.previousSibling：返回当前元素的上一个兄弟节点，找不到则返回null，也是包含所有的节点
node.nextElementSibling：返回当前元素下一个兄弟元素节点，找不到则返回null，IE9以上才支持
node.previousElementSibling：返回当前元素上一个兄弟节点，找不到则返回null，IE9以上才支持

<body>
    <div>1</div>
    <span>2</span>
    <script>
        var div = document.querySelector('div');
        //1.nextSibling:返回当前元素的下一个兄弟节点，包含所有节点
        console.log(div.nextSibling);
        //2.previousSibling:返回当前元素的上一个兄弟节点，包含所有节点
        console.log(div.previousSibling);
        //3.nextElementSibling:返回当前元素的下一个兄弟节点，兼容性问题（IE9以上才支持）
        console.log(div.nextElementSibling);
        //4.previousElementSibling:返回当前元素的上一个兄弟节点，兼容性问题（IE9以上才支持）
        console.log(div.previousElementSibling);
    </script>
</body>

结果为：

4）创建节点

document.createElement('tagName')：创建由tagName指定的HTML元素。因为这些元素原先不存在，是根据需求动态生成的，所谓也称为动态创建元素节点
node.appendChild()：将一个节点添加到指定父节点的子节点列表末尾，类似于CSS的after元素父节点.appendChild(子节点);->在后面追加元素
node.insertBefore(child, 指定元素)：将一个节点添加到父节点的指定子节点前面，类似于CSS里面的子元素。

<body>
    <ul>
        <li>1</li>
    </ul>
    <script>
        var ul = document.querySelector('ul');
        //1.创建节点元素
        var li = document.createElement('li');
        //2.添加节点：parent.appendChild(child) 在末尾追加元素
        ul.appendChild(li);
        //3.添加节点：node.insertBefore(child, 指定元素)  在指定父节点的子节点前面追加元素
        var li1 = document.createElement('li');
        ul.insertBefore(li1, ul.children[0]);
    </script>
</body>

结果为：

简单版发布留言案例

    <style>
        textarea {
            border: 1px solid #000;
        }
        li {
            background-color: pink;
        }
    </style>
</head>
<body>
    <textarea cols="30" rows="10"></textarea>
    <button>发布</button>
    <ul>

    </ul>
    <script>
        //1.获取元素
        var text = document.querySelector('textarea');
        var btn = document.querySelector('button');
        var ul = document.querySelector('ul');
        //2.注册事件 处理程序
        btn.onclick = function() {
            if (text.value == '') {
                alert('您没有输入留言');
                return false;
            }
            else {
                //创建元素
                var li = document.createElement('li');
                //添加元素
                //将输入的内容赋值给li
                li.innerHTML = text.value;
                // ul.appendChild(li);
                ul.insertBefore(li, ul.children[0]);
            }
        }
    </script>
</body>

结果为：

5）删除节点

node.removeChild(child)：从DOM中删除一个子节点，返回删除的节点

<body>
    <button>删除</button>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    <script>
        //1.获取对象
        var btn = document.querySelector('button');
        var ul = document.querySelector('ul');
        //2.注册事件 处理程序
        btn.onclick = function() {
            if (ul.children.length == 0) {
                this.disabled = true;
            }
            else {
                ul.removeChild(ul.children[0]);
            }
        }
    </script>
</body>

结果为：

6）复制节点（克隆节点）

node.cloneNode()：返回调用该方法的节点的一个副本，也称为克隆节点/拷贝节点

如果括号参数为空或者false，则是浅拷贝，即只克隆复制节点本身，不克隆里面的子节点内容
如果括号参数true，则是深拷贝，即既克隆复制节点本身，又克隆里面的子节点内容

<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    <script>
        //获取对象
        var ul = document.querySelector('ul');
        //1.cloneNode()：参数为空或者是false，浅拷贝，只复制节点不复制文本内容
        var li = ul.children[0].cloneNode();
        //2.cloneNode(true)：参数为true，深拷贝，只复制节点同时复制文本内容
        var li1 = ul.children[1].cloneNode(true);
        ul.appendChild(li);
        ul.appendChild(li1);
    </script>
</body>

结果为：

8）三种动态创建元素区别

document.write()：直接将内容写入页面的内容流，但是文档流执行完毕，它会导致页面全部重绘
element.innerHTML：将内容写入某个DOM节点，不会导致页面全部重绘，创建多个元素效率更高（不要拼接字符串，采取数组形式拼接），结构稍微复杂
document.createElement()：创建多个元素效率稍低一点，但是结构更清晰

<body>
    <button>btn</button>
    <span>1</span>
    
    <script>
        var btn = document.querySelector('button');
        btn.onclick = function() {
            //直接将内容写入页面的内容流，但是文档流执行完毕，它会导致页面全部重绘->button和span不在页面上
            document.write('<div>123</div>');
        }
    </script>
</body>

结果为：

qq_52822043

关注

0
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
JavaScript-节点操作

目录1. 节点概述2. 节点层次1）父级节点2）子节点下拉显示菜单案例3）兄弟节点4）创建节点简单版发布留言案例5）删除节点6）复制节点（克隆节点）8）三种动态创建元素区别1. 节点概述网页中的所有内容都是节点（标签、属性、文本、注释等），在DOM中，节点用node来表示。HTML DOM树中的所有节点均可通过JavaScript进行访问，所有HTML元素（节点）均可被修改，也可以创建或删除。一般的，节点至少拥有n...
复制链接

扫一扫