DOM文档对象模型

DOM(Document Object Model)文档对象模型,它定义了操作文档对象的接口。DOM把一份HTML文档表示为一棵家谱树,使用parent(父),child(子),sibling(兄)等记号来表明家庭成员之间的关系。

一、节点

节点(node)一词来自于网络理论,这代表着网络中一个个的连接点,网络是由节点构成的。对于html文档也是一样,文档是由节点构成的集合。

1.元素节点

元素节点如html、head、body、h1、ul、p 、li之类的元素,这些元素在文档中的布局形成了文档的结构。

2.文本节点

文本节点指的是元素节点中的内容,但并非所有的元素节点都包含有文本节点。

3.属性节点

元素都或多或少有一些属性,属性的作用是对元素作出更具体的描述。属性节点总是被包含在元素节点当中。

节点示例:

二、获取文档对象

1.querySelector()

HTML5新加入的方法,通过传入合法的CSS选择器,即可获取符合条件的第一个元素。

2.querySelectorAll()

HTML5新加入的方法,通过传入合法的CSS选择器,即可获取所有符合条件的元素,返回对象数组。

注意:使用这上面两个方法无法查找带伪类状态的元素,比如querySelector(‘:hover’)不会得到期望结果。

3.getElementById()

这个方法返回一个与给定id属性值的元素节点相对应的对象。

4.getElementByTagName()

这个方法返回一个对象数组。每个对象分别对应着文档里给定标签的一个元素。

5.getElementsByName()

通过name获取一个对象数组

三、获取节点信息

在获得一个节点的引用后,有一些方法可以获得该节点的信息。

1.nodeName获取节点名称

语法:Node.nodeName;

不同类型的节点,nodeName返回值有所差异:元素节点–返回标记名称;属性节点–返回属性名称;文本节点–返回文本#text;

2.nodeType获取节点的值

语法:Node.nodeType;

元素节点–返回1;属性节点–返回2;文本节点–返回3

3.nodeValue获取节点的值

语法:Node.nodeValue;

元素节点–返回null;属性节点:返回节点值;文本节点–返回文本内容

四、处理属性节点

1.getAttribute获取节点属性值

语法:object.getAttribute(attribute)

2.setAttribute设置节点属性值

语法:object.setAttribute(attribute,value)

五、处理文本节点

1.node.innerHTML

获取该节点下包含HTML标签的文本内容

2.node.textContent

获取该节点下的纯文本内容

DOM总结:一份文档就是一棵树;节点分为不同的类型,分别是:元素节点,属性节点,文本节点;每个节点都是一个对象;getElementById()方法将返回一个对象,该对象对应着文档里的一个元素节点;getElementsByTagName()方法返回一个对象数组,它们分别对应着文档里的元素节点;

未经允许不得转载:专注は互联网 · 用户 · 产品 - 极简 · 生活 · 禅修 » DOM文档对象模型

赞 (0)

扫码打Call!

分享到:更多 ()

留言 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址