DOM(二)

document object model （文档对象模型）

dom节点类型

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

【注】节点可以分为元素节点，属性节点和文本节点，而这些节点又有三个非常有用的属性，分别为：nodeName,nodeType 和 nodeValue。

dom元素节点属性和attributes

ownerDocument 属性返回该节点的文档对象根节点，返回的对象相当于document。
alert(box.ownerDocument===document);//true,根节点
parentNode 属性返回该节点的父节点。
alert(box.parentNode.nodeName);//获取父节点的标签名
previousSibling 属性返回该节点的前一个同级节点。
alert(box.lastChild.previousSibling);//获取前一个同级节点
nextSibling 属性返回该节点的后一个同级节点。
alert(box.firstChild.nextSibling);//获取后一个同级节点

属性节点

attribute属性返回该节点的属性节点集合。
集合特点：1.不重复 2.无序

属性

attributes.length 返回属性节点个数
访问属性节点
1.alert（oDiv.attributes.getNamedItem(“id”)）;
2.alert（oDiv.attributes[“id”]）;

节点操作

Dom不单单可以查找节点，也可以创建节点，复制节点，插入节点，删除节点和替换节点。

方法	说明
write()	这个方法可以把任意字符串插入到文档中
createElement()	创建一个元素节点
appendChild()	将新节点追加到子节点列表的末尾
createTextNode()	创建一个文件节点
insertBefore()	将新节点插入在前面
repalceChild()	将新节点替换旧节点
cloneNode()	复制节点
removeChild()	移除节点

例
createElement()
【格式】document.createElement(标签名)；
功能：创建一个元素节点。

appendChild()
【格式】document.appendChild(newNode)；
功能：将newNode插入到parent子节点的末尾。

createTextNode()
【格式】document.createTextNode(文本)；
功能：创建文本节点。

insertBefore()
【格式】父节点.insertBefore（插入的节点，旧节点）；
功能：将插入的节点插入到旧节点之前。

replaceChild()
【格式】parent.replaceChild（newNode，oldNode)；
功能：用newNode将oldNode给替换掉。

cloneNode（）
【格式】node.cloneNode（）
功能：克隆节点。
返回值：新克隆出来的节点。
参数：true 默认是false 如果传true，就会复制元素节点中innerHTML

removeChild（）
【格式】node.parentNode.removeChild（node）；
功能：删除节点

【注】创建一个带文本的元素节点呢？（封装）

function createElementwidthTxt(tagName, txt){
var node=document. createElement(tagName); 
var oTxt=document. createTextNode(txt); 
node. appendChild(oTxt)
return node;
}

调用格式：

var node=createElementwithTxt("span"，"文本内容");

【注】DOM里insertAfter()这个方法是没有？（封装）

function insertAfter(newNode，oldNode){
//判断oldNode是否是最后一个节点
var parent=oldNode.parentNode；if(oldNode==parent.lastChild){
//最后一个节点，直接插入到子节点的末尾
parent.appendChild(neNode);
}else{
//插入到oLdNode的下一个节点之前
parent.insertBefore(newNode，oldNode.nextsibling);
}

调用格式：

insertAfter(node,oSpan);