今天总结一下通过DOM API获取一个元素的一些办法。
1、通过 document.getElementById('id_string') 方法
HTML代码如下：
<div id=xxx>这是第一个div</div>
JavaScript代码如下：
var a = document.getElementById('xxx')
a.style.color="red";
a.style.backgroundColor="blue";
效果如图：
document.getElementById('xxx')
需要注意的点：一个是区分大小写，另一个是JS代码中关于操作CSS中拼写和style中的不同，具体可以参照阮一峰的教程。
2、通过 document.getElementByTagName(tag_name) 方法
HTML代码如下：
<p>这是第一个p</p>
<p>这是第二个p</p>
JavaScript代码如下：
var a = document.getElementsByTagName('p')
a[1].style.color="red";
效果如下：
document.getElementsByTagName('tag_name')
需要注意的点：除了大小写拼写以外，语法中的elements是要用复数的，因为通过这个办法获得的是一个相同标签组成的数组，如果用console.log(a)打出来就是[p,p]。
3、通过 document.getElementsByName('name') 方法
HTML代码如下：
<p name=xxx>我是一个p</p>
<div name=xxx>我是一个div</div>
JavaScript代码如下：
var a = document.getElementsByName('xxx')
a[1].style.color="red";
console.log(a[0].tagName)
效果如下：
document.getElementsByName()
需要注意的点：这个方法得到的是相同name组成的一个数组；在示例的JS代码中tagName返回的值是大写的，方方在讲二十一课的时候被这个大写坑了好几遍。JS最后一行代码返回的是'P'。
4、通过 document.querySelector('selectors') 方法
HTML代码如下：
<div class="xxx yyy">
<p class="zzz">
<span class=aaa>我是一个span</span>
</p>
</div>
JavaScript代码如下：
var b = document.querySelector('div.xxx.yyy p span')
b.style.color="blue";
效果如下：
document.querySelector('selectors')
需要注意的地方：
selectors是一个字符串，包含一个或是多个 CSS 选择器，多个则以逗号分隔。
如果没有找到匹配元素，则返回 null，如果找到多个匹配元素，则返回第一个匹配到的元素。
如果选择器是一个 ID，并且这个 ID 在文档中错误地使用了多次，那么返回第一个匹配该 ID 的元素。
如果指定的选择器不合法，则抛出 SYNTAX_ERR 异常。
网友评论