abstrak：使用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">列表項(xiàng)01</li>
<li>列表項(xiàng)02</li>
<li class="green">列表項(xiàng)03</li>
<li class="green">列表項(xiàng)04</li>
<li class="coral large">列表項(xiàng)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>
根據(jù)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>根據(jù)id選擇元素</title>
</head>
<body>
<ul id = "lists">
<li id = "item1">列表項(xiàng)01</li>
<li>列表項(xiàng)02</li>
<li id = "item2">列表項(xiàng)03</li>
<li>列表項(xiàng)04</li>
<li id = "item3">列表項(xiàng)05</li>
</ul>
<script>
let item1 = document.getElementById('item1');
let item2 = document.getElementById('item2');
let item3 = document.getElementById('item3');
// 設(shè)置元素的樣式
item1.style.backgroundColor = 'yellow';
item2.style.backgroundColor = 'yellow';
item3.style.backgroundColor = 'yellow';
//通過函數(shù)來簡(jiǎn)化以上的操作
function getElements(){//參數(shù)是多個(gè)id字符串
let elements = {}; //保存獲取到的dom對(duì)象元素
for(let i=0;i<arguments.length;i++){
let id = arguments[i]; //獲取參數(shù)id
let elt = document.getElementById(id);
if(elt === null){
throw new Error('沒有這個(gè)元素'+id);
}
elements[id] = elt; //將獲取到的元素保存到結(jié)果集合中
}
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屬性和標(biāo)簽名獲取元素的快捷方式
<!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屬性和標(biāo)簽名獲取元素的快捷方式</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中文網(wǎng)</a></p>
<script>
// 以文檔對(duì)象的方式來訪問這些特定的元素集合
// document.images 獲取所有的img元素 返回是一個(gè)數(shù)組
// document.images[0].style.width = '300px'; //標(biāo)簽的數(shù)組索引
// document.images['pic'].style.width = '400px';//name屬性
// document.images.pic.style.width = '100px';//將name 做為images對(duì)象的屬性
// 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>
Guru membetulkan：查無此人Masa pembetulan：2019-05-05 09:36:28
Rumusan guru：完成的不錯(cuò)。剛接觸js會(huì)比較辛苦，因?yàn)閖s有邏輯了。繼續(xù)加油。