点击切换帐号登陆
帐号密码登陆

通过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>
```


任务

?不会了怎么办
无数据提示暂无评论哟...我要评论
网站导航
标签地图
学习路径
视频教程
开发软件
旗下子站
php中文网
phpstudy
技术文章
文档工具
关于我们
企业合作
人才招聘
联系我们
讲师招募
QQ交流群
QQ官方交流群
微信公众号
微信公众号