JavaScript中獲取元素的方式
阿新 • • 發佈：2022-03-28
獲取元素
1.getElementById獲取元素
返回一個元素物件
<body>
<div id="time">2022-3-26</div>
<script>
//引數id 是大小寫敏感的字串
var timer=document.getElementById('time');
console.log(timer);
console.log(typeof timer);
console.dir(timer);//列印返回的元素物件，更好檢視裡面的屬性和方法
</script>
</body>
2.getElementsByTagName獲取元素
<body>
<ul>
<li>我是大帥比1</li>
<li>我是大帥比2</li>
<li>我是大帥比3</li>
<li>我是大帥比4</li>
</ul>
<ol id="i">
<li>我不是大帥比</li>
<li>我不是大帥比</li>
<li>我不是大帥比</li>
<li>我不是大帥比</li>
<li>我不是大帥比</li>
</ol>
<script>
//返回的是 獲取過來元素物件的集合 以偽陣列的形式儲存的
var lis=document.getElementsByTagName('li');
console.log(lis);
console.log(lis[0]);
//我們想要列印裡面的元素物件，我們可以遍歷陣列
for(var i=0;i<lis.length;i++){
console.log(lis[i]);
}
//只有一個li，仍然是偽陣列
//如果頁面中沒有這個元素，返回空的偽陣列
//出現兩組li了，如何避免出錯
var list=document.getElementById('i');
console.log(list.getElementsByTagName('li'));//獲取父元素內部所有指定標籤的子元素
</script>
</body>
3.H5新增獲取元素方式
<div class="box">盒子1</div>
<div class="box">盒子2</div>
<div class="nav">
<ul>
<li>首頁</li>
<li>產品</li>
</ul>
</div>
(1)getElementsByClassName 根據類名獲取某些元素集合
var bos=document.getElementsByClassName('box');
console.log(bos);
(2)querySelector 返回指定選擇器的第一個元素物件
var firstbox=document.querySelector('.box');
console.log(firstbox);
var nav=document.querySelector('#nav');
console.log(nav);
(3)querySelectorAll() 返回指定選擇器的所有元素物件的集合
var allBox=document.querySelectorAll('.box');
console.log(allbox);
var lis=document.querySelectorAll('li');
console.log(lis);
4.獲取特殊元素
<body>
<script>
//1.獲取body元素
var bodyEle=document.body;
console.log(bodyEle);
console.dir(bodyEle);
//2.獲取html元素
var htmlEle=document.documentElement;
console.log(htmlEle);
</script>
</body>