Dom

Posted Carina

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Dom相关的知识,希望对你有一定的参考价值。

本文很多内容来自阮一峰的教程;仅做学习,无商业用途;

DOM 是 javascript 操作网页的接口,全称为“文档对象模型”(Document Object Model)。它的作用是将网页转为一个 JavaScript 对象,从而可以用脚本进行各种操作(比如增删内容)。

浏览器会根据 DOM 模型,将结构化文档(比如 html 和 XML)解析成一系列的节点,再由这些节点组成一个树状结构(DOM Tree)。所有的节点和最终的树状结构,都有规范的对外接口。所以,DOM 可以理解成网页的编程接口。

节点

DOM的最小组成单位叫做节点(node)。文档的树形结构(DOM树),就是由各种不同类型的节点组成。每个节点可以看作是文档树的一片叶子。

节点的类型有七种。

1 Document:整个文档树的顶层节点
2 DocumentType:doctype标签(比如<!DOCTYPE html>3 Element:网页的各种HTML标签(比如<body><a>等)
4 Attribute:网页元素的属性(比如class="right")
5 Text:标签之间或标签包含的文本
6 Comment:注释
7 DocumentFragment:文档的片段

这七种节点都属于浏览器原生提供的节点对象的派生对象,具有一些共同的属性和方法

节点树

一个文档的所有节点,按照所在的层级,可以抽象成一种树状结构。这种树状结构就是DOM。

最顶层的节点就是document节点,它代表了整个文档。文档里面最高一层的HTML标签,一般是<html>,它构成树结构的根节点(root node),其他HTML标签节点都是它的下级。

除了根节点以外,其他节点对于周围的节点都存在三种关系。

  • 父节点关系(parentNode):直接的那个上级节点
  • 子节点关系(childNodes):直接的下级节点
  • 同级节点关系(sibling):拥有同一个父节点的节点

DOM提供操作接口,用来获取三种关系的节点。其中,子节点接口包括firstChild(第一个子节点)和lastChild(最后一个子节点)等属性,同级节点接口包括nextSibling(紧邻在后的那个同级节点)和previousSibling(紧邻在前的那个同级节点)属性。

特征相关的属性

所有节点对象都是浏览器内置的Node对象的实例,继承了Node属性和方法。这是所有节点的共同特征。

以下属性与节点对象本身的特征相关。

Node.nodeName,Node.nodeType

nodeName属性返回节点的名称,nodeType属性返回节点类型的常数值。具体的返回值,可查阅下方的表格。

以上是关于Dom的主要内容,如果未能解决你的问题,请参考以下文章

JavaScript单行代码,也就是代码片段

实用代码片段将json数据绑定到html元素 (转)

深入理解DOM节点类型第四篇——文档片段节点DocumentFragment

JavaScript 将片段附加到DOM而不是每个节点。

前端开发常用js代码片段

将片段附加到DOM而不是每个节点。