JavaScript学习6-文档对象模型基础
1.节点方法
节点对象方法（W3C DOM Level2）
| 方法 | 说明 |
|---|---|
| appendChild(newChild) | 添加子节点到当前节点的末端 |
| cloneNode(deep) | 获取当前节点的拷贝 |
| hasChildNodes() | 确定当前节点是否具有子节点(Boolean) |
| insertBefore(new,ref) | 在一个子节点前面插入一个新的子节点 |
| removeChild(old) | 删除一个子节点 |
| replaceChild(new,old) | 使用新的子节点替换旧的 |
| isSupported(feature,version) | 确定节点是否支持特定功能 |
看看增删改的几个方法把
<html>
<head>
<title>js_14.5</title>
<script type="text/javascript">
var newelement=document.createElement("p");
newelement.id="newp";
newelement.setAttribute("style","background:#ff0000");
var newText=document.createTextNode("I am a new p");
newelement.appendChild(newText);
var parentElement;
function load(){
parentElement=document.getElementById("parentNode");
}
function callme(){
alert("I am a new button");
}
function add(){
parentElement.appendChild(newelement);
}
function insert(){
var newinput=document.createElement("input");
newinput.id="inputBtn";
newinput.setAttribute("type","button");
newinput.setAttribute("onclick","callme()");
newinput.value="insert button";
parentElement.appendChild(newinput);
}
function replace(){
var newText=document.createElement("input");
newText.id="newText1";
newText.type="text";
parentElement.replaceChild(newText,newelement)
}
function removeNode(){
var oldText=document.getElementById("newText1");
parentElement.removeChild(oldText);
}
</script>
</head>
<body onload="load()">
<input type="button" name="AddBtn" value="Add" onclick="add()">
<input type="button" name="InsertBtn" value="Insert" onclick="insert()">
<input type="button" name="ReplaceBtn" value="Replace" onclick="replace()">
<input type="button" name="RemoveBtn" value="Remove" onclick="removeNode()">
<h3>node object method show</h3>
<div id="showDiv">
<p id="parentNode">this is parent node</p>
</div>
</body>
</html>