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

400-650-7353
您所在的位置：首頁 > IT干貨資料 > web前端 > 【Web前端基礎知識】dom獲取元素的方式

【Web前端基礎知識】dom獲取元素的方式

  • 發布： Web前端培訓
  • 來源：優就業
  • 2021-09-28 14:22:04
  • 閱讀()
  • 分享
  • 手機端入口

在原生js中我們會經常操作dom結構，通過獲取具體標簽進行操作，那我們知道常用的js獲取元素的方式有哪些嗎，并且這些方法之間的區別是什么呢，以及有哪些注意點呢!接下來我們就一起看一下吧!

JavaScript獲取元素的的幾種方式以及區別

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

通過id名是獲取具體的實際的一個標簽，是靜態獲取，即獲取的時候有就可以獲取得到，后續再添加該id名的標簽也獲取不到了。為何會說通過id名獲取是靜態獲取呢，我們通過具體的例子來看：

  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); 

最后的結果為：null null

可以得出結論通過id名的獲取是靜態獲取，在后期添加的獲取不到

注意：

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

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

③　通過id獲取是靜態獲取;

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

當我們的標簽有name屬性時，可以通過其name屬性來獲取標簽，如在單選按鈕中

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

Js代碼為：

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

結果如下圖是節點列表，為一個類數組：

注意：

①　上下文必須是document;

②　獲取的結果是一個類數組，不是一個真正的數組，有length屬性，可以通過具體的下標獲取對應的元素;

(3) 通過標簽名獲取：getElementsByTagName('標簽名')

通過標簽名獲取的元素是一個元素集合，為類數組形式，有length屬性;且通過標簽名獲取為動態獲取，即獲取的時候沒有該標簽，若后續進行手動添加后也能獲取到。舉例：

  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); 

最后的結果為：

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

注意：

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

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

③　在使用時要通過具體的下標，比如添加點擊事件時;

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

通過類名獲取元素的方式與用法基本一樣，也是動態獲取;

注意：

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

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

③　在使用時要通過具體的下標，比如添加點擊事件時;

④　注意單詞拼寫，因為class是一個關鍵字，所以為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，也可以是一個父元素;

②　參數是選擇器，如“div .active”;

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

④　與通過id獲取的方式一樣為靜態獲取;

⑤　Ie8以下存在兼容問題;

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

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

注意：

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

②　參數是選擇器，如“div .active”;

③　返回值為一組節點列表，是一個類數組;

④　與通過id獲取的方式一樣為靜態獲取;

⑤　Ie8以下存在兼容問題;

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

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

他們的繼承關系：

HTMLDivElement > HTMLElement > Element > Node > EventTarget

HTMLDocument > Document > Node > EventTarget

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

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

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

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

文章“【Web前端基礎知識】dom獲取元素的方式”已幫助 人

更多內容

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

THE END  

聲明:本站稿件版權均屬中公教育優就業所有，未經許可不得擅自轉載。

1 您的年齡

2 您的學歷

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

獲取測試結果
  • 大前端大前端
  • 大數據大數據
  • 互聯網營銷互聯網營銷
  • JavaJava
  • Linux云計算Linux
  • Python+人工智能Python
  • 嵌入式物聯網嵌入式
  • 全域電商運營全域電商運營
  • 軟件測試軟件測試
  • 室內設計室內設計
  • 平面設計平面設計
  • 電商設計電商設計
  • 網頁設計網頁設計
  • 全鏈路UI/UE設計UI設計
  • VR/AR游戲開發VR/AR
  • 網絡安全網絡安全
  • 新媒體與短視頻運營新媒體
  • 直播帶貨直播帶貨
  • 智能機器人軟件開發智能機器人
 

快速通道fast track

近期開班時間TIME

主站蜘蛛池模板： 电池挤压试验机-自行车喷淋-车辆碾压试验装置-深圳德迈盛测控设备有限公司 | 品牌广告服务平台，好排名，好流量，好生意。 | 合金ICP光谱仪(磁性材料,工业废水)-百科 | 无轨电动平车_轨道平车_蓄电池电动平车★尽在新乡百特智能转运设备有限公司 | 海水晶,海水素,海水晶价格-潍坊滨海经济开发区强隆海水晶厂 | LINK FASHION 童装·青少年装展| 【同风运车官网】一站式汽车托运服务平台,验车满意再付款 | 防水套管|柔性防水套管|伸缩器|伸缩接头|传力接头-河南伟创管道 防水套管_柔性防水套管_刚性防水套管-巩义市润达管道设备制造有限公司 | 许昌奥仕达自动化设备有限公司 | 鑫达滑石-辽宁鑫达滑石集团 | 卫生人才网-中国专业的医疗卫生医学人才网招聘网站！ | 品牌策划-品牌设计-济南之式传媒广告有限公司官网-提供品牌整合丨影视创意丨公关活动丨数字营销丨自媒体运营丨数字营销 | 干粉砂浆设备_干混砂浆生产线_腻子粉加工设备_石膏抹灰砂浆生产成套设备厂家_干粉混合设备_砂子烘干机--郑州铭将机械设备有限公司 | 广州企亚 - 数码直喷、白墨印花、源头厂家、透气无手感方案服务商！ | 沈阳真空机_沈阳真空包装机_沈阳大米真空包装机-沈阳海鹞真空包装机械有限公司 | 集装箱展厅-住人集装箱住宿|建筑|房屋|集装箱售楼处-山东锐嘉科技工程有限公司 | 手持式3d激光扫描仪-便携式三维立体扫描仪-北京福禄克斯 | 回转炉,外热式回转窑,回转窑炉-淄博圣元窑炉工程有限公司 | EDLC超级法拉电容器_LIC锂离子超级电容_超级电容模组_软包单体电容电池_轴向薄膜电力电容器_深圳佳名兴电容有限公司_JMX专注中高端品牌电容生产厂家 | 河南卓美创业科技有限公司-河南卓美防雷公司-防雷接地-防雷工程-重庆避雷针-避雷器-防雷检测-避雷带-避雷针-避雷塔、机房防雷、古建筑防雷等-山西防雷公司 | C形臂_动态平板DR_动态平板胃肠机生产厂家制造商-普爱医疗 | 超声波电磁流量计-液位计-孔板流量计-料位计-江苏信仪自动化仪表有限公司 | 硬质合金模具_硬质合金非标定制_硬面加工「生产厂家」-西迪技术股份有限公司 | 机构创新组合设计实验台_液压实验台_气动实训台-戴育教仪厂 | 污水处理设备，一体化泵站，一体化净水设备-「梦之洁环保设备厂家」 | 牛奶检测仪-乳成分分析仪-北京海谊 | 济南品牌设计-济南品牌策划-即合品牌策划设计-山东即合官网 | 深圳南财多媒体有限公司介绍 | 不锈钢复合板厂家_钛钢复合板批发_铜铝复合板供应-威海泓方金属复合材料股份有限公司 | 超声波流量计_流量标准装置生产厂家 _河南盛天精密测控 | 防爆鼓风机-全风-宏丰鼓风机-上海梁瑾机电设备有限公司 | wika威卡压力表-wika压力变送器-德国wika代理-威卡总代-北京博朗宁科技 | 粉碎机_塑料粉碎机_塑料破碎机厂家-星标机械 | 不锈钢水管-不锈钢燃气管-卫生级不锈钢管件-不锈钢食品级水管-广东双兴新材料集团有限公司 | 不锈钢复合板厂家_钛钢复合板批发_铜铝复合板供应-威海泓方金属复合材料股份有限公司 | 游泳池设计|设备|配件|药品|吸污机-东莞市太平洋康体设施有限公司 | 三轴曲线机-端子插拔力试验机|华杰仪器 | 宽带办理,电信宽带,移动宽带,联通宽带,电信宽带办理,移动宽带办理,联通宽带办理 | 样品瓶(色谱样品瓶)百科-浙江哈迈科技有限公司 | [品牌官网]贵州遵义双宁口腔连锁_贵州遵义牙科医院哪家好_种植牙_牙齿矫正_原华美口腔 | 软文推广发布平台_新闻稿件自助发布_媒体邀约-澜媒宝 |