资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划,从策略到执行的一站式服务

JS获取DOM的几种方法-创新互联

JS获取DOM和几种方法

  • 通过ID获取(getElementById)
  • 通过name属性(getElementsByName)
  • 通过标签名(getElementsByTagName)
  • 通过类名(getElementsByClassName)
  • 获取html的方法(document.documentElement)
  • 获取body的方法(document.body)
  • 通过选择器获取一个元素(querySelector)
  • 通过选择器获取一组元素(querySelectorAll)

下面依次讲解:
1.通过ID获取(getElementById)

让客户满意是我们工作的目标,不断超越客户的期望值来自于我们对这个行业的热爱。我们立志把好的技术通过有效、简单的方式提供给客户,将通过不懈努力成为客户在信息化领域值得信任、有价值的长期合作伙伴,公司提供的服务项目有:域名注册虚拟主机、营销软件、网站建设、赣县网站维护、网站推广。

上下文必须是document。
必须传参数,参数是string类型,是获取元素的id。
返回值只获取到一个元素,没有找到返回null。

2.通过name属性(getElementsByName)

只有含有name属性的元素(表单元素)才能通过name属性获取
上下文必须是document。
必须传参数,参数是是获取元素的name属性。
返回值是一个类数组,没有找到返回空数组

3.通过标签名(getElementsByTagName)

段落A

段落B

段落C

段落D

段落E

段落F

该方法返回的也是一个集合。

4.通过类名(getElementsByClassName)

getElementsByClassName()括号中的不需要在前面加 “.” ,因为方法就决定了括号中的值是一个元素的class值。该方法返回一个集合。不能直接给集合绑定事件,需要获取到集合中的某一个元素,然后再为元素绑定事件
IE8以及以前版本不兼容

5.获取html的方法(document.documentElement)

document.documentElement是专门获取html这个标签的。

6.获取body的方法(document.body)

document.body是专门获取body这个标签的。

7.通过选择器获取一个元素(querySelector)

querySelector()方法括号中的值是元素的选择器,所以前面加了”#”符号,使用的是id选择器。此方法直接返回DOM对象本身
不兼容IE7以及以前版本

8.通过选择器获取一组元素(querySelectorAll)

boxA
boxB
boxC
boxD
boxE

不兼容IE7
querySelector()和querySelectorAll()方法括号中的取值都是选择器。
当有多个class相同的元素时,使用querySelector()方法只能获取到第一个class为box的元素,而querySelectorAll()获取到了所有class为box的元素集合。

DOM元素的继承关系

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方法。
其它同理。

总结:

所有获取DOM对象的方法中,只有getElementById()和querySelector()这两个方法直接返回的DOM对象本身,可直接为其绑定事件。
getElementXXX类型的方法,除了通过Id获取元素,其他都返回一个集合,如果需要取到具体的DOM元素,需要加索引,如:document.getElementsByClassName(“box”)[0] =>获取class为box的所有元素中的第一个DOM元素。
querySelector()与querySelectorAll()两者的联系与区别:
联系: 两者括号中的取值都是选择器
区别: 当有多个class相同的元素时,使用querySelector()方法只能获取到第一个class为box的元素,而querySelectorAll()获取到了所有class为box的元素集合。

另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。


网页名称:JS获取DOM的几种方法-创新互联
网站网址:http://www.cdkjz.cn/article/ddidsh.html
多年建站经验

多一份参考,总有益处

联系快上网,免费获得专属《策划方案》及报价

咨询相关问题或预约面谈,可以通过以下方式与我们联系

大客户专线   成都:13518219792   座机:028-86922220