Javascript高级程序设计之DOM
Posted 木森焱
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Javascript高级程序设计之DOM相关的知识，希望对你有一定的参考价值。
DOM是文档对象模型，是前端编程接触最多的部分，也是最让人诟病的东西。因为DOM编程的性能问题，一直是一个老生常谈的话题，但一直以来也没有一个很是完美的解决方案。这篇是对DOM的一个简单介绍，并不会太过深入的去介绍。
DOM编程时基于html或XML的，它提供了动态控制HTML或XML的功能。这里我们主要说HTML。HTML是制作网页的最基本也是最核心的部分，没有HTML可以说就没有网页。HTML通过各种标签来构建页面，它的层级结构看上去是很典型的树状结构。在整个HTML最顶层，有一个<html><html/>标签，它标示这HTML的开始，所有的子孙标签都要写在这个标签里。它拥有一个属于自己的名称：文档元素。在HTML中有且只有一个文档元素。
Node是DOM1中绑定的一个接口，JS提供Node类型来实现它，通过该类型，就可以对HTML节点进行动态的操作，不过在IE中并没有实现该类型，因此我们不讲IE。HTML中的所有标签元素，都继承自Node，因此每个标签都可以使用Node提供的属性和方法。Node有一个nodeType的属性，它的值是一系列常量，一共有12个值，用1-12的数字表示，它标示了节点的类型，通过该类型可以很轻松的知道元素是什么节点。当然不是只有这一个属性可以判断类型，利用nodeValue和nodeName属性也可以判断元素类型。nodeName存储的是节点的标签名称的大写形式，想要获取小写形式，可以使用localName。nodeValue的值如果是元素的话则一直为null。
前边说HTML是树状结构，也就是说节点之前会向树枝那样彼此相连接，不过这种连接只有通过DOM才能展现出来。在DOM中每个节点都有一个parentNode和childNodes属性，这两个属性就是用来彼此连接节点的。childNodes属性存储的是一个Nodelist对象，是一个类数组对象。它可以向数组那样用方括号访问其中存储的元素，也拥有length属性，当然也可以用item方法存储的元素：node.childNodes.item(0)。childNodes是动态的，也就是说，子节点的变化，会实时的反应到childNodes存储的Nodelist对象上。parentNode属性则返回节点的父节点对象。除这两个属性外，还提供了访问兄弟节点的previousSibling、nextSibling属性和访问第一个节点和最后一个节点的firstChild和lastChild,及返回根节点的ownerDocument。除了属性之外，DOM还提供了一些方法，如检测是否含有节点的hasChildNodes方法，传入节点，返回布尔值，true为有，false为无。追加节点到尾部的appendChild方法，接收一个要插入的检点作为参数，返回插入的节点。向节点之前插入节点的insertBefore方法，接收参照节点和插入的节点作为参数。替换节点的replaceChild方法，接收要替换的和替换的节点作为参数。删除节点的removeChild方法，接收要删除的节点作为参数。复制节点的cloneNode方法，接收一个布尔值，表示是直线深复制还是浅复制。
Document类型
document是节点中的顶层节点，具有以下特征：nodeType为9、nodeName值为"#document"、nodeValue值为null、parentNode值为null、ownerDocument值为null。document可以表示html和xml文档，不过这里主要讲html文档。document拥有一个documentElement属性，获取对页内html节点的引用，拥有一个body属性获取对body节点的引用，拥有一个doctype属性返回对<!DOCTYPE html>的引用，不过由于浏览器兼容的原因，这个属性用处不是很大，拥有一个title属性，获取和设置标题中的文本，拥有一个url属性，返回页面的url，拥有一个domain属性，返回域名信息，可以通过把这个属性设置为相同的域名，实现框架和子框架之间的通信，需要注意的是，属性设置为松散后，无法在设置会紧绷的，拥有一个referrer属性，返回链接到这个页面的那个页面的url。
以上是关于Javascript高级程序设计之DOM的主要内容，如果未能解决你的问题，请参考以下文章
《JavaScript高级程序设计》Chapter 12 DOM2和DOM3
2020/6/11 JavaScript高级程序设计 DOM