节点类型
nodeType
以下是一些重要的nodeType的取值： 1： 元素element 2： 属性attr 3： 文本text 8： 注释comments 9： 文档documentnodeName,nodeValue
节点关系
childNodes: 每个节点都有一个childNodes属性，其中保存着一个NodeList对象firstChild: 等同于childNodes[0]
lastChild: 等同于childNodes.length-1
同时通过使用列表中每个节点的prevIoUsSibling和nextSibling属性，可以访问同一列表中的其他节点。
操作节点
appendChild()
appendChild()方法用于向childNodes列表的末尾添加一个节点。添加节点后，childNodes的新增节点、父节点及以前的最后一个子节点的关系指针都会相应地得到更新。
insertBefore()
insertBefore()这个方法接受两个参数：要插入的节点和作为参照的节点。returnedNode = someNode.insertBefore(newNode,someNode.firstChild);
// 插入到最后一个子节点前面
returnedNode = someNode.insertBefore(newNode,someNode.lastChild);
repaceChild()
repaceChild()接受两个参数，要插入的节点和要替换的节点removeChild()
只移除而非替换节点。cloneNode()
item 1 item 2 item 3
console.log(shallowList.childNodes.length); //0
Document类型
Document节点具有下列特征：
@H_301_60@文档的子节点
文档信息
// 设置文档标题
document.title = "New page title";
// 取得完整的url
var url = document.URL;
// 取得域名
var domain = document.domain;
// 取得来源页面的url
var referrer = document.referrer;
//假设页面来自p2p.wrox.com域
document.domain = "wrox.com"; // 成功
document.domain = "nczonline.net"; // 失败
在IE7中调用document.getElementById("myElement");结果会返回元素，如下所示； 最好的办法是不让表单字段的name特性与其他元素的ID相同。
特殊集合
@H_301_60@文档写入
字符串<\/script>不会被当作外部script标签的关闭标签，因而页面中也就不会出现多余的内容了。
Element类型
Element节点具有以下特征： @H_301_60@要访问元素的标签名，可以使用nodeName属性，也可以使用tagName属性；
if (element.tagName=="div") { // 不能这样比较，很容易出错
}
if (element.tagName.toLowerCase =="div") { // 这样最好（适用于任何文档）
}
取得特性
操作特性的DOM方法主要有三个，分别是getAttribute()、setAttribute()、removeAttribute()； 注意，传递给getAttribute()的特性名与实际的特性名相同。印象要想得到class的特性值，应该传入"class"而不是"className"。创建元素
使用document.createElement()方法可以创建新元素。元素的子节点
在执行某项操作以前，通常都要先检查一下nodeType属性，如下面的例子所示:Text类型
Text节点具有以下特征： @H_301_60@创建文本节点
可以使用document.createTextNode()创建新文本节点。规范化文本节点
normalize()分割文本节点
splitText()Comment类型
comment节点具有下列特征： @H_301_60@DOM操作技术
操作表格
var tbody = document.createElement("tbody");
table.appendChild(tbody);
// 创建第一行
tbody.insertRow(0);
tbody.rows[0].insertCell(0);
tbody.rows[0].cells[0].appendChild(document.createTextNode("cell 1,1"));
tbody.rows[0].insertCell(1);
tbody.rows[0].cells[1].appendChild(document.createTextNode("cell 2,1"));
// 创建第二行
tbody.insertRow(01);
tbody.rows[1].insertCell(0);
tbody.rows[1].cells[0].appendChild(document.createTextNode("cell 1,2"));
tbody.rows[1].insertCell(1);
tbody.rows[1].cells[1].appendChild(document.createTextNode("cell 2,2"));
document.body.appendChild(table);
选择符API
querySelector()方法
var myDIV = document.querySelector("#myDiv");
// 取得类为"selected"的第一个元素
var selected = document.querySelector(".selected");
// 取得类为"button"的第一个图像元素
var img = document.body.querySelector("img.button");
querySelectorAll()方法
// 取得类为"selected"的所有元素
var selecteds = document.querySelectorAll(".selected");
// 取得所有
元素中的所有
元素
var h3s = document.querySelectorAll("p h3");
HTML5
与类相关的扩充
getElementsByClassName()方法： 该方法可以通过document对象及所有HTML元素调用该方法。var selected = document.getElementById("myDiv").getElementsByClassName("selected");
焦点管理
HTML5也添加了辅助管理DOM焦点的功能。首先就是document.activeElement属性，这个属性始终会引用DOM中当前获得了焦点的元素。
默认情况下，文档刚刚加载完成时，document.activeElement中保存的是document.body元素的引用。文档加载期间，docuemnt.activeElement的值为null。 另外就是新增了document.hasFocus()方法，这个方法用于确定文档是否获得了焦点。
