当元素关联较密切的时候，搜素DOM元素可以用DOM导航属性。如果我们想获取页面上的任意一个元素。则可以使用以下搜索方法：
document.getElementById 或者只使用id
如果元素有id属性，那么该
id也会有一个同名全部变量。
示例：
<div id="elem">
<div id="elem-content">Element</div>
</div>
<script>
alert(elem);
alert(window.elem);
//对于 elem-content 会稍微有些复杂
//因为里面有破折号，所以不是一个变量名
alert(window['elem-content']); //但可以使用方括号 [...]
</script>
但当我们自己声明了同名变量，则新的变量会覆盖之前的元素，示例：
<div id="elem"></div>
<script>
let elem = 5;
alert(elem); // 变量 elem 覆盖了 elem 元素
</script>
所以实际开发中，使用 document.getElementById 才是最佳选择。请注意 id 必须在文档中唯一。
<div id="elem">
<div id="elem-content">Element</div>
</div>
<script>
let elem = document.getElementById('elem');
elem.style.background = 'red';
</script>
getElementsBy*
也有其它的方法来搜索节点：
-
elem.getElementsByTagName(tag)用给定的标签来查找元素，并返回它们的集合。tag 参数也可以是表示任何标签的*。
示例：
//获取所有在文档中的 div。此处document可以是任意 DOM 元素。可以找出相应元素中的所有标签。
let divs = document.getElementsByTagName('div');
//找出表格中的所有 input 标签
<table id="table">
<tr>
<td>Your age:</td>
<td>
<label>
<input type="radio" name="age" value="yound" checked> less than 18
</label>
<label>
<input type="radio" name="age" value="mature"> from 18 to 50
</label>
<label>
<input type="radio" name="age" value="senior"> more than 60
</label>
</td>
</tr>
</table>
<script>
let inputs = table.getElementsByTagName('input');
for(let input of inputs) {
alert( input.value + ': ' + input.checked );
}
</script>
-
elem.getElementsByClassName(className)返回具有给定 CSS 类的元素。元素也可能含有其它的类。 -
document.getElementsByName(name)返回在文档范围中具有给定 name 属性的元素。因为历史原因而很少使用。这里提出，只是考虑到完整性。
示例：
<form name="my-form">
<div class="article">Article</div>
<div class="long article">Long article</div>
</form>
<script>
let from = document.getElementsByName('my-form')[0];
let articles = form.getElementsByClassName('article');
alert(articles.length); // 2， 包含类名 "article" 的元素有两个
</script>
querySelectorAll 与 querySelector
querySelectorAll、querySelector 与 getElementById 和 getElementsBy* 的不同之处是前者是使用css选择器来搜索元素。
-
elem.querySelectorAll(css)的调用将返回与给定 CSS 选择器匹配 elem 中的所有元素。
示例：
<ul>
<li>The</li>
<li>test</li>
</ul>
<ul>
<li>has</li>
<li>passed</li>
</ul>
<script>
let elements = document.querySelectorAll('ul > li:last-child');
for (let elem of elements) {
alert(elem.innerHTML); // "test", "passed"
}
</script>
注意：CSS 选择器的伪类，如 :hover 和 :active都是被支持的。例如，document.querySelectorAll(':hover') 将会返回指针现在已经结束的集合（按嵌套顺序：从最外层 <html> 到嵌套最多的元素）。
-
elem.querySelector(css)返回给定 CSS 选择器的第一个元素。结果与 elem.querySelectorAll(css)[0] 相同，但是后者会从所有找到的元素中选取第一个，而 elem.querySelector 只会查找一个。
closest
elem-closest(css) 方法会查找与 CSS 选择器匹配的最接近的祖先。elem 自己也会被搜索。
示例：
<h1>Contents</h1>
<div class="contents">
<ul class="book">
<li class="chapter">Chapter 1</li>
<li class="chapter">Chapter 2</li>
</ul>
</div>
<script>
let chapter =document.querySelector('.chapter'); // LI
alert(chapter.closest('.book')); // UL
alert(chapter.closest('.contents')); // DIV
alert(chapter.closest('h1')); // null (因为 h1 不是祖先)
</script>
querySelectorAll 与 getElementsBy* 的动态性区别
- 所有的
getElementsBy*方法都会返回 live 集合。这类集合总是可以反映出文档的当前状态而且在文档变化时，可以自动更新。 - 相反，
querySelectorAll会返回一个 static 集合。就像一个固定的元素数字。
示例：
<div>First div</div>
<script>
let divs = document.getElementsByTagName('div');
alert(divs.length); // 1
</script>
<div>Second div</div>
<script>
alert(divs.length); // 2
</script>
对比：
<div>First div</div>
<script>
let divs = document.querySelectorAll('div');
alert(divs.length); // 1
</script>
<div>Second div</div>
<script>
alert(divs.length); // 1
</script>
我们可以看到不同之处，在文档中出现一个新的 div 后，static 集合并没有增加。
总结：
| Method | Searches by... | Can call on an element? | Live? |
|---|---|---|---|
| getElementById | id | no | no |
| getElementsByName | name | no | yes |
| getElementsByTagName | tag or '*' | yes | yes |
| getElementsByClassName | class | yes | yes |
| querySelector | CSS-selector | yes | no |
| querySelectorAll | CSS-selector | yes | no |
请注意，只有在文档 document 的上下文中才能调用 getElementById 和 getElementsByName。而且元素中没有 elem.getElementById(...) 会报错。
也可以在元素上调用其他方法，例如 elem.querySelectorAll(...) 将会在 elem（在 DOM 子树中）内部进行搜素。
除此以外：
matches
之前的方法都是搜索 DOM 的。
elem.matches(css) 不会查找任何内容，只会检查 elem 是否匹配给定的 CSS 选择器。返回 true 或 false。
当我们迭代元素（例如数组或者一些其它内容）并视图过滤那些我们感兴趣的元素时，这个方法会很方便。
示例：
<a href="http://example.com/file.zip">...</a>
<a href="http://ya.ru">...</a>
<script>
// 不一定是 document.body.children，也可以是任何集合
for (let elem of document.body.children) {
if (elem.matches('a[href$="zip"]')) {
alert("The archive reference: " + elem.href );
}
}
</script>
-
elem.matches(css)用于检查 elem 与给定的 CSS 选择器是否匹配。它返回 true 或者 false。 -
elem.closest(css)用于查找与给定 CSS 选择器相匹配的最近的祖先。elem 本身也会被检查。 -
elemA.contains(elemB)检查父子关系，如果 elemB 在 elemA（elemA 的后代）中或者当 elemA==elemB 时将返回 true。
网友评论