对于客户端检测的态度:先设计最通用的方案,然后再使用特定于浏览器的技术增强该方案
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文档时实时运行的查询