在原生js中我们会经常操作dom结构，通过获取具体标签进行操作，那我们知道常用的js获取元素的方式有哪些吗，并且这些方法之间的区别是什么呢，以及有哪些注意点呢!接下来我们就一起看一下吧!
JavaScript获取元素的的几种方式以及区别
(1) 通过ID名获取getElementById(“id名”)：
通过id名是获取具体的实际的一个标签，是静态获取，即获取的时候有就可以获取得到，后续再添加该id名的标签也获取不到了。为何会说通过id名获取是静态获取呢，我们通过具体的例子来看：
- <ul id="list"></ul>
Js代码为：
- var oUl = document.getElementById("list");
- var byId = document.getElementById("h");
- console.log(byId);
- //在ul中添加一个li
- oUl.innerHTML = "<li id='h' style='width:100px;height:100px;background:red'></li>";
- console.log(byId);
最后的结果为：null null
可以得出结论通过id名的获取是静态获取，在后期添加的获取不到
注意：
① 上下文必须是document，至于原因我们留到最后再解释;
② 通过id只获取到一个元素，毕竟id是独一无二的;
③ 通过id获取是静态获取;
(2) 通过name属性获取 getElementsByName('name属性值')
当我们的标签有name属性时，可以通过其name属性来获取标签，如在单选按钮中
- <input type="radio" name='sex' >男
- <input type="radio" name='sex' checked>女
Js代码为：
- var oSex = document.getElementsByName('sex');
- console.log(oSex);
结果如下图是节点列表，为一个类数组：
注意：
① 上下文必须是document;
② 获取的结果是一个类数组，不是一个真正的数组，有length属性，可以通过具体的下标获取对应的元素;
(3) 通过标签名获取：getElementsByTagName('标签名')
通过标签名获取的元素是一个元素集合，为类数组形式，有length属性;且通过标签名获取为动态获取，即获取的时候没有该标签，若后续进行手动添加后也能获取到。举例：
- <ul id="list"></ul>
Js代码如下：
- var oUl = document.document.getElementById("list");
- var byTagName = document.getElementsByTagName("li");
- console.log(byTagName);
- //在ul中添加一个li
- oUl.innerHTML = "<li id='h' style='width:100px;height:100px;background:red'></li>";
- console.log(byTagName);
最后的结果为：
可以看到在手动添加li标签之后，可以动态地获取到添加之后的标签，但是我们也看到了通过标签名获取的元素是一个集合，就算只有一个元素也是一个集合，是以一个类数组的形式存在，并不是真正的数组。
注意：
① 上下文可以是document，也可以是一个父元素;
② 是一个类数组，有长度属性，通过[]可以获取具体的某一项;
③ 在使用时要通过具体的下标，比如添加点击事件时;
(4) 通过类名获取 getElementsByClassName(‘类名’)
通过类名获取元素的方式与用法基本一样，也是动态获取;
注意：
① 上下文可以是document，也可以是一个父元素;
② 是一个类数组，有长度属性，通过[]可以获取具体的某一项;
③ 在使用时要通过具体的下标，比如添加点击事件时;
④ 注意单词拼写，因为class是一个关键字，所以为getElementsByClassName
(5) 快速获取html元素 document.documentElement
- document对象有一个documentElement属性，该属性始终指向HTML页面中的<html>元素。
- var html = document.documentElement; //取得对<html>的引用
(6) 快速获取body元素 document.body
- document 对象还有一个 body 属性，直接指向<body>元素。
- 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方法。其它同理。
更多内容
>>本文地址：http://www.gsnutsandcandy.com/zhuanye/2021/70199.html
声明:本站稿件版权均属中公教育优就业所有，未经许可不得擅自转载。
1 您的年龄
2 您的学历
3 您更想做哪个方向的工作？
大前端
大数据
互联网营销
Java
Linux
Python
嵌入式
全域电商运营
软件测试
室内设计
平面设计
电商设计
网页设计
UI设计
VR/AR
网络安全
新媒体
直播带货
智能机器人中公教育是大型的多品类职业教育机构，提供超过100个品类的综合职业就业培训服务。公司在全国超过1000个直营网点展开经营，深度覆盖300多个地级市。
优就业是中公教育IT培训品牌，致力于培养面向互联网领域的高端人才，以学员就业为目的，优质就业为宗旨，是一家集Java、Web前端、UI设计等十余类课程为一体的IT培训机构。
中公教育20年培训经验积淀值得信赖
开设有1113家直营分部和学习中心
培训学员超过308万人次
与全国10000余加企业达成就业合作
中公教育IT培训品牌
400-650-7353
Copyright©1999-
北京中公教育科技有限公司 .All Rights Reserved
京ICP备10218183号-88
京ICP证161188号
京公网安备11010802020723号
投诉建议：400-650-7353
Java培训
软件测试培训
Web培训
Linux培训
Python培训
互联网营销培训
UI培训
大数据培训
官方公众号 回复"大礼包"享福利 
领学习资料 分享IT知识 
阅读()
分享
手机端入口
