WebAPI(part2)--获取元素
生活随笔
收集整理的這篇文章主要介紹了
WebAPI(part2)--获取元素
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
學習筆記，僅供參考，有錯必糾
參考自：pink老師教案
文章目錄
- Web API
- 獲取元素
- 根據ID獲取
- 根據標簽名獲取元素
- H5新增獲取元素方式
- 獲取特殊元素
Web API
獲取元素
根據ID獲取
語法：
document.getElementById(id)參數：id值，區分大小寫的字符串；返回值：元素對象或null；
- 舉個例子
HTML代碼：
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>WebApi</title> </head><body><div id="time">2020-10-10</div><script>// 因為我們文檔頁面從上往下加載，所以先得有標簽 所以我們script寫到標簽的下面var timer = document.getElementById('time');console.log(timer);console.log(typeof timer);// console.dir 打印我們返回的元素對象console.dir(timer);</script> </body></html>控制臺：
根據標簽名獲取元素
語法：
document.getElementsByTagName('標簽名'); element.getElementsByTagName('標簽名');參數：標簽名；返回值：元素對象集合(偽數組，數組元素是元素對象)；
- 舉個例子
HTML代碼：
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>WebApi</title> </head><body><ul><li>安徽財經大學11</li><li>安徽財經大學22</li><li>安徽財經大學33</li><li>安徽財經大學44</li><li>安徽財經大學55</li></ul><ul id="nav"><li>統計與應用數學</li><li>統計與應用數學</li><li>統計與應用數學</li><li>統計與應用數學</li><li>統計與應用數學</li></ul><script>// 1.返回的是 獲取過來元素對象的集合 以偽數組的形式存儲的var lis = document.getElementsByTagName('li');// 2. 我們想要依次打印里面的元素對象我們可以采取遍歷的方式for (var i = 0; i < lis.length; i++) {console.log(lis[i]);}// 3. element.getElementsByTagName() 可以得到這個元素里面的某些標簽var nav = document.getElementById('nav'); // 這個獲得nav 元素var navLis = nav.getElementsByTagName('li');console.log(navLis);</script> </body></html>頁面：
注意，getElementsByTagName()獲取到的是動態集合，即當頁面增加了標簽，這個集合中也就增加了元素。
H5新增獲取元素方式
- 舉個例子
HTML代碼：
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>WebApi</title> </head><body><div class="box">我是盒子1</div><div class="box">我是盒子2</div><div id="nav"><ul><li>安徽財經大學</li><li>統計與應用數學</li></ul></div><script>// 1. getElementsByClassName 根據類名獲得某些元素集合var boxs = document.getElementsByClassName('box');console.log(boxs);// 2. querySelector 返回指定選擇器的第一個元素對象var firstBox = document.querySelector('.box');console.log(firstBox);var nav = document.querySelector('#nav');console.log(nav);var li = document.querySelector('li');console.log(li);// 3. querySelectorAll()返回指定選擇器的所有元素對象集合var allBox = document.querySelectorAll('.box');console.log(allBox);var lis = document.querySelectorAll('li');console.log(lis);</script> </body></html>頁面：
獲取特殊元素
- 獲取body元素
document.body
- 獲取html元素
document.documentElement
總結
以上是生活随笔為你收集整理的WebAPI(part2)--获取元素的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： WebAPI(part1)--API及D
- 下一篇： WebAPI(part3)--事件基础