通过id来选择元素
# 通过`id`选取元素
## 1. DOM方法
* 具有`id`属性的元素,应该在当前文档中唯一
* `document.getElementById('idName')`
----------------------------------------------------
## 2. 实例演示
如果想通过`id`获取多个元素, 可以封装一个函数:
```javascript
//参数为任何数量的id属性字符串
function getElements() {
//创建对象容器,存储返回的元素对象
var elements = {};
// 循环遍历参数中的id
for (var i = 0; i < arguments.length; i++) {
// 逐个获取传入的参数id值
var id = arguments[i];
// 根据id查询文档中满足条件的元素
var ele = document.getElementById(id);
// 如果没有找到, 则抛出错误
if (ele === null) {
throw new Error('No Element with id:' + id);
}
// 如果找到,则将该元素放到对象容器中
elements[id] = ele;
}
// 返回查询到的所有元素对象
return elements;
}
```
* 将该函数保存为独立的外部脚本: `getelements.js`
* 创建html文档: `demo01.html`
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>getElements()</title>
</head>
<body>
<ul>
<li id="red">html</li>
<li>css</li>
<li id="green">javascript</li>
<li id="blue">vue.js</li>
</ul>
<!-- 加载外部js脚本 -->
<script src="getelements.js"></script>
<script>
var eles = getElements('red', 'green', 'blue');
// 控制台查看获取到的元素
console.log(eles);
// 设置元素的文本前景色
eles.red.style.color = 'red';
eles.green.style.color = 'green';
eles.blue.style.color = 'blue';
</script>
</body>
</html>
```
