一.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元素

 

 

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐