DOM API获取元素的常用方法

今天总结一下通过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 异常。