DOM扩展Selectors API

大熊G
638 阅读2分钟

这是我参与8月更文挑战的第21天，活动详情查看：8月更文挑战

理解Selectors API

Selectors API是基于css选择器获取DOM的匹配模式，我们很早之前用的jQuery就有按照css选择器查询DOM元素获取引用。Selectors API有三种常用的方法就是querySelector(),querySelectorAll(),matches()。

querySelector()

querySelector()它接受一个参数，它返回文档中匹配指定 CSS 选择器的一个元素。如有没有匹配到的话就返回null。

<body>
    <p class="username">我是jackson</p>
</body>
<script>
    let body = document.querySelector('body');
    console.log(body);
    let username = document.querySelector('.username');
    console.log(username);
</script>

image.png 我们在document上使用该方法时，会从文档元素开始进行搜索。用这种方式不能在里面添加一些特殊的选择符，否则它会出错。

image.png

querySelectorAll()

这个方法和querySelector方法一样，只不过它是查询匹配所有的节点，不是一个，这个方法返回的是NodeList的实例。它相当于是一个静态的快照形式，并不会真正的inrush底层进行查询。

    let spans = document.querySelectorAll('span');
    console.log(spans);

image.png 我这里没有写span标签，但是它返回的确实是一个NodeList实例。

matches()

matches()方法接受一个css选择符参数，他是判断有没有这个匹配结果，如果有的话返回true，如果没有的话返回false。

    let body = document.body.matches('body');
    console.log(body);//true

这里我们写了一个查询body元素的方法，返回结果肯定是true，我们可以通过这个方法来判断有没有这个元素，从而进行一些其他操作。它经常和if出现在一起。

元素遍历小知识

ie9之前的版本不会把元素间的空格当成空白节点，而其他浏览器会，这样导致了childNodes和firstChild等属性上的差异。因此W3c定义了一组新属性。

Element Traversal API 为 DOM 元素添加了 5 个属性：

childElementCount，返回子元素数量（不包含文本节点和注释）；

firstElementChild，指向第一个 Element 类型的子元素（Element 版 firstChild）；

lastElementChild，指向最后一个 Element 类型的子元素（Element 版 lastChild）；

previousElementSibling ，指向前一个 Element 类型的同胞元素（ Element 版 previousSibling）；

nextElementSibling，指向后一个 Element 类型的同胞元素（Element 版 nextSibling）。

在支持的浏览器中，所有 DOM 元素都会有这些属性，为遍历 DOM 元素提供便利。这样开发者就不用担心空白文本节点的问题了。

avatar
文章
阅读
粉丝