[JS DOM&BOM]节点操作

Posted 2021-09-20 鱼竿钓鱼干

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了[JS DOM&BOM]节点操作相关的知识，希望对你有一定的参考价值。

[JS DOM&BOM]节点操作

节点操作概念

获取元素通常有两种方式
（1）利用DOM提供的方法来获取元素，逻辑性不强繁琐
（2）利用节点层级关系获取元素，利用父子兄结点关系获取元素，逻辑性强但兼容性稍差

节点的概念：网页中所有内容都是节点（元素节点，文本节点，文字节点等等）
一般情况下，节点至少有nodeType（节点类型）、nodeName（节点名称）、nodeValue（节点值）这三个基本属性

节点类型	nodeType
元素节点（主要用的）	1
属性节点	2
文本节点（文字空格换行）	3

节点操作

节点的层级

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

节点操作父节点

利用node.parentNode得到离他最近的父节点,如果找不到返回null

<body>
    <!-- 节点的优点 -->
    <div>我是div</div>
    <span>我是span</span>
    <ul>
        <li>我是li</li>
        <li>我是li</li>
        <li>我是li</li>
        <li>我是li</li>
    </ul>
    <div class="demo">
        <div class="box">
            <span class="erweima">×</span>
        </div>
    </div>

    <script>
        // 1. 父节点 parentNode
        var erweima = document.querySelector('.erweima');
        // var box = document.querySelector('.box');
        // 得到的是离元素最近的父级节点(亲爸爸) 如果找不到父节点就返回为 null
        console.log(erweima.parentNode);
    </script>
</body>

节点操作子节点

利用node.childNodes得到node节点的所有孩子，会把所有节点弄进来（文本节点，元素节点，文字节点），不推荐
实际开发使用node.children,获取所有的子元素节点

<body>
    <!-- 节点的优点 -->
    <div>我是div</div>
    <span>我是span</span>
    <ul>
        <li>我是li</li>
        <li>我是li</li>
        <li>我是li</li>
        <li>我是li</li>

    </ul>
    <ol>
        <li>我是li</li>
        <li>我是li</li>
        <li>我是li</li>
        <li>我是li</li>
    </ol>

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

    <script>
        // DOM 提供的方法（API）获取
        var ul = document.querySelector('ul');
        var lis = ul.querySelectorAll('li');
        // 1. 子节点  childNodes 所有的子节点 包含 元素节点 文本节点等等
        console.log(ul.childNodes);
        console.log(ul.childNodes[0].nodeType);
        console.log(ul.childNodes[1].nodeType);
        // 2. children 获取所有的子元素节点 也是我们实际开发常用的
        console.log(ul.children);
    </script>
</body>

节点操作第一个子元素和最后一个子元素

node.firstChild和node.lastChild，返回第一个和最后一个子节点但不常用
node.firstElementChild和node.lastElementChild，i9才能用（麻了，不过问题不大，大多时候ok）
另外一种思路是直接用children拿到所有的子元素然后用索引号找

<body>
    <ol>
        <li>我是li1</li>
        <li>我是li2</li>
        <li>我是li3</li>
        <li>我是li4</li>
        <li>我是li5</li>
    </ol>
    <script>
        var ol = document.querySelector('ol');
        // 1. firstChild 第一个子节点 不管是文本节点还是元素节点
        console.log(ol.firstChild);
        console.log(ol.lastChild);
        // 2. firstElementChild 返回第一个子元素节点 ie9才支持
        console.log(ol.firstElementChild);
        console.log(ol.lastElementChild);
        // 3. 实际开发的写法  既没有兼容性问题又返回第一个子元素
        console.log(ol.children[0]);
        console.log(ol.children[ol.children.length - 1]);
    </script>
</body>

节点操作兄弟节点

nextSibling 下一个兄弟节点包含元素节点或者文本节点等等
previousSibling 得到上一个兄弟节点包含元素节点或者文本节点等等

nextElementSibling 得到下一个兄弟元素节点
previousElementSibling 得到上一个兄弟元素节点
ie9以上才支持

<body>
    <div>我是div</div>
    <span>我是span</span>
    <script>
        var div = document.querySelector('div');
        // 1.nextSibling 下一个兄弟节点 包含元素节点或者 文本节点等等
        console.log(div.nextSibling);
        console.log(div.previousSibling);
        // 2. nextElementSibling 得到下一个兄弟元素节点
        console.log(div.nextElementSibling);
        console.log(div.previousElementSibling);
    </script>
</body>

节点操作创建节点与添加节点

利用createElement()可以创建节点，但是创建完节点不知道在哪里，还需要使用appendChild()添加到指定父节点，如果原本有节点，那就追加到后面。
也可以使用insertBefore()实现在某个元素（父节点的指定子元素）的前面插入

<body>
    <ul>
        <li>123</li>
    </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(lili, ul.children[0]);
        // 4. 我们想要页面添加一个新的元素 ： 1. 创建元素 2. 添加元素
    </script>
</body>

节点操作删除节点

使用removeChild删除父元素当中的子节点

<body>
    <button>删除</button>
    <ul>
        <li>熊大</li>
        <li>熊二</li>
        <li>光头强</li>
    </ul>
    <script>
        // 1.获取元素
        var ul = document.querySelector('ul');
        var btn = document.querySelector('button');
        // 2. 删除元素  node.removeChild(child)
        // ul.removeChild(ul.children[0]);
        // 3. 点击按钮依次删除里面的孩子
        btn.onclick = function() {
            if (ul.children.length == 0) {
                this.disabled = true;
            } else {
                ul.removeChild(ul.children[0]);
            }
        }
    </script>
</body>

节点操作复制节点

使用cloneNode实现复制节点
分为浅拷贝和深拷贝
括号为空或者里面是false 浅拷贝只复制标签不复制里面的内容
括号为true 深拷贝复制标签复制里面的内容

复制完节点后还有知道把节点添加到哪里（相当于还要有个粘贴操作）

<body>
    <ul>
        <li>1111</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>

案例

新浪下拉菜单

导航栏里面的li都要有鼠标经过的效果，所以需要循环注册鼠标事件
当鼠标经过li里面的第二个孩子ul显示，当鼠标离开，则ul隐藏

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <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; // 得到4个小li
        // 2.循环注册事件
        for (var i = 0; i < lis.length; i++) {
            lis[i].onmouseover = function() {
        以上是关于[JS DOM&BOM]节点操作的主要内容，如果未能解决你的问题，请参考以下文章 
 js面试题-----DOM操作和BOM操作
 JavaScript基础及函数，BOM，DOM的节点及DOM节点操作
 [JS DOM&BOM]操作元素
 [JS DOM&BOM]自定义属性的操作
 [JS DOM&BOM]DOM获取元素
 [JS DOM&BOM]Web API

[JS DOM&BOM]节点操作

[JS DOM&BOM]节点操作

节点操作概念

节点操作

节点的层级

节点操作 父节点

节点操作 子节点

节点操作 第一个子元素和最后一个子元素

节点操作 兄弟节点

节点操作 创建节点与添加节点

节点操作 删除节点

节点操作 复制节点

案例

新浪下拉菜单

节点操作父节点

节点操作子节点

节点操作第一个子元素和最后一个子元素

节点操作兄弟节点

节点操作创建节点与添加节点

节点操作删除节点

节点操作复制节点