<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
ul li{
color: black;
}
ul li.active{
color: red;
}
</style>
</head>
<body>
<div id="box">MJJ</div>
<ul id="box2">
<li class="active">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<script type="text/javascript">
// 1.通過id獲取單個節點對象
var box = document.getElementById('box');
console.log(box);
console.dir(box);
// // 2.通過標簽名來獲取節點對象
// var box2 = document.getElementsByTagName('div');
// console.log(box2);
// var lis = document.getElementsByTagName('li');
// for(var i = 0; i < lis.length; i++){
// // lis[i].className = 'active';
// lis[i].onclick = function(){
// // this指向了綁定onclick的那個對象
// // 排他思想
// for(var j = 0; j < lis.length; j++){
// lis[j].className = '';
// };
// this.className = 'active';
// }
// }
// // 3.通過類名獲取
// var lis2 = document.getElementsByClassName('active');
// // console.log(lis2);
// // var box = document.getElementById('box2');
// // console.log(box.children);
</script>
</body>
</html>
1、通過id獲取
1.1
1.2
var box = document.getElementById('box');
console.log(box);
1.3、console.dir(box)
2、通過標簽名來獲取節點對象
2.1
// // 2.通過標簽名來獲取節點對象
var box2 = document.getElementsByTagName('div');
console.log(box2);
2.2、實現點擊哪個li，哪個li變成紅色，其它不紅。
var box2 = document.getElementsByTagName('div'); // console.log(box2); var lis = document.getElementsByTagName('li'); //lis數組 for(var i = 0; i < lis.length; i++){ // lis[i].className = 'active'; lis[i].onclick = function(){ // this指向了綁定onclick的那個對象 // 排他思想 for(var j = 0; j < lis.length; j++){ lis[j].className = ''; }; this.className = 'active'; } }
通過獲取元素通過tag名字獲得是這個標簽的數組。
console.log(lis);
實現點擊哪個li，哪個li變成紅色，其它不紅。
for(var i = 0; i < lis.length; i++){ // lis[i].className = 'active'; lis[i].onclick = function(){ // this指向了綁定onclick的那個對象 // 排他思想 for(var j = 0; j < lis.length; j++){ lis[j].className = ''; }; this.className = 'active';
1）獲取所有指定標簽元素，是個數組（好像是偽數組把？？） #document.getElementsByTagName('li')
2）循環數組元素。點擊某個標簽之后先將所有的標簽class設置為空字符串。 # lis[j].className = ''
3）再給點擊到的標簽添加類名 #this.className = 'active';
4）類名是有設置了css樣式的。紅色color值
5）點擊之后的操作是onclick事件。給循環的每個數組元素綁定事件。 # lis[i].onclick = function(){}；
6）給每個數組元素.onclick綁定事件，需要for循環遍歷數組。事件是執行=的匿名函數function(){},將所有的這個li標簽去掉類名，再加個有紅色屬性的類名，這樣實現點擊誰只有誰有這個類，只有這個標簽變紅。將所有li標簽去掉類名就是在函數中再for循環數組對每個元素類名設置為空字符串
7）如果沒有第2步，那么選中之后的標簽不會變回黑色，標簽不會只是單個變紅
2.3、
var box2 = document.getElementsByTagName('div'); // console.log(box2); var lis = document.getElementsByTagName('li'); console.log(lis); for(var i = 0; i < lis.length; i++){ // lis[i].className = 'active'; lis[i].onclick = function(){ // this指向了綁定onclick的那個對象 // 排他思想 for(var j = 0; j < lis.length; j++){ lis[j].className = ''; }; this.className = 'active'; console.log(this); console.log(typeof lis[i]); console.log(lis[i]); } }
點擊li 2 2變紅，點擊3 3變紅 。打印this是每個li標簽對象，是單個數組元素。 打印數組每個元素lis[i]類型是未定義，元素是未定義。
點擊時可查看到對應的class在變化：
3、通過類名獲取
3.1、
var lis2 = document.getElementsByClassName('active');
console.log(lis2);
4、獲取所有子孩子對象 父對象.children
var box = document.getElementById('box2'); cd=box.children console.log(cd); for(var i = 0; i < cd.length; i++){ console.log(i,cd[i]) }
#注意 console.log(i,cd[i])可以打印多個元素