整理JavaScript对DOM中各种类型的元素的常用操作_基础知识

nodeName,nodeValue

节点关系
childNodes: 每个节点都有一个childNodes属性，其中保存着一个NodeList对象

firstChild: 等同于childNodes[0]

lastChild: 等同于childNodes.length-1

同时通过使用列表中每个节点的previousSibling和nextSibling属性，可以访问同一列表中的其他节点。

操作节点
appendChild()

appendChild()方法用于向childNodes列表的末尾添加一个节点。添加节点后，childNodes的新增节点、父节点及以前的最后一个子节点的关系指针都会相应地得到更新。

insertBefore()
insertBefore()这个方法接受两个参数：要插入的节点和作为参照的节点。

repaceChild()
repaceChild()接受两个参数，要插入的节点和要替换的节点

removeChild()
只移除而非替换节点。

cloneNode()

item 1
item 2
item 3

Document类型

Document节点具有下列特征：

• nodeType的值为9；
• nodeName的值为#document;
• nodeValue的值为null;
• parentNode的值为null;
• ownerDocument的值为null;

文档的子节点

文档信息

在IE7中调用document.getElementById("myElement");结果会返回元素，如下所示；
最好的办法是不让表单字段的name特性与其他元素的ID相同。

特殊集合

• document.anchors,包含文档中所有带name特性的a元素;
• document.forms, 包含文档中所有form元素，与document.getElementsByTagName("form")得到的结果相同;
• document.images,包含文档中所有的img元素，与document.getElementsByTagName("img")得到的结果相同;
• document.links，包含文档中所有带href特性的a元素;

文档写入

字符串<\/script>不会被当作外部script标签的关闭标签，因而页面中也就不会出现多余的内容了。

Element类型
Element节点具有以下特征：

• nodeType的值为1;
• nodeName的值为元素的标签名;
• nodeValue的值为null;
• parentNode可能是Document或Element;

要访问元素的标签名，可以使用nodeName属性，也可以使用tagName属性；

取得特性
操作特性的DOM方法主要有三个，分别是getAttribute()、setAttribute()、removeAttribute()；
注意，传递给getAttribute()的特性名与实际的特性名相同。印象要想得到class的特性值，应该传入"class"而不是"className"。

创建元素
使用document.createElement()方法可以创建新元素。

元素的子节点
在执行某项操作以前，通常都要先检查一下nodeType属性，如下面的例子所示:

Text类型
Text节点具有以下特征：

• nodeType的值为3；
• nodeName的值为"#text";
• nodeValue的值为节点所包含的文本；
• parentNode是一个Element；

创建文本节点
可以使用document.createTextNode()创建新文本节点。

规范化文本节点
normalize()

分割文本节点
splitText()

Comment类型
comment节点具有下列特征：

• nodeType的值为8;
• nodeName的值为"#comment";
• nodeValue的值是注释的内容；
• parentNode可能是Document或Element；
• 不支持（没有）子几点；

DOM操作技术
操作表格

选择符API
querySelector()方法

querySelectorAll()方法

HTML5
与类相关的扩充
getElementsByClassName()方法：
该方法可以通过document对象及所有HTML元素调用该方法。

焦点管理

HTML5也添加了辅助管理DOM焦点的功能。首先就是document.activeElement属性，这个属性始终会引用DOM中当前获得了焦点的元素。

默认情况下，文档刚刚加载完成时，document.activeElement中保存的是document.body元素的引用。文档加载期间，docuemnt.activeElement的值为null。
另外就是新增了document.hasFocus()方法，这个方法用于确定文档是否获得了焦点。