abstract：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>DOM操作</title></head><body><ul id=&q
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DOM操作</title>
</head>
<body>
<ul id="poetry" class="poetry">
<li id="display1">山有木兮木有枝，心悦君兮君不知。——佚名《越人歌》</li>
<li id="display2">人生若只如初见，何事秋风悲画扇。——纳兰性德《木兰词·拟古决绝词柬友》</li>
<li class="display1">曾经沧海难为水，除却巫山不是云。——元稹《离思五首·其四》</li>
<li class="display2">玲珑骰子安红豆，入骨相思知不知。——温庭筠《南歌子词二首 / 新添声杨柳枝词》</li>
<li class="display3">入我相思门，知我相思苦。——李白《三五七言 / 秋风词》</li>
<li>平生不会相思，才会相思，便害相思。——徐再思《折桂令·春情》</li>
</ul>
<form action="" name="login">
<label for="username">用户名:</label>
<input id="username" type="text" name="username" placeholder="用户名">
<label for="password">密码:</label>
<input id="password" type="password" name="password" placeholder="******">
<input type="button" value="登录">
</form>
<img src="img/1.jpg" alt="" name="pic">
<form action="" name="register">
<label for="username1">用户名:</label>
<input id="username1" type="text" name="username1" placeholder="用户名">
<label for="mobile">手机号:</label>
<input id="mobile" type="number" name="mobile" placeholder="手机号">
<label for="password1">密码:</label>
<input id="password1" type="password" name="password1" placeholder="******">
<input type="button" value="登录">
</form>
<a href="#" name="c">ccccccc</a>
<script>
//============================== 根据ID获取元素 =======================================
//获取id='poetry'的元素，修改它的样式
let poetry = document.getElementById('poetry');
poetry.style.margin = '100px auto';
//通过函数获取ID属性元素
function getId() {
//保存获取到的ID属性元素
let elements = {};
for (let i = 0; i < arguments.length; i++){
let id = arguments[i]; //获取参数
let elt = document.getElementById(id);//根据ID名称获取元素，赋值给给elt
if (elt === null){
//如果没有这个ID属性将抛出异常
throw new Error('没有这个元素'+id);
}
//将获取到的元素放入element集合里面
elements[id] = elt;
}
return elements;
}
let elements = getId('display1','display2');
for (let key in elements){
elements[key].style.backgroundColor = '#a7bcff'
}
//====================================根据name获取元素==================================
//getElementsByName() 返回的是一个节点列表数组
let login = document.getElementsByName('login')[0];
login.style.border = '2px solid #FF938D';
//可以把name属性当document对象属性使用
let login1 = document.login;
login1.style.padding = '20px 10px';
//====================================根据标签名称获取元素==================================
//getElementsByTagName() 返回的是一个节点列表数组
let ul = document.getElementsByTagName('ul')[0];
ul.style.border = '2px solid #479FFF';
//元素的集合是一个对象，有一个访问方法：item()
let ul1 = document.getElementsByTagName('ul').item(0);
ul1.style.padding = '50px 100px';
//获取所有li元素
let lis = document.getElementsByTagName('li');
lis[1].style.border = '1px solid #FFCB24';
//====================================获取元素的快捷方式==================================
// document.images 获取所有img标签的元素,返回的是一个节点列表数组
document.images[0].style.width = '600px';
document.images['pic'].style.height = '650px';
//将image看成对象 name可以看成属性
document.images.pic.style.border = '2px solid #479FFF';
//forms 获取页面所有form标签
document.forms[1].style.backgroundColor = '#727272';
document.forms.item(0).style.backgroundColor = '#aaaaaa';
document.forms['register'].style.backgroundColor = '#969696';
document.forms.register.style.backgroundColor = '#beed92';
//links 获取页面所有的 a 标签
document.links[0].style.backgroundColor = 'yellow';
document.links.item(0).style.backgroundColor = 'yellow';
document.links['c'].style.backgroundColor = 'yellow';
document.links.c.style.backgroundColor = 'yellow';
//body: <body>
document.body.style.backgroundColor = 'snow';
// head: <head>元素,总有定义,不写会自动添加,只有一个
let style = document.createElement('style');
document.head.appendChild(style);
//====================================根据class获取元素==================================
let li3 = document.getElementsByClassName('display1');
li3[0].style.backgroundColor = '#a4ffdf';
//该方法也支持在父元素上调用
document.getElementsByClassName('poetry').item(0)
.getElementsByClassName('display2').item(0)
.style.backgroundColor = 'green';
//支持多个class 属性值
let large = document.getElementsByClassName('display2')[0];
large.style.backgroundColor = '#ff82da';
large.style.fontSize = '18px';
//====================================根据css选择器获取元素==================================
// document.querySelectorAll() 返回的是一个节点列表数组
let lists = document.querySelectorAll('li');
lists[0].style.backgroundColor = 'coral';
lists.item(1).style.backgroundColor = 'lightblue';
//该方法还可以在元素上调用,这也根据标签和class类名获取元素是一样的
let uls = document.querySelector('#ul'); // 获取满足条件的第一个元素
console.log(uls); // 只返回ul列表元素以及内部子元素
let li = ul.querySelectorAll('.display3');
li[0].style.backgroundColor = 'green';
</script>
</body>
</html>
演示地址 -> http://47.107.64.136/DOM/1/index1.html
Correcting teacher：查无此人Correction time：2019-05-07 09:49:47
Teacher's summary：完成的不错。相信你现在对js有一定的了解了，继续加油。