abstract：总结：进度太慢了，感觉动力不足。。代码：一。<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title></head><body><ul id="
总结：
进度太慢了，感觉动力不足。。
代码：
一。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<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>
//使用id属性获取元素
let item1 = document.getElementById('item1');
let item2 = document.getElementById('item2');
let imte3 = document.getElementById('item3');
item1.style.backgroundColor = 'yellow';
item2.style.backgroundColor = "yellow";
item3.style.backgroundColor = "yellow";
function getElements(){
let elements = {}; //创建一个空的map 映射
for(let i=0; i<arguments.length; i++){
let id=arguments[i];
let element = document.getElementById(id);
if(element == null){
throw new Error("No element with id: " + id);
}
elements[id] = element;
}
return elements;
}
let elements = getElements('item1', 'item2', 'item3');
for(let key in elements){
elements[key].style.backgroundColor = "green";
}
</script>
</body>
</html>
二。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>根据name属性获取元素</title>
</head>
<body>
<!-- 拥有name属性的元素 常见的有： 表单，以及表单中的元素， 图像以及内联框架 -->
<!-- form, input, img, iframe -->
<form action="" name="login">
<input type="text" name="username">
<input type="password" name="password">
<button name="button">提交</button>
</form>
<script>
// getElementsByName() 返回的是一个 NodelList 节点列表， 不只是一个元素
let login = document.getElementsByName('username')[0];
console.log(document.getElementsByName('username'));
//输出结果：NodeList(1)
login.style.backgroundColor = "coral";
document.login.style.backgroundColor = "red";
console.log(document.login);
//输出结果：整个form元素
</script>
</body>
</html>
三。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>使用标签名和name属性选择的快捷方式</title>
</head>
<body>
<img src="inc/1.jpg" alt="" name=pic>
<form action="" name="register">
<input type="text" placeholder="用户名">
<input type="password" placeholder="密码不少于8位">
<button>提交</button>
</form>
<p><a href="www.php.cn" name="php">php中文网</a></p>
<script>
//根据name标签名和name 属性选择元素的快捷方式： 仅适用于极少的几个，这是历史原因造成的
//images： 所有的 <img> 元素
document.images[0].style.width = "400px";
document.images['pic'].style.width = "200px";
document.images.pic.style.width = "300px";
document.images.item(0).style.width = "100px";
//forms：所有的 <forms> 元素、表单、数组
document.forms[0].style.backgroundColor = "yellow"; //标签索引
document.forms.item(0).style.backgroundColor = "red";
document.forms['register'].style.backgroundColor = "green"; //name 属性
document.forms.register.style.backgroundColor = "lightgreen"; //将name视为元素对象的属性进行访问
document.links[0].style.color = "red";
document.links.item(0).style.backgroundColor = "yellow";
document.links['php'].style.color = "black";
document.links.php.style.backgroundColor = "red";
document.body.style.backgroundColor = "#ff6700";
let style = document.createElement('style');
document.head.appendChild(style);
//documentElement: <html> 元素,总有定义，同样一个页面只有一个
console.log(document.documentElement);
//doctype: 文档类型，同样也只有一个
console.log(document.doctype);
</script>
</body>
</html>
四。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>通过class属性选择元素</title>
</head>
<body>
<ul>
<li>列表项01</li>
<li>列表项02</li>
<li>列表项03</li>
<li>列表项04</li>
<li class="yellow large">列表项05</li>
</ul>
<script>
//CSS属性选择元素
// let red = document.getElementsByClassName('red')[0];
// red.style.backgroundColor = "red";
// //该方法可以在父元素上调用
// document.getElementsByClassName('ul')[0]
// .getElementsByClassName('blue')[0]
// .style.backgroundColor = "blue";
// //支持多个class 属性值
// let large = document.getElementsByClassName('yellow large')[0];
// large.style.backgroundColor = "coral";
// large.style.fontSize = '1.5rem';
//CSS选择器获取元素
let lists = document.querySelectorAll('li');
console.log(lists); //返回节点列表元素
lists[0].style.backgroundColor = "coral";
lists[1].style.backgroundColor = "red";
//还可以获取class 或 id 名
let ul = document.querySelector('.ul'); //获取满足条件的第一个元素
ul.style.color = "yellow";
let li = ul.querySelectorAll('.blue');
for(let i=0; i<li.length; i++){
li[i].style.backgroundColor = "lightblue";
}
</script>
</body>
</html>
Correcting teacher：查无此人Correction time：2019-03-16 09:35:16
Teacher's summary：完成的不错。就是看着有点乱。 js获取标签，是最基础的知识。继续加油