javaScript_BOM_增加刪除節點
<html lang="en">
<head>
<meta charset="UTF-8">
<title>documentss</title>
<script type="text/javascript">
function createNode() {//新增節點
var img1=document.createElement("img");//動態創建圖片元素
img1.src="a/img.jpg";
img1.id="img1";
var fatherNode=document.getElementById("form1");
fatherNode.appendChild(img1);//將圖片元素添加到form1
}
function removeNode() {//刪除節點
var img1=document.getElementById("img1");//動態創建圖片元素
// var fatherNode=document.getEletmentById("form1");
// fatherNode.removeChild(img1);//將圖片元素刪除
img1.parentNode.removeChild(img1);//原理都是找到父節點刪除子節點
}
function inerrTest(){
var div1=document.getElementById("div1");
alert(div1.innerText);// innerHTML
}
function attrTest() {
var a1=document.getElementById("a1");
alert(a1.getAttribute("href"));//取得超鏈接屬性
}
function attrModify() {//修改元素屬性
var a1=document.getElementById("a1");
a1.setAttribute("href","http://www.sina.com.cn");
a1.innerText="新浪";
}
</script>
</head>
<body>
<!-- 重點document是script重點 BOM對象樹 -->
<from id="form1">
<div id="div1" style="width: 200px;height: 100px">
<h4>這是div的一個段落</h4>
<a href="http:www.baidu.com" id="a1">百度</a>
</div>
<input type="button" οnclick="createNode();" value="開始測試">
<input type="button" οnclick="removeNode();" value="刪除節點">
<input type="button" οnclick="inerrTest();" value="取得內容">
<input type="button" οnclick="attrTest();" value="取得屬性">
<input type="button" οnclick="attrModify();" value="修改屬性">
</from>
</body>
</html>
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章