DOM参考手册精耕细作

来源：互联网发布：没有女朋友知乎编辑：程序博客网时间：2024/06/07 03:52

由于以前细看的参考手册年代久远，一些不常用的概念会慢慢变模糊，有些没用的已经遗忘，重新细看了一遍，记了些许笔记。

一直已经习惯用Evernote作为日常生活的笔记，所以blog一直木有怎么打理过。刚好心血来潮就放上来了哈。

1 资源

DOM分多级， Peter-Paul Koch创建的Quirksmode.org 彻底测试了各种浏览器中可用的DOM方法

2 术语

Nodes 元素，属性，注释，文档和文本都是结点。注意：文本也是，每一个结点都有nodeType， nodeName， nodeValue属性

兄弟 Sibling，用这个术语的结点都有的2个特性 previousSibling 和 nextSibling

3 全局变量

HTMLElement是所有HTML DOM 的父类对象

4 DOM的操作

body属性不常用 document.body

子元素集合的属性是childNodes 注意不是children

documentElement在HTML中总是指向<html>元素

操作子元素 removeChild

特殊位置子元素 firstChild lastChild

getElementByTagName(tagName) 在所有的后代元素中查找指定标签名的元素，用*作为标签名查所有后代元素，比纯js遍历快

nextSibling previousSibline注意：指向的可能是dom元素，也有可能是注释设置是文本节点，不是一个定位DOM的好方法

parentNode document元素的该属性为null

5 结点信息

nodeType 所有DOM元素都可以用的引用，指向一个跟文档类型相关的数字，常用的3种结点类型：

元素值为1 or document.ELEMENT_NODE

文本值为3 or document.TEXT_NODE

文档值为9 or document.DOCUMENT_NODE

nodeValue对于文本节点很有用的属性，它可以用来访问和操作其所包含的文本

6 属性

DOM 0 style

访问方式 element.id 注意： class由于关键字，用className而不是class

移除属性使用 removettribute(attrName)

setAttribute注意：在IE中不能设置某些特殊的特性，如class or maxLength

文本元素创建用createTextNode 其余用 createElement

7 DOM修改

appendChild

cloneNode(true|false) 普通的insertBefore 或者 appendChild会把文档中的DOM节点移开。

而clondeNode能够克隆新的节点而保持原有节点的位置， true为节点内所有东西都会克隆，而false只克隆结点本身

使用的是application/xhtml+xml 内容的不是常规的HTML, 使用createElementNS来代替createElement函数

createElementNS(namespace, tagName) 同时指定一个命名空间

innerHTML 并非W3C 某个标准的组成部分，但是所有现代浏览器都支持，注意：只能用在HTML,XML不能用

移除文档本身需通过parentNode的removeChild来实现，看起来有点长挫丑 div.parentNode.removeChild(div);

insertBefore(node, refererNode) 如果refererNode为null，作为最后一个节点插入

replaceChild(new, original) 用的少，很容易忽略这个方法

0 0