摘要：经过本章节学习了DOM方法获取元素分别为：1、根据id属性获取元素， 1.1 document根据id获取元素用.getElementById('ID')方法；返回获取到对应ID的元素数组对象。【注意】：运用ID选择器中不可像使用类名那样重复别名，CSS样式没问题。但DOM中 .getElementById('
经过本章节学习了DOM方法获取元素分别为：
1、根据id属性获取元素，
1.1 document根据id获取元素用.getElementById('ID')方法；返回获取到对应ID的元素数组对象。
【注意】：运用ID选择器中不可像使用类名那样重复别名，CSS样式没问题。但DOM中 .getElementById('ID')方法只能找到一个。
1.2 对所获取的数组对象操作方法：
document.getElementById('ID').style.……
2、根据name属性获取元素；
2.1：使多name为表单中元素和图片，内联框架。
2.2：name属性更多的用于表单数据提交到服务器时,用来识别提交的内容，可以在客户端先对name作基础验证再提交。
2.3:document.getElementsByName('username')方法返回所有name为 username的元素对象数组；
2.4：对所获取的对象后面加上 [下标]对应的元素进行操作。
document.getElementsByName('login')[下标].style......
3、根据标签名称获取元素；
3.1：页面中根据标签名称获取用:document.getElementsByTagName('div') ，此方法返回所有div标签集合。
3.2 对所获取到的标签集合使用方法：
document.getElementsByTagName('div') [下标].style......
document.getElementsByTagName('div') .item(0).style......
4、根据class属性来获取元素，
4.1 document.getElementsByClassName（'classname'）对页面中获取到所有classname类的html标签元素，返回元素集合对象数组。
4.2 还可以对父类集合数组中再获取子级类
document.getElementsByClassName（'父类名'）[下标].getElementsByClassName('子类名').item(下标);
4.3 getElementsByClassName使用方法：
document.getElementsByTagName('div')[下标].style................
document.getElementsByTagName('div').item(下标).style................
5、getElement其它方法：
5.1
根据 css选择器来获取元素，
document.querySelectorAll（'ul')//获取所有ul，将返回数象数组。用下标访问对应的元素
document.querySelector('.classname')//获取所有classname,将返回对象数组。用下标访问对应的元素
document.querySelector('#idName')//收于id别名要求要不能一致，就算有id别名重复也只返第一个id，
//需要使用时后面加下标[0]即可。
5.2根据类名和name属性快捷获取元素
图片
document.images[下标]，document.images['name属性']，document.images.name属性；
表单
document.forms[下标]，document.forms.item[下标],document.forms['name值']，document.forms.name值.
链接
document.links[下标], document.links[name值], document.links.name值；
body
document.dody.style.......因为body只有一个不需要下标操作;
head
document.head.appendChild.....
document.documentElement整个html窗口。
document.doctype 文档类型。
更多未提到的后续把手册都看一遍或者会去查。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.clear{ clear:both}
ul{width: 200px;height: 150px;border:1px solid #ccc;float: left;margin-left: 20px;}
.ulroot span{margin-left: 100px;}
.ulroot{float: left;margin-left:10px;}
.formDiv{margin-top: 10px;border:1px solid #ccc;}
</style>
</head>
<body>
<ul id="styleUl0">
<li id="style1_1">我的ID是style1_1</li>
<li id="style1_2">我的ID是style1_2</li>
<li id="style1_3">我的ID是style1_3</li>
<li id="style1_4">我的ID是style1_4</li>
<li id="style1_5">我的ID是style1_5</li>
</ul>
<ul id = "stylesetClassUl">
<li id="style2_1">我的ID是style2_1</li>
<li id="style2_2">我的ID是style2_2</li>
<li id="style2_3">我的ID是style2_3</li>
<li id="style2_4">我的ID是style2_4</li>
<li id="style2_5">我的ID是style2_5</li>
</ul>
<ul id="styleUl2">
<li id="style3_1">我的ID是style3_1</li>
<li id="style3_2">我的ID是style3_2</li>
<li id="style3_3">我的ID是style3_3</li>
<li id="style3_4">我的ID是style3_4</li>
<li id="style3_5">我的ID是style3_5</li>
</ul>
<div style="width:100%;height:200px;border:1px solid #ccc;float:left;">
<h3>对元素id操作</h3>
<div>
<span>用id改变ul背景</span><button onclick="resetUl(0)">确定</button><br><br>
<span>用id改变li背景</span><button onclick="resetli(0)">确定</button>
</div>
<div>
<span>用id改变ul背景</span><button onclick="resetUl(1)">确定</button><br><br>
<span>用id改变ul背景</span><button onclick="resetli(1)">确定</button>
</div>
<div>
<span>用id改变li背景</span><button onclick="resetUl(2)">确定</button><br><br>
<span>用id改变li背景</span><button onclick="resetli(2)">确定</button>
</div>
</div>
<div></div>
<!-- 根据name操作元素 -->
<div>
<h3>对元素name操作</h3>
<form action="" style="width:600px;float:left">
<input type="text" name="username"> 我的name是username<br>
<input type="password" name="password"> 我的name是password<br>
<button name="button">提交</button>我的name是button <br>
<input type="text" name="username">我的name跟前面哥们一样username <br>
<input type="text" name="username">我的name跟前面哥们一样username <br>
<input type="text" name="username">我的name跟前面哥们一样username <br>
</form>
<div style="width:400px;border:1px soid #ccc;margin-top:10px; float:left; margin-left:100px;">
对name为password变色<br>
<button onclick="passSet()">一个name操作</button><br>
对name为username 变色操作<br>
<button onclick="userNameSet()">多个name操作</button>
</div>
<div></div>
</div>
<div>
<h3>DOM对标签名操作</h3>
<form action="" style="width:600px;float:left">
<input type="text" name="username"> 我的name是username<br>
<input type="password" name="password"> 我的name是password<br>
<button name="button">提交</button>我的name是button <br>
<input type="text" name="username">我的name跟前面哥们一样username <br>
<input type="text" name="username">我的name跟前面哥们一样username <br>
<input type="text" name="username">我的name跟前面哥们一样username <br>
</form>
<div style="width:400px;border:1px soid #ccc;margin-top:10px; float:left; margin-left:100px;">
对标签为form变色
<button onclick="tagSet('form')">form操作</button><br>
对标签为input变色
<button onclick="tagSet('input')">input操作</button><br>
对标签为button变色
<button onclick="tagSet('button')">button操作</button><br>
对标签为span变色
<button onclick="tagSet('span')">span操作</button><br>
对标签为body变色
<button onclick="tagSet('body')">body操作</button><br>
</div>
<div></div>
</div>
<ul>
<li>我的class是style1_1</li>
<li id="style1_2">我的ID是style1_2</li>
<li>我的class是style1_1</li>
<li id="style1_4">我的ID是style1_4</li>
<li>我的class是style1_1</li>
</ul>
<ul>
<li id="style2_1">我的ID是style2_1</li>
<li>我的class是style2_1</li>
<li id="style2_3">我的ID是style2_3</li>
<li>我的class是style2_1</li>
<li id="style2_5">我的ID是style2_5</li>
</ul>
<ul>
<li>我的class是style3_1</li>
<li>我的class是style3_1</li>
<li>我的class是style3_1</li>
<li>我的class是style3_1</li>
<li>我的class是style3_1</li>
</ul>
<div style="width:100%;height:200px;border:1px solid #ccc;float:left;">
<h3>对标签Class操作</h3>
<div>
<span>用class改变setClassUl背景</span><button onclick="setUlClass(0)">确定</button><br><br>
<span>用class改变li背景</span><button onclick="setLiClass(0)">确定</button>
</div>
<div>
<span>用class改变ul2背景</span><button onclick="setUlClass(1)">确定</button><br><br>
<span>用class改变li背景</span><button onclick="setLiClass(1)">确定</button>
</div>
<div>
<span>用class改变所有ul背景</span><button onclick="setUlClass(2)">确定</button><br><br>
<span>用class改变li背景</span><button onclick="setLiClass(2)">确定</button>
</div>
</div>
<div></div>
<script type="text/javascript">
// 改变ul背景
function resetUl(pId) {
//使用id获取ul元素
let styleUl0 = document.getElementById('styleUl0');
let stylesetClassUl = document.getElementById('stylesetClassUl');
let styleUl2 = document.getElementById('styleUl2');
switch(pId)
{
case 0:
styleUl0.style.backgroundColor = 'coral';
break;
case 1:
stylesetClassUl.style.backgroundColor = 'red';
break;
case 2:
styleUl2.style.backgroundColor = 'yellow';
break;
}
}
// 改变li背景
function resetli(pId) {
//使用id获取li元素
let style1_1 = document.getElementById('style1_1');
let style1_2 = document.getElementById('style1_2');
let style1_3 = document.getElementById('style1_3');
let style1_4 = document.getElementById('style1_4');
let style1_5 = document.getElementById('style1_5');
let style2_1 = document.getElementById('style2_1');
let style2_2 = document.getElementById('style2_2');
let style2_3 = document.getElementById('style2_3');
let style2_4 = document.getElementById('style2_4');
let style2_5 = document.getElementById('style2_5');
let style3_1 = document.getElementById('style3_1');
let style3_2 = document.getElementById('style3_2');
let style3_3 = document.getElementById('style3_3');
let style3_4 = document.getElementById('style3_4');
let style3_5 = document.getElementById('style3_5');
switch(pId)
{
case 0:
getElements('style1_1','style1_3','style1_4');
break;
case 1:
getElements('style2_1','style2_2','style2_5');
break;
case 2:
getElements('style3_3','style3_1','style3_2');
break;
}
}
//用止函数可以对多个id获取元素
function getElements(){
//创建一个空的对象来保存结果
let elements = {};
//arguments.length表示函数参数个数
for(let i=0;i<arguments.length;i++){
let id = arguments[i];
let elt = document.getElementById(id);
if(elt ===null){
throw new Error("No element with id:"+id);
}
elements[id]=elt;
}
for(let key in elements){
elements[key].style.backgroundColor ='#ccc'
}
}
// **************************对name操作部分**************************************************
// 对name为password的操作
function passSet(){
let pass = document.getElementsByName('password')[0];
pass.style.backgroundColor = 'yellow';
}
//对name为username的元素操作
function userNameSet(){
let username = document.getElementsByName('username');
for (var i = username.length - 1; i >= 0; i--) {
username[i].style.backgroundColor = 'yellow';
}
}
// ****************************对标签操作部分**************************************************
function tagSet(tagname){
let tag=document.getElementsByTagName(tagname)
let tagLeng=tag.length;
for (var i = tagLeng - 1; i >= 0; i--) {
switch(tagname){
case 'form':
tag[i].style.backgroundColor = '#B452CD'
break;
case 'input':
tag[i].style.backgroundColor = '#A6A6A6'
break;
case 'button':
tag.item(i).style.backgroundColor = '#9932CC'
break;
case 'span':
tag[i].style.backgroundColor = '#76EE00'
break;
case 'body':
tag[i].style.backgroundColor = '#0000EE'
break;
}
}
}
// *******************************对类名操作部分************************************************
let setClassUl = document.getElementsByClassName('ulClass');
function setUlClass(classid){
switch(classid){
case 0:
setClassUl[0].style.backgroundColor = 'red';
break;
case 1:
setClassUl.item(1).style.backgroundColor = 'blue';
break;
case 2:
for (var i = setClassUl.length - 1; i >= 0; i--) {
setClassUl[i].style.backgroundColor = '#ff6700'
}
break;
}
}
function setLiClass(classid){
let list1=setClassUl[0].getElementsByClassName('style1_1');
let list2=setClassUl[1].getElementsByClassName('style2_1');
let list3 = document.getElementsByClassName('style3_1');
switch(classid){
case 0:
for (var i = list1.length - 1; i >= 0; i--) {
list1[i].style.backgroundColor = '#ccc'
}break;
case 1:
for (var i = list2.length - 1; i >= 0; i--) {
list2[i].style.backgroundColor ='#668B8B';
}break;
case 2:
for (var i = list3.length - 1; i >= 0; i--) {
list3[i].style.backgroundColor = '#7FFF00';
}
break;
}
}
</script>
</body>
</html>
批改老师：天蓬老师批改时间：2019-01-04 16:03:50
老师总结：作业完成的相当的精彩, 对于选择器的总结也非常的到位, 看来是用心了, js中的几个重要的dom元素, 例如 document对象,它上面的常用属性和方法, 非常多,更多内容,可以参考mdn网站
