• 节点操作--JavaScript


    1 - 概念

    网页中的所有内容都是节点(标签、属性、文本、注释),在DOM中,节点使用node来表示。

    HTML DOM树中的所有节点均可通过JS进行访问,所有HTML元素(节点)均可被修改,也可以创建或者删除。

    一般地,节点至少拥有nodeType(节点类型)、nodeName(节点名称)和nodeValue(节点值)这三个基本属性。

    • 元素节点 nodeType 为 1

      属性节点 nodeType 为 2

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

      我们在实际开发中,节点操作主要的操作对象是元素节点

    2 - 节点层级

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

    3 - 父级节点

    node.parentNode
    
    parentNode属性可以返回某节点的父节点,注意是最近的一个父节点
    
    如果指定的节点没有父节点则返回null
    
     <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>
    

    4 - 子节点

    (1)所有子节点

    parentNode.childNodes (标准)

    • patrentNode.childNodes 返回指定节点的子节点的集合,该集合为即时更新的集合。

    • 注意: 返回值里面包含了所有的子节点,包括元素节点,文本节点等。
      如果只想要获得里面的元素节点,则需要专门处理。所以我们一般不提倡使用childNodes。

    (2)子元素节点

    parentNode.children (非标准)

    • parentNode.children 是一个只读属性,返回所有的子元素节点。它只返回子元素节点,其余节点不返回(重点)
    • 虽然children是一个非标准,但是得到了各个浏览器的支持,因此可以放心使用。
        <ul>
            <li>我是li</li>
            <li>我是li</li>
            <li>我是li</li>
            <li>我是li</li>
        </ul>
        <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>
    

    (3)第一个子节点

    parentNode.firstChild

    • firstChild 返回的第一个子节点,找不到则返回null。同样,也是包含所有的节点。

    (4)最后一个子节点

    parentNode.lastChild

    • lastChild 返回最后一个子节点,找不到则返回null。同样也是包含所有的节点。

    (5)第一个元素节点(兼容性问题)

    parentNode.firstElementChild

    • firstElementChild 返回第一个子元素节点,找不到则返回null

    (6)最后一个子元素节点 (兼容性问题)

    parentNode.lastElementChild

    • lastElementChild 返回最后一个子元素节点,找不到则返回null。

    《!!!!!!!!!! 注意兼容性问题 5、6 IE9以上才支持 !!!!!!!!!》

    ​ 实际开发中,firstChild 和 lastChild 包含其他节点,操作不方便,而 firstElementChild 和 lastElementChild 又有兼容性问题,那么我们如何获取第一个子元素节点或最后一个子元素节点呢?

    解决方案:

    ​ 1、如果想要第一个子元素节点,可以使用parentNode.children[0]

    ​ 2、如果想要最后一个子元素节点,可以使用parentNode.children[parentNode.children.length - 1]

        <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>
    

    5 - 兄弟节点

    (1)下一个兄弟节点

    node.nextSibling

    nextSilling 返回当前元素的下一个兄弟节点,找不到则返回null。

    (2)上一个兄弟节点

    node.previousSibling

    previousSibling 返回当前元素上一个兄弟节点,占不到则返回null

     <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>
    

    (3)下一个兄弟元素节点(有兼容性问题)IE9

    node.nextElementSibling

    nextElementSibling 返回当前元素下一个兄弟元素节点,找不到则返回null

    (4)上一个兄弟元素节点(有兼容性问题)IE9

    node.previousElementSibling

    previousElementSibling 返回当前元素上一兄弟节点,找不到则 返回null。

    怎么解决兼容性问题呢??

    ​ -- 自己封装一个兼容性函数(方法)

    function getNextElementSibling(element){
        var el = element;	//定义一个变量el接收传进来的element元素
        while(el = el.nextSibling){	//存在下一个兄弟节点则继续
            if(el.nodeType === 1)	//前文说到 如果是element则返回 1 所以判断nodeType返回值是否 === 1
            	return el;
        }
        return null;
    }
    

    6 - 创建节点

    document.creatElement('tagName/elementName');

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

    7 - 添加节点

    (1)node.appendChild(child)

    node.appendChild() 方法将一个节点添加到指定父节点的字节点列表末尾。类似于CSS里面的after伪元素。

    (2)node.insertBefore(child, 指定元素)

    node.insertBefore() 方法将一个节点添加到父节点的指定子节点前面。类似于CSS里面的before伪元素

        <ul>
            <li>123</li>
        </ul>
        <script>
            // 1. 创建节点元素节点
            var li = document.createElement('li');
            // 2. 添加节点 node.appendChild(child)  node 父级  child 是子级 后面追加元素
            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>
    

    8 - 留言板

    1、创建一个textarea button ul

    2、在textarea里面输入内容,点击按钮,实现将内容添加到 ul 里面(需要创建并添加一个li)

    3、新的留言在前面显示用insertBefore,在后面显示就用appendChild

    <body>
        <textarea name="" id=""></textarea>
        <button>发布</button>
        <ul>
    
        </ul>
        <script>
            // 1. 获取元素
            var btn = document.querySelector('button');
            var text = document.querySelector('textarea');
            var ul = document.querySelector('ul');
            // 2. 注册事件
            btn.onclick = function() {
                if (text.value == '') {
                    alert('您没有输入内容');
                    return false;
                } else {
                    // console.log(text.value);
                    // (1) 创建元素
                    var li = document.createElement('li');
                    // 先有li 才能赋值
                    li.innerHTML = text.value;
                    // (2) 添加元素
                    // ul.appendChild(li);
                    ul.insertBefore(li, ul.children[0]);
                }
            }
        </script>
    </body>
    
  • 相关阅读:
    Python小工具:统计代码行数
    计算机图形学复习(一)
    牛客多校训练第一场 J.Different Integers
    数据校验码概述
    数据库复习第二章
    数据库复习第一章
    自动化AC器(带界面版)
    ZOJ 3747 Attack on Titans
    Codeforces Round #245 (Div. 1) B. Working out
    HDU 6266 Hakase and Nano 【博弈论】
  • 原文地址:https://www.cnblogs.com/YangxCNWeb/p/11423758.html
Copyright © 2020-2023  润新知