摘要：根據(jù)id選擇元素<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>根據(jù)id選擇元素</title> </head> <body> &n
根據(jù)id選擇元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>根據(jù)id選擇元素</title>
</head>
<body>
<ul id="lists">
<li id="item1">列表項(xiàng)1</li>
<li>列表項(xiàng)2</li>
<li id="item3">列表項(xiàng)3</li>
<li>列表項(xiàng)4</li>
<li id="item5">列表項(xiàng)5</li>
</ul>
<script type="text/javascript">
//使用id選擇元素
//document是Document對(duì)象的一個(gè)引用，是一個(gè)全局變量
var item1 = document.getElementById('item1');
var item3 = document.getElementById('item3');
var item5 = document.getElementById('item5');
//設(shè)置元素的樣式
item1.style.backgroundColor='yellow';
item3.style.backgroundColor='yellow';
item5.style.backgroundColor='yellow';
//通過函數(shù)簡(jiǎn)化以上操作
function getElement(){//參數(shù)是多個(gè)id的字符串
var elements={};//保存獲取到的dom對(duì)象元素
for(var i=0;i<arguments.length;i++){
var id=arguments[i];//獲取參數(shù)id
var elt=document.getElementById(id);//根據(jù)id獲取字符串
if (elt === null) {
throw new Error('沒有找到元素'+id);//拋出異常
}
elements[id]=elt; //將獲取的元素保存到結(jié)果集合中
}
return elements; //將獲取的元素返回
}
//根據(jù)id獲取頁(yè)面傻瓜的綁定元素，返回一個(gè)關(guān)聯(lián)數(shù)組對(duì)象，鍵名就是id
var elements = getElement('item1','item3','item5');
// console.log(elements)
for(var key in elements){
elements[key].style.backgroundColor = 'coral';
}
</script>
</body>
</html>根據(jù)name屬性選擇元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>根據(jù)name屬性選擇元素</title>
</head>
<body>
<!--name屬性并不是所有元素都有，只有一些特定的元素會(huì)有，表單，表單內(nèi)的元素，圖像，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()返回一個(gè)節(jié)點(diǎn)列表數(shù)組,Nodelist
var login = document.getElementsByName('login')[0];
console.log(login);
login.style.backgroundColor='yellow';
//我們可以把name屬性當(dāng)成document對(duì)象的屬性來用
var login1 = document.login;
console.log(login1);
login1.style.backgroundColor='green';
</script>
</body>
</html>根據(jù)Tag標(biāo)簽名選擇元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>根據(jù)Tag標(biāo)簽名選擇元素</title>
</head>
<body>
<ul>
<li>列表項(xiàng)1</li>
<li>列表項(xiàng)2</li>
<li>列表項(xiàng)3</li>
<li>列表項(xiàng)4</li>
<li>列表項(xiàng)5</li>
</ul>
<script type="text/javascript">
//返回是一個(gè)元素的集合，就有一個(gè)length
var ul = document.getElementsByTagName('ul')[0];
ul.style.backgroundColor='lightyellow';
// console.log(document.getElementsByTagName('ul').length)
//元素集合其實(shí)是一個(gè)對(duì)象，他的上面有一個(gè)方法: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對(duì)象上，還在元素對(duì)象上也有定義
var ul2 = document.getElementsByTagName('ul').item(0);
let item2 =ul2.getElementsByTagName('li').item(1);
item2.style.backgroundColor='green';
</script>
</body>
</html>使用標(biāo)簽名和name屬性獲取元素的快捷方式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>使用標(biāo)簽名和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://ipnx.cn" name="php">php中文網(wǎng)</a></p>
<script type="text/javascript">
//以文檔對(duì)象的方式來訪問這些特定的元素集合
//document.images: 獲取所有的<img>元素，返回一個(gè)數(shù)組
document.images[0].style.width="200px"; //1.標(biāo)簽的數(shù)字索引
document.images['pic'].style.width="300px"; //2.name屬性
//如果將images看成對(duì)象，name就看成屬性
document.images.pic.style.width="250px"; //3.name作為images對(duì)象的屬性
//forms屬性：獲取到頁(yè)面中的所有的<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對(duì)象的屬性
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">列表項(xiàng)1</li>
<li>列表項(xiàng)2</li>
<li class="green">列表項(xiàng)3</li>
<li>列表項(xiàng)4</li>
<li class="coral large">列表項(xiàng)5</li>
</ul>
<script type="text/javascript">
//根據(jù)class來獲取元素
var red = document.getElementsByClassName('red')[0];
// console.log(red);
red.style.backgroundColor='red';
//該方法不僅可以在document對(duì)象上調(diào)用，也可以在元素上調(diào)用，一般是在父元素上調(diào)用
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">列表項(xiàng)1</li>
<li>列表項(xiàng)2</li>
<li class="green">列表項(xiàng)3</li>
<li class="green">列表項(xiàng)4</li>
<li class="coral large">列表項(xiàng)5</li>
</ul>
<script type="text/javascript">
//選擇頁(yè)面元素最簡(jiǎn)單的方式就是用css的選擇器：.red -->class='red'
var lists = document.querySelectorAll('li');//根據(jù)標(biāo)簽選擇器：li來獲取
console.log(lists);
lists[0].style.backgroundColor='coral';
lists.item(1).style.backgroundColor='lightcoral';
//該方法也可以在元素上調(diào)用
var ul=document.querySelector('#ul');//返回滿足條件的第一個(gè)
//等效語(yǔ)句
//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的，因?yàn)閕d是唯一的，tag標(biāo)簽選取元素、name屬性獲取元素、class屬性獲取元素、css選擇器來獲取元素、使用標(biāo)簽名和name屬性獲取元素獲取的都是數(shù)組對(duì)象，需要加索引才能獲取元素。
批改老師：天蓬老師批改時(shí)間：2018-12-08 17:30:32
老師總結(jié)：選擇元素器,就如找人, 可以根據(jù)姓名,也可以根據(jù)特征, 還可以根據(jù)位置, 頁(yè)面元素也是一樣一樣的