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