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] | 复合属性选择器，需要同时满足多个条件时使用 |
未完，待更…