【JavaScript】DOM选择大全

1. getElementsByClassName

通过class类名获取元素。

示例：

<div class="logom fl"></div>

let logoAds = document.getElementsByClassName('logom');
console.log(logoAds[0].outerHtml);

返回HTMLCollection集合对象。

2. querySelectorAll

通过css选择器来获取元素。

可以根据自定义的属性来获取元素。

示例：

<section aria-label="youdao-ad"></section>

document.querySelectorAll('[aria-label="youdao-ad"]')

返回NodeList集合对象。

可以使用通配符匹配。

let ads = document.querySelectorAll('[class*=ads]');

[class*=ads] 只要class中包含ads就会被匹配  
[class^=ads] 只要class中以ads开头就会被匹配
[class$=ads] 只要class中以ads结尾就会被匹配

选择器格式	功能描述
*	匹配所有元素
element	根据给定的元素名匹配所有元素
#id	根据给定的ID匹配一个元素
.class	根据给定的类匹配元素
selector, selector	将每一个选择器匹配到的元素合并后一起返回
ancestor descendant	在给定的祖先元素下匹配所有的后代元素
parent>child	在给定的父元素下匹配所有的子元素
prev+next	匹配所有在 prev 元素后的相邻next 元素
prev~siblings	匹配 prev 元素之后的所有 siblings 元素
[attribute]	匹配包含给定属性的元素
[attribute=value]	匹配给定的属性是某个特定值的元素
[attribute^=value]	匹配给定的属性是以某些值开始的元素
[attribute$=value]	匹配给定的属性是以某些值结尾的元素
[attribute*=value]	匹配给定的属性是以包含某些值的元素
[attribute][attribute]	复合属性选择器，需要同时满足多个条件时使用

未完，待更…