根据ID选择元素
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>根据id选择元素</title>
</head>
<body>
<ul>
<li id="item1">列表01</li>
<li id="item2">列表02</li>
<li id="item3">列表03</li>
<li id="item4">列表04</li>
<li id="item5">列表05</li>
</ul>
</body>
</html>
<script>
//使用id属性获取元素
let item1=document.getElementById('item1');
let item2=document.getElementById('item2');
let item3=document.getElementById('item3');
//设置元素的样式
item1.style.color='red';
item2.style.backgroundColor='green';
item3.style.fontSize='1.5rem';
item3.style.color='yellow';
//如果需要使用多个id来获取元素,可以通过函数来简化操作
function getElements(){//参数是多个id字符串
let elements={};//创建一个空的map映射对象来保存结果
for (let i=0; i<arguments.length;i++){
let id =arguments[i];//获取到要查询的每个id
let elt=document.getElementById(id);//根据id查找元素
if(elt===null){
throw new Error('NO element with id:' + id)//跑出异常
}
elements[id]=elt;//将获取到的元素存入到映射数据中
}
return elements;
}
//获取页面上指定的id属性的元素,返回一个关联数组类型的对象,键名就是id的值
let elements = getElements('item4','item5');
for (let key in elements){
elements[key].style.backgroundColor='blue';
}
</script>
