实战IT培训机构_黄色激情网站_IT培训班选大学生IT技术培训中心_黄色激情视频网站_中公优就业

400-650-7353
您所在的位置:首頁 > IT干貨資料 > web前端 > 【W(wǎng)eb前端基礎(chǔ)知識】dom獲取元素的方式

【W(wǎng)eb前端基礎(chǔ)知識】dom獲取元素的方式

  • 發(fā)布: Web前端培訓(xùn)
  • 來源:優(yōu)就業(yè)
  • 2021-09-28 14:22:04
  • 閱讀()
  • 分享
  • 手機(jī)端入口

在原生js中我們會經(jīng)常操作dom結(jié)構(gòu),通過獲取具體標(biāo)簽進(jìn)行操作,那我們知道常用的js獲取元素的方式有哪些嗎,并且這些方法之間的區(qū)別是什么呢,以及有哪些注意點呢!接下來我們就一起看一下吧!

JavaScript獲取元素的的幾種方式以及區(qū)別

(1) 通過ID名獲取getElementById(“id名”):

通過id名是獲取具體的實際的一個標(biāo)簽,是靜態(tài)獲取,即獲取的時候有就可以獲取得到,后續(xù)再添加該id名的標(biāo)簽也獲取不到了。為何會說通過id名獲取是靜態(tài)獲取呢,我們通過具體的例子來看:

  1. <ul id="list"></ul> 

Js代碼為:

  1. var oUl = document.getElementById("list"); 
  2.    var byId = document.getElementById("h"); 
  3.    console.log(byId); 
  4.    //在ul中添加一個li 
  5.    oUl.innerHTML = "<li id='h' style='width:100px;height:100px;background:red'></li>"
  6.    console.log(byId); 

最后的結(jié)果為:null null

可以得出結(jié)論通過id名的獲取是靜態(tài)獲取,在后期添加的獲取不到

注意:

① 上下文必須是document,至于原因我們留到最后再解釋;

② 通過id只獲取到一個元素,畢竟id是獨一無二的;

③ 通過id獲取是靜態(tài)獲取;

(2) 通過name屬性獲取 getElementsByName('name屬性值')

當(dāng)我們的標(biāo)簽有name屬性時,可以通過其name屬性來獲取標(biāo)簽,如在單選按鈕中

  1. <input type="radio" name='sex' >男  
  2. <input type="radio" name='sex' checked>女 

Js代碼為:

  1. var oSex = document.getElementsByName('sex'); 
  2. console.log(oSex); 

結(jié)果如下圖是節(jié)點列表,為一個類數(shù)組:

注意:

① 上下文必須是document;

② 獲取的結(jié)果是一個類數(shù)組,不是一個真正的數(shù)組,有l(wèi)ength屬性,可以通過具體的下標(biāo)獲取對應(yīng)的元素;

(3) 通過標(biāo)簽名獲取:getElementsByTagName('標(biāo)簽名')

通過標(biāo)簽名獲取的元素是一個元素集合,為類數(shù)組形式,有l(wèi)ength屬性;且通過標(biāo)簽名獲取為動態(tài)獲取,即獲取的時候沒有該標(biāo)簽,若后續(xù)進(jìn)行手動添加后也能獲取到。舉例:

  1. <ul id="list"></ul> 

Js代碼如下:

  1. var oUl = document.document.getElementById("list"); 
  2.     var byTagName = document.getElementsByTagName("li"); 
  3.     console.log(byTagName); 
  4.     //在ul中添加一個li 
  5.     oUl.innerHTML = "<li id='h' style='width:100px;height:100px;background:red'></li>"
  6.     console.log(byTagName); 

最后的結(jié)果為:

可以看到在手動添加li標(biāo)簽之后,可以動態(tài)地獲取到添加之后的標(biāo)簽,但是我們也看到了通過標(biāo)簽名獲取的元素是一個集合,就算只有一個元素也是一個集合,是以一個類數(shù)組的形式存在,并不是真正的數(shù)組。

注意:

① 上下文可以是document,也可以是一個父元素;

② 是一個類數(shù)組,有長度屬性,通過[]可以獲取具體的某一項;

③ 在使用時要通過具體的下標(biāo),比如添加點擊事件時;

(4) 通過類名獲取 getElementsByClassName(‘類名’)

通過類名獲取元素的方式與用法基本一樣,也是動態(tài)獲取;

注意:

① 上下文可以是document,也可以是一個父元素;

② 是一個類數(shù)組,有長度屬性,通過[]可以獲取具體的某一項;

③ 在使用時要通過具體的下標(biāo),比如添加點擊事件時;

④ 注意單詞拼寫,因為class是一個關(guān)鍵字,所以為getElementsByClassName

(5) 快速獲取html元素 document.documentElement

  1. document對象有一個documentElement屬性,該屬性始終指向HTML頁面中的<html>元素。 
  2. var html = document.documentElement; //取得對<html>的引用   

(6) 快速獲取body元素 document.body

  1. document 對象還有一個 body 屬性,直接指向<body>元素。 
  2. var body = document.body; //取得對<body>的引用 

(7) 通過選擇器獲取一個元素 querySelector("css選擇器")

該方法接收一個 CSS 選擇符,返回與該模式匹配的第一個元素。

注意:

① 上下文可以是document,也可以是一個父元素;

② 參數(shù)是選擇器,如“div .active”;

③ 返回值只能獲取到第一個元素;

④ 與通過id獲取的方式一樣為靜態(tài)獲取;

⑤ Ie8以下存在兼容問題;

(8) 通過選擇器獲取一組元素 querySelectorAll("css選擇器")

該方法接收一個 CSS 選擇符,返回的是所有匹配的元素而不僅僅是一個元素。其結(jié)果為一個節(jié)點列表。

注意:

① 上下文可以是document,也可以是一個父元素;

② 參數(shù)是選擇器,如“div .active”;

③ 返回值為一組節(jié)點列表,是一個類數(shù)組;

④ 與通過id獲取的方式一樣為靜態(tài)獲取;

⑤ Ie8以下存在兼容問題;

使用原生JS獲取DOM元素的8個方法講完了,接下來在講一下為什么有的方法只能在document上使用。

拿div舉例子,div是HTMLDivElement類的一個實例,document是HTMLDocument 的實例。

他們的繼承關(guān)系:

HTMLDivElement > HTMLElement > Element > Node > EventTarget

HTMLDocument > Document > Node > EventTarget

我們都知道子類繼承父類,子類就可以使用父類的屬性和方法。他們相同的繼承關(guān)系是Node和EventTarget,也就是說他們都可以使用Node和EventTarget上的方法。

如Node上的nodeName、parentNode等,和EventTarget上的addEventListener等。

getElementById只在Document類的原型上,HTMLDivElement 沒有繼承Document類,所以div不能使用getElementById方法。

getElementsByTagName即在Document類的原型上也在Element類的原型上,所以div和document都可以使用getElementsByTagName方法。其它同理。

文章“【W(wǎng)eb前端基礎(chǔ)知識】dom獲取元素的方式”已幫助

更多內(nèi)容

>>本文地址:http://www.jecan.cn/zhuanye/2021/70199.html

THE END  

聲明:本站稿件版權(quán)均屬中公教育優(yōu)就業(yè)所有,未經(jīng)許可不得擅自轉(zhuǎn)載。

1 您的年齡

2 您的學(xué)歷

3 您更想做哪個方向的工作?

獲取測試結(jié)果
  • 大前端大前端
  • 大數(shù)據(jù)大數(shù)據(jù)
  • 互聯(lián)網(wǎng)營銷互聯(lián)網(wǎng)營銷
  • JavaJava
  • Linux云計算Linux
  • Python+人工智能Python
  • 嵌入式物聯(lián)網(wǎng)嵌入式
  • 全域電商運營全域電商運營
  • 軟件測試軟件測試
  • 室內(nèi)設(shè)計室內(nèi)設(shè)計
  • 平面設(shè)計平面設(shè)計
  • 電商設(shè)計電商設(shè)計
  • 網(wǎng)頁設(shè)計網(wǎng)頁設(shè)計
  • 全鏈路UI/UE設(shè)計UI設(shè)計
  • VR/AR游戲開發(fā)VR/AR
  • 網(wǎng)絡(luò)安全網(wǎng)絡(luò)安全
  • 新媒體與短視頻運營新媒體
  • 直播帶貨直播帶貨
  • 智能機(jī)器人軟件開發(fā)智能機(jī)器人
 

快速通道fast track

近期開班時間TIME

主站蜘蛛池模板: 全自动过滤器_反冲洗过滤器_自清洗过滤器_量子除垢环_量子环除垢_量子除垢 - 安士睿(北京)过滤设备有限公司 | 华溶溶出仪-Memmert稳定箱-上海协烁仪器科技有限公司 | 天津热油泵_管道泵_天津高温热油泵-天津市金丰泰机械泵业有限公司【官方网站】 | 多物理场仿真软件_电磁仿真软件_EDA多物理场仿真软件 - 裕兴木兰 | 铝扣板-铝方通-铝格栅-铝条扣板-铝单板幕墙-佳得利吊顶天花厂家 elisa试剂盒价格-酶联免疫试剂盒-猪elisa试剂盒-上海恒远生物科技有限公司 | 无水硫酸铝,硫酸铝厂家-淄博双赢新材料科技有限公司 | 展厅设计-展馆设计-专业企业展厅展馆设计公司-昆明华文创意 | 水性漆|墙面漆|木器家具漆|水漆涂料_晨阳水漆官网 | 上海软件开发-上海软件公司-软件外包-企业软件定制开发公司-咏熠科技 | 体感VRAR全息沉浸式3D投影多媒体展厅展会游戏互动-万展互动 | 烘干设备-热泵烘干机_广东雄贵能源设备有限公司 | 齿辊分级破碎机,高低压压球机,立式双动力磨粉机-郑州长城冶金设备有限公司 | 西装定制/做厂家/公司_西装订做/制价格/费用-北京圣达信西装 | 济南宣传册设计-画册设计_济南莫都品牌设计公司 | 深圳快餐店设计-餐饮设计公司-餐饮空间品牌全案设计-深圳市勤蜂装饰工程 | H型钢切割机,相贯线切割机,数控钻床,数控平面钻,钢结构设备,槽钢切割机,角钢切割机,翻转机,拼焊矫一体机 | 六自由度平台_六自由度运动平台_三自由度摇摆台—南京全控科技 | 电子天平-华志电子天平厂家| 机床主轴维修|刀塔维修|C轴维修-常州翔高精密机械有限公司 | 食品无尘净化车间,食品罐装净化车间,净化车间配套风淋室-青岛旭恒洁净技术有限公司 | 深圳侦探联系方式_深圳小三调查取证公司_深圳小三分离机构 | 缠膜机|缠绕包装机|无纺布包装机-济南达伦特机械设备有限公司 | 欧盟ce检测认证_reach检测报告_第三方检测中心-深圳市威腾检验技术有限公司 | 快干水泥|桥梁伸缩缝止水胶|伸缩缝装置生产厂家-广东广航交通科技有限公司 | 多功能三相相位伏安表-变压器短路阻抗测试仪-上海妙定电气 | 珠海网站建设_响应网站建设_珠海建站公司_珠海网站设计与制作_珠海网讯互联 | 合肥宠物店装修_合肥宠物美容院装修_合肥宠物医院设计装修公司-安徽盛世和居装饰 | 量子管通环-自清洗过滤器-全自动反冲洗过滤器-沼河浸过滤器 | 求是网 - 思想建党 理论强党 | 钢制暖气片散热器_天津钢制暖气片_卡麦罗散热器厂家 | 搜活动房网—活动房_集装箱活动房_集成房屋_活动房屋 | 全自动在线分板机_铣刀式在线分板机_曲线分板机_PCB分板机-东莞市亿协自动化设备有限公司 | 塑料脸盆批发,塑料盆生产厂家,临沂塑料广告盆,临沂家用塑料盆-临沂市永顺塑业 | U拓留学雅思一站式服务中心_留学申请_雅思托福培训 | 工业铝型材-铝合金电机壳-铝排-气动执行器-山东永恒能源集团有限公司 | 执业药师报名条件,考试时间,考试真题,报名入口—首页 | 别墅图纸超市|别墅设计图纸|农村房屋设计图|农村自建房|别墅设计图纸及效果图大全 | 北京发电车出租-发电机租赁公司-柴油发电机厂家 - 北京明旺盛安机电设备有限公司 | 大连海岛旅游网>>大连旅游,大连海岛游,旅游景点攻略,海岛旅游官网 | 电子巡更系统-巡检管理系统-智能巡检【金万码】 | 上海小程序开发-上海小程序制作公司-上海网站建设-公众号开发运营-软件外包公司-咏熠科技 |