目錄
一、根據根據ID獲取getElementById
二、根據標簽名獲取getElementsByTagName
三、通過HTML5新增方法獲取
四、獲取特殊元素
一、根據根據ID獲取getElementById
注意：
1.因為我們檔案頁面從上往下加載，所以先得有標簽所以我們script寫到標簽的下面
2.get 獲得element 元素by 通過駝峰命名法
3.引數id是大小寫敏感的字串
4.回傳的是一個元素物件
5.console.dir列印我們回傳的元素物件更好的查看里面的屬性和方法
<body>
<div id='time'>2021-12-21</div>
<script>
var timer = document.getElementById('time');
console.log(timer);
console.log(typeof timer);
console.dir(timer);
</script>
</body>
運行結果如下：
二、根據標簽名獲取getElementsByTagName
1.回傳的是獲取過來元素物件的集合以偽陣列的形式存盤的
2.我們想要依次列印里面的元素物件我們可以采取遍歷的方式
3. element.getElementsByTagName()可以得到這個元素里面的某些標簽
<body>
<ul>
<li>123456789</li>
<li>123456789</li>
<li>123456789</li>
<li>123456789</li>
<li>123456789</li>
<li>123456789</li>
</ul>
<ul id='nav'>
<li1>aaaaaa</li1>
<li1>aaaaaa</li1>
<li1>aaaaaa</li1>
<li1>aaaaaa</li1>
<li1>aaaaaa</li1>
<li1>aaaaaa</li1>
<li1>aaaaaa</li1>
</ul>
<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]);
}
var nav = document.getElementById('nav');
var navLis = nav.getElementsByTagName('li');
console.log(navLis);
</script>
</body>運行結果如下：
三、通過HTML5新增方法獲取
1.getElementsByClassName( )根據類名獲得某些元素集合
2.querySelector( )回傳指定選擇器的第一個物件，里面的選擇器需要加符號
3.querySelectorAll( )回傳指定選擇器的所有元素物件集合
通過下面的代碼一起了解一下
<body>
<div class="box">盒子</div>
<div class="box">產品</div>
<div id='nav'>
<ul>
<li>首頁</li>
<li>產品</li>
</ul>
</div>
<script>
var boxs = document.getElementsByClassName('box');
console.log(boxs);
var firstBox = document.querySelector('.box');
console.log(firstBox);
var nav = document.querySelector('#nav');
console.log(nav);
var li = document.querySelector('li');
console.log(li);
var allbox = document.querySelectorAll('.box');
console.log(allbox);
var lis = document.querySelectorAll('li');
console.log(lis);
</script>
</body>運行結果如下：
四、獲取特殊元素
1.document.body//回傳body元素物件
2.document.documentElement//回傳html元素物件
<body>
<script>
var bodyEle = document.body;
console.log(bodyEle);
console.dir(bodyEle);
var htmlEle = document.documentElement;
console.log(htmlEle);
</script>
</body>運行結果如下：
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/382035.html
標籤：其他
上一篇：Gradle7：如何獲取任務中的實作依賴項（包括子項）串列？
下一篇：淺談三目運算子