JavaScript学习要点（九）

对于客户端检测的态度：先设计最通用的方案，然后再使用特定于浏览器的技术增强该方案

Dom（文档对象模型）是针对HTML和XML文档的一个API

Dom描绘了一个层次化的节点树，允许开发人员添加、移除和修改页面的某一部分

JS中所有的节点类型都继承自Node类型，因此所有的节点类型都共享着相同的基本属性和方法

每个node的nodeType都包含于12个数值常量中

if (someNode.nodeType == 1){  //适用于所有浏览器

     alert(“Node is an element")

}

nodeName是元素的标签名

每个节点都有一个childNodes属性，其中保存着一个NodeList对象，NodeList是类数组对象用于保存一组有序的节点，可通过位置来访问,可通过方括号像数组那样或者采用item()方法并传入对应位置参数

previousSibling和nextSibling属性可以用来访问同一列表中的其它节点

父节点也拥有firstChild和lastChild属性分别指向其childNodes列表中的第一个和最后一个节点

appendChild用于向childNodes列表的末尾添加一个节点，但如果传入的节点已经是文档的一部分了，那结果就是将该节点从原来的位置转移到新位置，同一DOM节点不能同时出现在文档中的多个位置上

Node还存在insertBefore() replaceChild() removeChild()方法

JavaScript通过Document类型表示文档，在浏览器中，document 对象是HTMLDocument的一个实例，表示整个HTML界面，document是window对象的一个属性，document也是一个Node，nodeType = 9，通过这个对象可以取得与页面有关的信息，而且还能操作页面的外观和底层结构

Element类型用于表现XML或HTML元素，提供了对元素标签名、子节点及特性的访问，nodeType = 1，nodeName为元素的标签名，parentNode可能是Document或Element

文本节点由Text类型表示，包含的是可以照字面解释的纯文本内，纯文本中可以包含转义后的HTML字符，但不能包含HTML代码，nodeType = 3，parentNode是一个Element，nodeValue是节点所包含的文本，没有子节点

注释在DOM中是通过Comment类型来表示，nodeType = 8 nodeValue的值是注释的内容，没子节点，父节点可能是Document或者是Element

CDATASection类型只针对基于XML的文档，表示的是CDATA区域，与Comment类似，CDATASection类型继承自Text类型

DocumentType在Web浏览器中不常用，包含着与文档doctype有关的所有信息，nodetype = 10

还存在DocumentFragment和Attr类型

使用<script>元素可以向页面中插入JavaScript代码，一种方式是通过其src特性包含外部文件，另一种方式就是用这个元素本身来包含代码，动态脚本是在页面加载时不存在，但在将来的某一时刻通过修改DOM动态添加的脚本

能够把CSS样式包含到HTML页面中的元素有两个，其中，<link>元素用于包含来自外部的文件，而<style>元素用于制动嵌入的样式 与动态脚本类似，所谓动态样式是指在页面刚加载时不存在的样式，动态样式是在页面加载完成后动态添加到页面中的

function loadStyle(url){

    var link = document.createElement("link");

    link.rel = "stylesheet";

    link.type = "text/css";

    link.href = "style.css";

    var head = document.getElementsByTagName("head")[0];

    head.appendChild(link);

}

尽量不要用DOM方法创建表格，代码量会相当多，用HTML会好的多

理解NodeList和NamedNodeMap以及HTMLCollection是理解DOM的关键，这三个集合都是动态的，当文档结构发生变化时，它们都会得到更新，因此，它们始终会保存着最新最准确的信息 从本质上说，所有的NodeList对想爱你个都是在访问DOM文档时实时运行的查询