javascript DOM编程小结

什么是 DOM

DOM 即 Document Object Model,文档对象模型的缩写,即是一个文档的对象表示形式。DOM 所包含的信息与文档所包含的信息一致,因此可以使用编程语言来操作 DOM 对象,从而达到操作文档的目的。

  • Document

文档,文档是 DOM 的基石,没有文档一切无从谈起。在 web 中文档通常是 (X)HTML。当浏览器加载一个 web 网页时,web 文档就被转化为 DOM 对象。

  • Object

对象,对象是一种自足的数据集合。JavaScript 中对象可以分为三种类型:用户自定义对象,由进程员自行创建;内建对象,内建在 JavaScript 语言中的对象,如,Array;宿主对象,web 中由浏览器提供的对象(node为node环境)。

  • Model

模型,DOM 把一份文档表示为一棵家谱树,使用 parent, child, sibling 等来表示家族成员的关系,这里的树即为模型。

节点类型

元素节点
属性节点
文本节点

节点属性

  • nodeType 属性

每个节点都有 nodeType 属性表示节点的类型
元素节点的 nodeType 属性值为 1
属性节点的 nodeType 属性值为 2
文本节点的 nodeType 属性值为 3

  • nodeValue 属性

节点的值。值得注意的是,要通过 nodeValue 属性获取类似于 <p> 这种元素节点的文本值,得获取其子节点(文本节点)的 nodeValue 值

  • parentNode 属性

获取一个元素的父节点

  • childNodes 属性

获取一个元素的所有子节点,它是一个包含这个元素的全部子节点的数组。只有元素节点才有子节点

  • nextSibling 属性

获取一个元素的下一个兄弟节点,可能是文本节点

  • firstChild 和 lastChild 属性

node.firstChild 等价于 node.childNodes[0]
node.lastChild 等价于 node.childNodes[node.childNodes.length-1]

  • style 属性

返回一个对象,对象中包含元素的样式。可以使用 element.style.property 来读取/设置样式(property)的值。
当需要引用中间带 “-“ 的 css 属性时,需要用驼峰命名法,如 font-family 就用 fontFamily。
style 属性只能返回内嵌的样式,在 css 文档或者 style 标签中的样式都无法返回。

获取元素节点的主要方式

  • getElementById

document.getElementById(id),通过 id 获取元素节点,返回一个元素节点的 DOM 对象

  • getElementsByTagName

document.getElementsByTagName(tagName),通过标签名获取元素节点,返回一个元素节点 DOM 对象的数组。如果使用 “*” 通配符则返回包含该文档所有节点的数组。

  • getElementsByClassName

document.getElementsByClassName(className),通过类名获取元素节点,返回一个元素节点 DOM 对象的数组。指定多个类名时,只需要使用空格分开即可,并且类名的顺序不重要。

获取和设置元素节点的属性

使用上面介绍的方法获取到元素节点对象后,可以使用以下方式获取/设置元素节点的属性值

  • getAttribute

elementObj.getAttribute(attribute),获取 attribute 属性的属性值

  • setAttribute

elementObj.setAttribute(attribute, value),将 attribute 属性的属性值设置为 value

创建和插入节点

在创建的节点插入文档之前,它还不属于 DOM 节点树的组成部分,此时称为文档碎片。虽然它还不能在浏览器中显示,但是它已经拥有了自己的 DOM 属性。

  • createElement

document.createElement(nodeName),创建一个新的元素节点

  • createTextNode

document.createTextNode(text),创建一个新的文本节点

  • appendChild

parent.appendChild(child),在 parent 元素的末尾插入 child 节点

  • insertBefore

parent.insertBefore(new, target),在 parent 中,将 new 插入在 target 之前,其中 parent 可以通过 target.parentNode 获取

DOM Core 与 HTML-DOM

前面介绍的属性和方法都输入 DOM Core 的组成部分,它们并不专属于 JavaScript,支持 DOM 的任何一种进程设计语言都可以使用它们,同时它们还可以处理任何一种标记语言(如,XML)编写出来的文档。
在使用 JavaScript 和 DOM 为 HTML 编写脚本时,还有许多属性可以选择,如 onclick 属性,可以用于点击事件绑定,这些都输入 HTML-DOM 的组成部分。很多情况下,HTML-DOM 属性和 DOM Core 可以互相替换,如下几个例子:
document.getElementsByTagName(“form”) 等价于 document.forms
还有
element.getAttribute(“src”) 等价于 element.src
以及
element.setAttribute(“href”, value) 等价于 element.href = value 等。
通常,HTML-Core 代码会更短一些,但是,它们只能用来处理 web 文档

传统技术

  • document.write

document.write 方法可以方便快捷的将字符串插入文档中,而且能极好的兼容低版本的浏览器,但是其最大的缺点是违背了“行为与表现分离”的原则,且 MIME 类型为 application/xhtml+xml 与 document.write 不兼容。

  • innerHTML

innerHTML 现在已经包含在 HTML5 的规范中,几乎所有的浏览器都支持。它可以用来读写指定元素里的 HTML 内容,同样 innerHTML 也是 HTML 专属的,不兼容 application/xhtml+xml。

平稳退化与渐进增强

  • 平稳退化

如果在网站的访问者在浏览器端禁用了 JavaScript 的时候,依然可以顺利的浏览网页,这就是”平稳退化”,虽然效果可能有所缺失,但是基本功能能够顺利使用。
一个例子:使用
window.open(url,name,features)
方法在一个新的窗口打开一个连接链接。封装一个方法

1
2
3
function (winURL){
window.open(winURL,"popup","width=320,height=480");
}

在 <a> 标签中使用该方法,当点击 a 标签时,会在新窗口上打开该链接。

1
2
<a onclick="popUp("http://www.runnerjian.com");
return false;">runnerjian</a>

那么问题是,当浏览器的 JavaScript 被禁用的时候,该功能就是失效了。平稳退化的解决办法是给标签的 href 属性加一个真实的值。

1
2
<a href="http://www.runnerjian.com" onclick="popUp(this.href);
return false;">runnerjian</a>

这样,尽管不是在新的窗口打开该链接,但是打开链接的功能还是可以实现的。
另一个”平稳退化”的理解是,在保证较新版浏览器上良好运行的时候,尽可能保证叫老版本的浏览器依然可以正常浏览网页。

  • 渐进增强

“渐进增强”是”平稳退化”退化的反向,一般先保证最基本的功能可以实现,然后在此基础上,使用一些额外的信息层去包裹原始数据,从而使得网页更加人性化,表现出更好的效果。
通常按照”渐进增强”原则创建出来的网页几乎都符合”平稳退化”原则。

HTML5 以及一些库

书中对这部分没有做详细介绍,所以这里罗列一些相关的关键字。

<section>, <article>, <header>, <footer>
<canvas>, <audio>, <video>
Geolocation, Storage, Drap-and-Drop, Socket, 多线程等

  • 一些库

jQuery, Prototype, YUI, Dojo Toolkit

  • 选择库的原则

是否具备所需要的所有功能;
功能是否过多,过于庞大,很多不需要的功能;
模块化的吗
支持情况怎么样?社区,维护人员等;
是否有文档;
许可是否合适;

一个好用方法

  • addLoadEvent
1
2
3
4
5
6
7
8
9
10
11
function addLoadEvent(func){
var oldonload = window.onload;
if(typeof window.onload != "function"){
window.onload = func;
}else{
window.onload = function(){
oldonload();
func();
}
}
}

为了给全局添加 onload 回调 func,在文档加载完后可以执行 func,但又不能覆盖之前已经添加的 onload 回调。