Dom 获取元素的几种方式

一.Dom简介

文档对象模型(Document Object Model,简称DOM )),是W3C组织推荐的处理可扩展标记语言(HTML或者XML)的标准编程接口。

W3C已经定义了一系列的DOM接口,通过这些DOM接口可以改变网页的内容、结构和样式。

二.Dom树

  • 文档:一个页面就是一个文档,Dom中用document表示 ;
  • 元素:页面中的所有标签都是元素,Dom中使用element表示;
  • 节点:网页中的所有内容都是一个节点(标签,属性,文本,注释等),Dom中使用node表示

Dom把以上内容都看作的对象

三.获取元素

获取页面中的元素可以使用以下几种方式:

  • 根据ID获取
  • 根据标签名获取
  • 通过HTML5新增的方法获取
  • 特殊元素获取

1.根据id获取

使用getElementByld()方法可以获取带有ID的元素对象。

Document的方法 getElementById()返回一个匹配特定ID的元素.由于元素的ID在大部分情况下要求是独一无二的,这个方法自然而然地成为了一个高效查找特定元素的方法。

参数:

  • element是一个 Element 对象。如果当前文档中拥有特定ID的元素不存在则返回null.
  • id是大小写敏感的字符串,代表了所要查找的元素的唯一ID.

返回值:返回一个匹配到ID的DomElement对象。若在当前Document 下没有找到,则返回null

 2.根据标签获取

使用getElementsByTagName()方法可以返回带有指定标签名的对象的集合

还可以获取某个元素(父元素)内部所有指定标签名的子元素 

注意∶父元素必须是单个对象(必须指明是哪一个元素对象).获取的时候不包括父元素自己。

也可以这么写

 

 3.h5新增的获取元素的方式

  • 1.getElementsByClassName 根据类名获得某些元素

  • 2.querySelector返回指定选择器的第一个元素对象 切记 里面的选择器需要加符号 .box  #nav 

  • 3.querySelectorAll()返回指定选择器的所有元素对象的集合 

4.获取body和HTML元素

获取body元素

 

 

 获取HTML元素

 

 

  • 4
    点赞
  • 20
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值