获取并修改元素属性
<body>
<ul id="lists">
<li id="item1">列表01</li>
<li>列表02</li>
<li id="item2">列表03</li>
<li>列表04</li>
<li id="item3">列表05</li>
</ul>
<script>
// let item1=document.getElementById("item1");
// let item2=document.getElementById("item2");
// let item3=document.getElementById("item3");
//
// item1.style.backgroundColor='yellow';
// item2.style.backgroundColor='lightblue';
// item3.style.backgroundColor='pink';
function getElements() {
let elements={}; //保存获取到的dom对象元素
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("没有这个元素"+id); //抛出异常
}
elements[id]=elt; //将获取到的元素返回
}
return elements;
}
let elements = getElements('item1','item2','item3');
console.log(elements);
for(let key in elements){
elements[key].style.backgroundColor='coral';
}
</script>
<!--name属性并不是所有元素都有，只有一些特定的元素才会有，比如表单，表单内的元素，图像，iframe-->
<hr>
<form action="" name="login" >
<input type="text" name="username"><br>
<input type="password" name="password">
<button name="button">提交</button>
</form>
<form action="" name="login" >
<input type="text" name="username"><br>
<input type="password" name="password">
<button name="button">提交</button>
</form>
<script>
//getElementsByName()返回是一个节点列表数组，Nodelist
let login = document.getElementsByName('login')[0];
//console.log(login);
login.style.backgroundColor='red';
let login1 = document.getElementsByName('login')[1];
//console.log(login1);
login1.style.backgroundColor='pink';
//我们可以吧name属性当成document对象的属性来用
// let login1 = document.login;
// console.log(login1);
// login1.style.backgroundColor='green';
</script>
<hr>
<ul>
<li>列表项01</li>
<li>列表项02</li>
<li>列表项03</li>
<li>列表项04</li>
<li>列表项05</li>
</ul>
<script>
//返回的是一个元素的集合，就会有一个length
let ul = document.getElementsByTagName('ul')[1];
ul.style.backgroundColor='lightgreen';
//元素的集合其实是一个对象，他的上面有一个方法：item（）
let ul1= document.getElementsByTagName('ul').item(1);
ul1.style.backgroundColor='lightblue';
//获取到所有li元素
let lists = document.getElementsByTagName('li');
console.log(lists.length);
console.log(lists);
for(let i=5;i<lists.length;i++){
lists[i].style.backgroundColor='lightpink';
}
//该方法不仅定义在document对象上，还在元素对象上也有定义
let ul2=document.getElementsByTagName('ul').item(1);
let item2=ul2.getElementsByTagName('li').item(1);
item2.style.backgroundColor='green';
</script>
跟着敲一遍就会发现这几个小节其实不难，主要是document.getElementBy.... 的用法，怎么提取并修改元素属性标签的样式。
同样的使用方法，将获取到的对象保存到自己定义的一个对象变量中，然后使用对象变量进行样式修改。
善于console.log查看定义的变量，能够更加清楚元素的属性