DOM扩展（详解）

最新推荐文章于 2022-03-24 17:51:24 发布

搞前端的小菜

最新推荐文章于 2022-03-24 17:51:24 发布

阅读量571

点赞数

分类专栏： JS基础文章标签： javascript DOM dom操作

本文链接：https://blog.csdn.net/weixin_46726346/article/details/116606899

版权

JS基础专栏收录该内容

26 篇文章 12 订阅

订阅专栏

摘要

尽管DOM作为API已经非常完善了，但为了实现更多的功能，仍然会有一些标准或专有的扩展。

这一篇主要来说一下对于DOM1的不足之处的扩展。

1.选择符API

虽然DOM已经在docement类型下有了几个选择元素的方法，但似乎还是不能满足我们的需求，所以就延伸除了JavaScript库中最常用的一项功能，就是根据CSS选择符选择与某个模式匹配的DOM元素。

(1) querySelector()方法

该方法接收一个CSS选择符作为参数，返回与该模式匹配的第一个元素，如果没有找到匹配的元素，则返回null。

我们来看一下如何使用：

    <div id="parent">
        <div class="first"></div>
        <div id="second"></div>
    </div>
    <script>
        var parent = document.querySelector('#parent');
        var first = parent.querySelector('.first');
    </script>

这里面可以看到，新增的方法不止适用于document类型，同时也适用于Node类型的元素节点。

而这不是上一篇说的几个方法可以做到的。（可以参考上一篇文章）

DOM（文档对象模型详解）

(2) querySelectorAll()方法

该方法接收的参数也是一个CSS选择器，不过返回的是所有匹配的元素的集合，这个集合是一个NodeList实例。

即便没有匹配到相应的元素，也是返回一个NodeList实例，不过长度为0，并不是返回一个null。

对于NodeList的元素的获取和遍历这里就不说了，可以参考刚刚提到的上一篇文章。

2.元素遍历

上一篇中我们提到过一些方法，是针对NodeList中子元素的操作，我们说过，这些方法都不会忽略空格，就是说，所有的空格都会被当成文本节点。

这就导致了一个问题，其实我想操作的是元素节点，但是使用这些方法总是需要考虑一下空白所代表的文本节点。为了弥补这个差异，而同时又保持DOM规范不变，这里定义了一组新的属性。

属性	作用
childElementCount	返回子元素的个数（不包括文本节点）
firstElementChild	返回第一个子元素（元素节点）
lastElementChild	返回最后一个子元素（元素节点）
previousElementSibling	指向前一个同辈元素（元素节点）
nextElementSibling	指向后一个同辈元素（元素节点）

这些属性都可以看成上一篇讲的五个属性的element版。
有了这些属性，我们就不必担心空白文本节点，从而方便的查找DOM元素了。

3.HTML5

因为HTML5涉及的面非常广，所以这里我们只说和DOM有关的内容。

(1) 与类有关的扩充

随着class属性用的越来越多，似乎我们需要一个通过类来获取元素的方法，所以这里我们有了通过类名来获取DOM元素的方法：

getElementsByClassName() ：该方法接收一个包含一个或者多个类名的字符串作为参数，返回带有指定类的所有元素的NodeList集合。

这个方法同时适用于document类型和节点类型的实例。

(2) classList属性

如果我们想操作DOM节点的class属性，正常我们会使用className这个属性。这个属性是一个字符串（上一篇有说到过）。

如果我们想删除DOM元素中某个class属性，似乎我们只能这样做：

    <div class="ball yellow big" id="div1"></div>
    <script>
        var classNames = div1.className.split(/\s+/);

        function deleteClass(  data ){
            let newClass = [];
            classNames.forEach( value=>{
                if(value != data){
                    newClass.push(value)
                }
            } )
            div1.className = newClass.join(' ')
        }
        
        deleteClass('big');
        console.log(div1.className); //ball yellow

    </script>

但如果我们有了classList属性之后，似乎操作都变得简单了。
这个classList属性是一个新集合类型DOMTokenList的实例。这个属性定义了如下的方法：

方法	作用
add(value)	将指定的字符串添加到列表中
contains(value)	表示列表中是否存在给定的值，存在返回true，不存在返回fasle
remove(value)	从列表中删除指定字符串
toggle(value)	如果列表中有这个值，删除。如果没有，添加。

有了这些方法我们似乎一行代码就可以搞定刚才的问题。

            div1.classList.remove( 'big');

(3) 自定义数据属性

HTML5规定可以为元素添加非标准的属性，但要添加前缀data-，目的是为元素提供与渲染无关的信息，或者提供语义信息，这些属性可以任意添加，随便命名，只要以data-开头即可。

添加了自定义属性之后，我们可以通过dataset属性来访问自定义的属性值。dataset属性是一个DOMStringMap的实例，也是以键值对的形式存在的。

不过目前支持这个属性的浏览器还是比较少的。

(4) 插入属性

1.innerHTML

在读模式下，该属性返回调用元素的所有子节点（包括元素，注释和文本节点）对应的HTML标记。
在写模式下，innerHTML会根据指定的值创建新的DOM树，然后用这个DOM树完全替换嗲用元素原先的所有子节点。

    <div id="parent">123<div id="child1"></div></div>
    <script>
        var parent = document.getElementById('parent')
        console.log(parent.innerHTML); //123<div id="child1"></div>

        parent.innerHTML = '<p>123456</p>'
        console.log(parent.innerHTML); //<p>123456</p>
    </script>

2.outerHTML

在读模式下，该属性返回调用它的元素以及它的所有子节点的HTML标签。
在写模式下，会根据指定的HTML字符串创建DOM子树，然后用这个DOM子树完全替换调用的元素。

    <div id="parent">123<div id="child1"></div></div>
    <script>
        var parent = document.getElementById('parent')
        console.log(parent.outerHTML); //<div id="parent">123<div id="child1"></div></div>

        parent.outerHTML = '<p>123456</p>'
        console.log(parent); //<p>123456</p>
    </script>