你真的理解DOM了吗?

你真的理解DOM了吗?

基本概念

(1)DOM

DOM 是英文Document Object Model的缩写,即文档对象模型。它是一种跨平台的、独立于编程语言的API,它把HTML、XHTML或XML文档当作一个树结构,而每个节点视为一个对象,这些对象可以被编程语言操作,进而改变文档的结构,映射到文档的显示。

简单来说,DOM就是我们为了方便编程语言对HTML等文档进行操作,所以啊,把HTML文档中的节点全部视为一个个的对象,然后这些对象依照层级关系形成一棵树,这棵树就命名为DOM树。有了对象,编程就方便多了,只要一层层拿到对象就可以优雅地改变对象的属性进而动态地改变HTML等文档的展示。

(2)HTML元素

一个HTML元素由开始标签元素内容(可为空)和结束标签(也可以在开始标签中关闭)组成。如<html>元素:

<html>

<body>
<p>这是第一个段落。</p>
</body>

</html>

(3)HTML中的节点

  • 根节点:<html>元素
  • 元素节点:所有HTML元素,比如body、title
  • 属性节点:所有HTML属性,比如align、id
  • 文本节点:插入到HTML元素中的文本,比如<a>text</a>
  • 注释节点:HTML文档中的注释,比如<!--notes-->

(3)文档对象(document)

HTML文档的根节点是document。

(4)元素对象(element)

HTML中的每个元素都代表一个元素对象,元素对象的子节点可以是元素节点、文本节点、注释节点。一个元素对象拥有一个NodeList对象,它包含了该元素对象拥有的所有节点。

(5)属性对象(attr)

attr代表一个HTML属性。一个节点的所有属性包含在该节点的一个NamedNodeMap对象中,nodemap对象中的每个item代表一个属性

(6)事件对象

DOM允许编程语言为HTML文档元素注册事件处理程序,当某一行为发生就触发预先设定好的处理程序。每一个事件都是一个事件对象,比如onclick就是一个onclick对象,它由onclick属性+javascript函数作为属性值组成。

<input type="button" value="点击" id="btn" onclick="document.getElementById('btn').value = '别点我!';"/>

网页加载过程

Web浏览器使用一个类似于DOM的内部模型来渲染HTML页面。网页加载过程是这样的:浏览器先将HTML下载到本地内存,然后自动解析成DOM树并展示页面到屏幕。而DOM暴露出来的API方便了JavaScript等网络编程语言进行动态的修改。

DOM API

(1)创建元素

var el2 = document.createElement('input');
var node = document.createTextNode('hello world!');

(2)查找元素

// 返回当前文档中第一个类名为 "myclass" 的元素
var el = document.querySelector(".myclass");

// 返回一个文档中所有的class为"note"或者 "alert"的div元素
var els = document.querySelectorAll("div.note, div.alert");

// 获取元素
var el = document.getElementById('xxx');
var els = document.getElementsByClassName('highlight');
var els = document.getElementsByTagName('td');
// 获取父元素、父节点
var parent = ele.parentElement;
var parent = ele.parentNode;

// 获取子节点,子节点可以是任何一种节点,可以通过nodeType来判断
var nodes = ele.children;    

// 查询子元素
var els = ele.getElementsByTagName('td');
var els = ele.getElementsByClassName('highlight');

// 当前元素的第一个/最后一个子元素节点
var el = ele.firstElementChild;
var el = ele.lastElementChild;

// 下一个/上一个兄弟元素节点
var el = ele.nextElementSibling;
var el = ele.previousElementSibling;

(3)更改元素

// 添加、删除子元素
ele.appendChild(el);
ele.removeChild(el);

// 替换子元素
ele.replaceChild(el1, el2);

// 插入子元素
parentElement.insertBefore(newElement, referenceElement);

(4)操作属性

// 获取一个{name, value}的数组
var attrs = el.attributes;

// 获取、设置属性
var c = el.getAttribute('class');
el.setAttribute('class', 'highlight');

// 判断、移除属性
el.hasAttribute('class');
el.removeAttribute('class');

// 是否有属性设置
el.hasAttributes();     

参考文档

  1. Document Object Model --wikipedia
  2. HTML DOM Document 对象 --菜鸟教程
  3. 原生JavaScript的DOM操作汇总
编辑于 2016-08-26