将学习到的选择器进行总结

xgh2019-05-02 14:00:11
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
使用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>
将学习到的选择器进行总结

最新手记推荐

全部回复(0)我要回复
