下面是DOM解析中常用的属性及方法:
//属性部分
setAttribute(String key , String value) //给当前节点添加属性
getAttribute(String name) //获取该节点的属性值,通过属性的名称(key)获取值(value),返回值为属性值
getAttributeNode(String name) //获取该节点的属性节点,通过属性的名称(key)获取值(value),返回值为节点
//操作节点部分
hasChildNodes() //是否有子节点
replaceChild( newNode , oldNode ) //替换节点, 调用者为父节点 , 返回值为 oldNode 旧节点
//如果被替换的节点有子节点,那么子节点也会被插入
//创建节点及插入节点
createElement(String element) //创建一个新节点,返回值为被新建的节点,参数值为标签名,例如:input
createTextNode(String text) //创建一个文本节点,参数为文本内容,返回值为被新建的节点
appendChild(Node node) //添加节点,调用者为父节点
insertBefore(newNode , oldNode) //插入节点,调用者为父节点,将新节点插入到旧节点前面, 旧节点必须为父节点里的子节点
removeChild(Node node) //删除节点
//兄弟节点
firstChild //该节点下的第一个子节点
lastChild //该节点的最后一个节点
nextSibling //该节点的下一个节点
previousSibling //该节点的前一个节点
parentNode //该节点的父节点
childNodes //该节点下的所有子节点(为数组)
//节点名称,类型,值
nodeName //该节点的name值
nodeType //该节点的type值(返回值为数字)
nodeValue //该节点的value值
下面是测试部分
Html:
<select name="edu" id="edu">
<option value="博士" id="stu">博士~~~</option>
<option value="硕士">硕士~~~</option>
<option value="本科">本科~~~</option>
<option value="大专">大专~~~</option>
</select>
<select name="job" id="job">
<option value="工程师" id="gcs">工程师~~~</option>
<option value="教师">教师~~~</option>
<option value="建筑师">建筑师~~~</option>
<option value="记者">记者~~~</option>
</select>
<br/>
<p id="pid" name="text">文本~~~~~~~~~</p>
<br/>
<ul>
<li id="bj" onclick="text5()">北京</li>
<li id="sh" onclick="text6()">上海</li>
</ul>
<ul>
<li id="lq">篮球</li>
<li id="zq">足球</li>
</ul>
<input type="button" value="js测试" onclick="text4()"></input>
js测试
function text1() {
//是否还有子节点
var element = document.getElementById("edu");
alert(element.hasChildNodes());
var btn = document.getElementById("btn");
alert(btn.hasChildNodes());
}
function text2(){
//获取<p id="pid">文本</p>的子节点
var elements = document.getElementById("pid");
var text = elements.childNodes[0];
alert(text.nodeValue);
}
function text3(){
//获取<p id="pid" name="text">文本</p>节点的属性值
var pElement = document.getElementById("pid");
//getAttributeNode("name") 获取该节点的name属性
var attribute = pElement.getAttributeNode("name");
alert(attribute.nodeType);
alert(attribute.nodeName);
alert(attribute.nodeValue);
}
function text4(){
//输出下拉列表每一条文本内容
var select = document.getElementById("edu");
var options = select.getElementsByTagName("option");
for (var i = 0; i < options.length; i++) {
alert(options[i].firstChild.nodeValue);
}
}
function text5(){
//替换列表中的北京节点,替换为足球节点
//获取博士列表
var bj = document.getElementById("bj");
//获取工程师列表
var zq = document.getElementById("zq");
//获取博士列表的父节点
var bjParent = bj.parentNode;
//替换节点
var oldBj = bjParent.replaceChild(zq,bj);
//输出被替换节点的ID属性值
alert(oldBj.getAttributeNode("id").nodeValue);
}
function text6(){
//新建一个<li>,并插入到<li>列表的上海前面
//新建一个<li>
var sjz = document.createElement("li");
//设置属性
sjz.setAttribute("value","sjz");
//新建一个文本节点
var text = document.createTextNode("石家庄");
//获取上海节点
var sh = document.getElementById("sh");
//获取上海的父节点
var shParent = sh.parentNode;
//添加节点
sjz.appendChild(text);
shParent.appendChild(sjz);
//插入节点
shParent.insertBefore(sjz,sh);
}