一、DOM文档对象模型
1.DOM中的节点：
a).元素节点：即是DOM的原子节点，其nodeType值为1，如<h1>、<div>、<body>
b).属性节点：即元素的属性，其nodeType值为2，如<a href="href1">xxxxx</a> 其中的href即是属性节点
c).文本节点：nodeType值为3，如<a href="href1">xxxxx</a> 其中的xxxxx即为文本节点
d).注释节点
2.操作元素内的文本：
<div id="test">Test</div> var x = document.getElementById("test"); alert(x.innerText);//Test
但是在FireFox上就是undefined，即innerText不兼容FireFox.
一个通用的函数用来获取任意元素的文本内容：
function text(e){
var t="";
e=e.childNodes || e;
for(var j=0;j<e.length;j++){
//不是元素节点，则追加文本，否则，继续递归遍历所有元素节点的子节点
nodeValue;text(e[j].childNodes);
回匹配的文本
}(x)); 即可以在FireFox中使用啦。
======================================================
childNodes 属性可返回指定节点的子节点的节点列表，也就是包含在容易内的所有控件与文本属性字段，如果希望得到这些中的某些，必须通过 类别属性进行筛选。
childNodes常用属性：
nodeValue：nodeValue适用于“文本节点（<td>中的文本内容）”和“属性节点”；对应“文档节点”和“标签节点（li）”不起作用
nodeName：元素节点的 nodeName 是标签名称
属性节点的 nodeName 是属性名称
文本节点的 nodeName 永远是 #text
文档节点的 nodeName 永远是 #document
nodeType:返回的数值 1：元素节点、2：属性节点、3：文本节点
firstChild：返回容器内的第一个控件对象，可以利用这个返回对象去获取该控件的属性信息
parentNode：返回子节点对象外层的父对象，可以利用这个返回父对象去获取该控件的属性信息
previousSibling:获取同级节点上级节点对象，可以利用这个返回对象去获取该节点的属性信息
nextSibling：获取同级节点下级节点对象，可以利用这个返回对象去获取该节点的属性信息
语法：
nodeObject.childNodes
提示和注释
提示：请使用 length 属性来计算一个节点列表中节点的数目。当你已获悉节点列表的长度后，您就可以轻松地循环遍历此列表，并提取您所需要的值！
实例
在所有的例子中，我们将使用 XML 文件 books.xml，以及 JavaScript 函数 loadXMLDoc()。
下面的代码片段显示了此XML文档的子节点：
xmlDoc=loadXMLDoc("books.xml");
var x=xmlDoc.childNodes;
for (i=0;i<x.length;i++) { document.write("Nodename: " + x[i].nodeName) document.write(" (nodetype: " + x[i].nodeType + ")<br />") }
======================================================
3.操作元素内的HTML-----DOM元素的一个额外属性：innerHTML
所有的HTML和文本！
如果元素仅包含文本而不包含任何子元素，则返回的字符串只包含文本，故该方法可以取代上一个text(e) 方法，不用区分浏览器啦！
<div id="test">测试<b>innerHTML属性</b></div>
var x = document.getElementById("test"); alert(x.innerHTML);//测试<b>innerHTML属性</b>
2中的
<div id="test">Test</div> var x = document.getElementById("test"); alert(x.innerHTML);//Test
这样innerHTML兼容FireFox.
二、操作DOM节点
1.创建DOM节点：
createElement(tagName) 创建标签名为tagName的标签
createTextNode(data) 创建以data为内容的文本节点
----------------------------------------------------------------------------
var newDiv = document.createElement("div");
newDiv.setAttribute("id","newDiv");//设置一个id属性，用getAttribute("id")获取。
var bodyTags = document.getElementsByTagName("body");
var thisBody = bodyTags[0];
appendChild(newDiv);//将节点newDiv 添加到childNodes的末尾
var textNode = document.createTextNode("new div");
newDiv.appendChild(textNode);//将new div这一文本添加到 newDiv 这个div中2.插入DOM节点：
区分insertBefore()和appendchild()
如： ulVar.insertBefore(newLi,oldulVar);
来看个这个简单的实例：在id为box-one 的末尾添加一个子节点div
< div class ="btns" >< input type ="button" value ="插入元素" id ="creatbtn" /></ div >
< div id ="box-one" >
< p class ="con2" id ="p1" > 1 </ p >
< p class ="con2" > 2 </ p >
< p class ="con2" > 3 </ p >
</ div >
window.onload = function () {
var btn = document.getElementById( " creatbtn " );
btn.onclick = function () {
insertEle();
}
}
function insertEle() {
var oTest = document.getElementById( " box-one " );
var newNode = document.createElement( " div " );
newNode.innerHTML = " This is a newcon " ;
// oTest.appendChild(newNode);
oTeset.insertBefore(newNode, null ); // 这两种方法均可实 现
}
这个insertBefore 的第一个参数 和appendChild的一样，都是那个新的节点变量，而insert第二个参数不仅可以为null 。也可以这样写呢
function insertEle() {
var oTest = document.getElementById( " box-one " );
var newNode = document.createElement( " div " );
var reforeNode = document.getElementById( " p1 " );
newNode.innerHTML = " This is a newcon " ;
oTest.insertBefore(newNode,reforeNode); // 新建的元素节点插入到 id为p1的元素前面
}
或者
function insertEle() {
var oTest = document.getElementById( " box-one " );
var newNode = document.createElement( " div " );
var reforeNode = document.getElementById( " p1 " );
newNode.innerHTML = " This is a newcon " ;
oTest.insertBefore(newNode,reforeNode.nextSibling);//新建的元素节点插入到 id为p1后面节点元素的 前面，
也就是说 插入id为p1节点元素的后面。
}
某个元素之后紧跟的元素（处于同一树层级中）。
reforeNode.nextSibling ：取得的是reforeNode对象的紧跟着的下一个节点。
previousSibling - 取得某节点的上一个同级节点
insertBefore()方法插入节点，是可以在子节点列表的任意位置。
3.删除节点：removeChild(toRemoveVar);
//删除一个独立的DOM节点
function remove(elem){
if(elem){
elem.parentNode.removeChild(elem);
}
}
//删除一个元素的所有子节点
funtion empty(elem){
while(elem.firstChild){
remove(elem.firstChild);//调用上面的函数
}
}------------------------------------------------
移除子节点，那么可以变通一下来实现移除指定的节点，我们可以先去找到要删除节点的父节点，然后在父节点中运用removeChild来移除我们想移除的节点。
|
