abstract：使用css选择器来获取元素 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="widt
使用css选择器来获取元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=uluu, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>使用css选择器来获取元素</title>
</head>
<body>
<ul id="ul">
<li class="red">列表项01</li>
<li>列表项02</li>
<li class="green">列表项03</li>
<li class="green">列表项04</li>
<li class="coral large">列表项05</li>
</ul>
<script>
let lists = document.querySelectorAll('li');
console.log(lists);
lists[0].style.backgroundColor = 'coral';
lists.item(2).style.backgroundColor = 'coral';
let ul = document.querySelector('#ul');
console.log(ul);
let li = ul.querySelectorAll('.green')
for(var i=0; i<li.length;i++){
li[i].style.backgroundColor = 'red';
}
</script>
</body>
</html>
根据id属性获取元素
<!DOCTYPE html>
<html lang = "en">
<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>根据id选择元素</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>
let item1 = document.getElementById('item1');
let item2 = document.getElementById('item2');
let item3 = document.getElementById('item3');
// 设置元素的样式
item1.style.backgroundColor = 'yellow';
item2.style.backgroundColor = 'yellow';
item3.style.backgroundColor = 'yellow';
//通过函数来简化以上的操作
function getElements(){//参数是多个id字符串
let elements = {}; //保存获取到的dom对象元素
for(let i=0;i<arguments.length;i++){
let id = arguments[i]; //获取参数id
let elt = document.getElementById(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>
</body>
</html>
name属性和标签名获取元素的快捷方式
<!DOCTYPE html>
<html lang="en">
<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="img/9_13.jpg" name='pic'>
<form action="" name="register">
<input type="text" placeholder="用户名">
<input type="password" placeholder="密码不少于8位">
<button>提交</button>
</form>
<p><a href="">php中文网</a></p>
<script>
// 以文档对象的方式来访问这些特定的元素集合
// document.images 获取所有的img元素 返回是一个数组
// document.images[0].style.width = '300px'; //标签的数组索引
// document.images['pic'].style.width = '400px';//name属性
// document.images.pic.style.width = '100px';//将name 做为images对象的属性
// forms 属性: 获取到页面所有的<form>
// document.forms[0].style.backgroundColor ='lightgreen';
// document.forms['register'].style.backgroundColor = 'red';
// document.forms.register.style.backgroundColor = 'yellow';
// document.forms.item(0).style.backgroundColor = 'red';
// <a> 链接 links
</script>
</body>
</html>
Correcting teacher：查无此人Correction time：2019-05-05 09:36:28
Teacher's summary：完成的不错。刚接触js会比较辛苦，因为js有逻辑了。继续加油。