6种选择器学习和总结
根据id选择元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>根据id选择元素</title>
</head>
<body>
<ul id="lists">
<li id="item1">列表项1</li>
<li>列表项2</li>
<li id="item3">列表项3</li>
<li>列表项4</li>
<li id="item5">列表项5</li>
</ul>
<script type="text/javascript">
//使用id选择元素
//document是Document对象的一个引用，是一个全局变量
var item1 = document.getElementById('item1');
var item3 = document.getElementById('item3');
var item5 = document.getElementById('item5');
//设置元素的样式
item1.style.backgroundColor='yellow';
item3.style.backgroundColor='yellow';
item5.style.backgroundColor='yellow';
//通过函数简化以上操作
function getElement(){//参数是多个id的字符串
var elements={};//保存获取到的dom对象元素
for(var i=0;i<arguments.length;i++){
var id=arguments[i];//获取参数id
var elt=document.getElementById(id);//根据id获取字符串
if (elt === null) {
throw new Error('没有找到元素'+id);//抛出异常
}
elements[id]=elt; //将获取的元素保存到结果集合中
}
return elements; //将获取的元素返回
}
//根据id获取页面傻瓜的绑定元素，返回一个关联数组对象，键名就是id
var elements = getElement('item1','item3','item5');
// console.log(elements)
for(var key in elements){
elements[key].style.backgroundColor = 'coral';
}
</script>
</body>
</html>根据name属性选择元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>根据name属性选择元素</title>
</head>
<body>
<!--name属性并不是所有元素都有，只有一些特定的元素会有，表单，表单内的元素，图像，iframe-->
<form action="" name="login">
<input type="text" name="username">
<input type="passname" name="passname">
<button name="button">提交</button>
</form>
<script type="text/javascript">
//getElementsByName()返回一个节点列表数组,Nodelist
var login = document.getElementsByName('login')[0];
console.log(login);
login.style.backgroundColor='yellow';
//我们可以把name属性当成document对象的属性来用
var login1 = document.login;
console.log(login1);
login1.style.backgroundColor='green';
</script>
</body>
</html>根据Tag标签名选择元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>根据Tag标签名选择元素</title>
</head>
<body>
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
<li>列表项4</li>
<li>列表项5</li>
</ul>
<script type="text/javascript">
//返回是一个元素的集合，就有一个length
var ul = document.getElementsByTagName('ul')[0];
ul.style.backgroundColor='lightyellow';
// console.log(document.getElementsByTagName('ul').length)
//元素集合其实是一个对象，他的上面有一个方法:item()
var ul1 = document.getElementsByTagName('ul').item(0);
ul1.style.backgroundColor='lightblue';
var lists = document.getElementsByTagName('li');
console.log(lists.length);
console.log(lists);
for(var i=0;i<lists.length;i++){
lists[i].style.backgroundColor='lightpink';
}
//该方法不仅定义在document对象上，还在元素对象上也有定义
var ul2 = document.getElementsByTagName('ul').item(0);
let item2 =ul2.getElementsByTagName('li').item(1);
item2.style.backgroundColor='green';
</script>
</body>
</html>使用标签名和name属性获取元素的快捷方式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>使用标签名和name属性获取元素的快捷方式</title>
</head>
<body>
<img src="1.jpg" alt="" name="pic">
<form action="" name="register">
<input type="text" placeholder="用户名">
<input type="password" placeholder="密码不能少于8位" >
<button>提交</button>
</form>
<p><a href="http://www.php.cn" name="php">php中文网</a></p>
<script type="text/javascript">
//以文档对象的方式来访问这些特定的元素集合
//document.images: 获取所有的<img>元素，返回一个数组
document.images[0].style.width="200px"; //1.标签的数字索引
document.images['pic'].style.width="300px"; //2.name属性
//如果将images看成对象，name就看成属性
document.images.pic.style.width="250px"; //3.name作为images对象的属性
//forms属性：获取到页面中的所有的<form>
document.forms[0].style.backgroundColor = 'lightgreen'; //1.索引
document.forms['register'].style.backgroundColor = 'lightblue'; //2.name属性值
document.forms.register.style.backgroundColor = 'lightgreen'; //3.name作为forms对象的属性
document.forms.item(0).style.backgroundColor = 'red'; //4.使用元素集合的item()方法
//links链接<a>
document.links[0].style.backgroundColor = 'lightgreen';
document.links['php'].style.backgroundColor = 'lightblue';
document.links.php.style.backgroundColor = 'lightred';
document.links.item(0).style.backgroundColor = 'lightgreen';
//body:<body>
document.body.style.backgroundColor = 'wheat';
//head:<head>
var style = document.createElement('style');
document.head.appendChild(style);
//documentElement：<html>
console.log(document.documentElement);
//doctype : 文档类型
console.log(document.doctype);
</script>
</body>
</html>通过class属性获取元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>通过class属性获取元素</title>
</head>
<body>
<ul class="ul">
<li class="red">列表项1</li>
<li>列表项2</li>
<li class="green">列表项3</li>
<li>列表项4</li>
<li class="coral large">列表项5</li>
</ul>
<script type="text/javascript">
//根据class来获取元素
var red = document.getElementsByClassName('red')[0];
// console.log(red);
red.style.backgroundColor='red';
//该方法不仅可以在document对象上调用，也可以在元素上调用，一般是在父元素上调用
document.getElementsByClassName('ul').item(0)
.getElementsByClassName('green').item(0)
.style.backgroundColor='green';
//class支持多值
var large=document.getElementsByClassName('coral large')[0];
large.style.backgroundColor='coral';
large.style.fontSize='1.5rem';
</script>
</body>
</html>通过css选择器来获取元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>通过css选择器来获取元素</title>
</head>
<body>
<ul id="ul">
<li class="red">列表项1</li>
<li>列表项2</li>
<li class="green">列表项3</li>
<li class="green">列表项4</li>
<li class="coral large">列表项5</li>
</ul>
<script type="text/javascript">
//选择页面元素最简单的方式就是用css的选择器：.red -->class='red'
var lists = document.querySelectorAll('li');//根据标签选择器：li来获取
console.log(lists);
lists[0].style.backgroundColor='coral';
lists.item(1).style.backgroundColor='lightcoral';
//该方法也可以在元素上调用
var ul=document.querySelector('#ul');//返回满足条件的第一个
//等效语句
//document.querySelectorAll('#ul')[0];
console.log(ul);
var li = ul.querySelectorAll('.green');
console.log(li);
for(var i=0;i<li.length;i++){
li[i].style.backgroundColor='yellow';
}
</script>
</body>
</html>主要是这6种方式选择document文档中元素，id选择器是document.getElementById(id),没有s的，因为id是唯一的，tag标签选取元素、name属性获取元素、class属性获取元素、css选择器来获取元素、使用标签名和name属性获取元素获取的都是数组对象，需要加索引才能获取元素。
