<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="css/css.css" />
<script type="text/javascript">
//創建一個通用函數，給按鈕綁定單擊事件。
function myClick(strId,fun){
var btn = document.getElementById(strId);
btn.onclick = fun;
}
window.onload = function(){
//1.創建一個"廣州"節點,添加到#city下
myClick("btn01",function(){
//1.1創建廣州節點 <li>廣州</li>
//1.1.1 創建li節點
/*
*document.createElement()
* --用於創建一個人元素節點對象，
* --需要一個標籤名作爲參數，會返回相應的標籤
*
*/
var li = document.createElement("li");
//1.1.2創建廣州文本節點
/*
* document.createTextNode()
* --用於創建一個人文本節點對象
* --需要一個文本作爲參數，會返回相應的文本節點
*/
var gzText = document.createTextNode("廣州");
//1.1.3將gzText文本節點添加到li元素節點下。
/*
* 父.appendChild(子節點);
* --把新的子節點添加到指定節點。
*/
li.appendChild(gzText);
//1.2將廣州節點添加到#city下
//1.2.1獲取#city元素節點
var city = document.getElementById("city");
//1.2.2將廣州節點添加到#city下
city.appendChild(li);
})
//2.將"廣州"節點插入到#bj前面
myClick("btn02",function(){
//2.1創建廣州節點
var li = document.createElement("li");
var gzText = document.createTextNode("廣州");
li.appendChild(gzText);
//2.1插入到#bj前面
/*
* insertBefore()
* --在指定的子節點前面插入新的子節點。
* --父節點.insertBefore(新節點,舊節點)；
*/
//2.1.1獲取父節點
var city = document.getElementById("city");
//2.1.2獲取bj節點
var bj = document.getElementById("bj");
city.insertBefore(li,bj);
})
//3.使用"廣州"節點替換#bj節點
myClick("btn03",function(){
//3.1創建廣州節點
var li = document.createElement("li");
var gzText = document.createTextNode("廣州");
li.appendChild(gzText);
//3.2替換北京節點
//3.2.1獲取北京節點的父節點
var city = document.getElementById("city");
var bj = document.getElementById("bj");
//3.2.2替換北京節點
/*
* replaceChild()；
* --替換子節點。
* --父節點.replaceChild(新節點,舊節點);
*/
city.replaceChild(li,bj);
})
//4.刪除#bj節點
/*
* parentNode
* --屬性 查找該節點的父節點
*
* removeChild()
* --刪除子節點。(通過父節點調用)
*
*/
myClick("btn04",function(){
var bj = document.getElementById("bj");
bj.parentNode.removeChild(bj);
})
//5.讀取#city內的HTML代碼
myClick("btn05",function(){
var city = document.getElementById("city");
alert(city.innerHTML);
})
//6.設置#bj內的HTML代碼
myClick("btn06",function(){
var bj = document.getElementById("bj");
bj.innerHTML = "廣州";
})
//7.創建一個"廣州"節點,添加到#city下
/*
* 既然innerHTML屬性可以修改元素內部的代碼，是否可以完成該要求？
* 但是，這樣對原程序改動過大
*/
myClick("btn07",function(){
var city = document.getElementById("city");
//city.innerHTML = "<li>廣州</li>";
//city.innerHTML += "<li>廣州</li>";
/*
* 兩種方法結合
*/
var li = document.createElement("li");
li.innerHTML = "廣州";
city.appendChild(li);
})
}
</script>
</head>
<body>
<div id="total">
<div class="inner">
<p>
你喜歡哪個城市?
</p>
<ul id="city">
<li id="bj">北京</li>
<li>上海</li>
<li>東京</li>
<li>首爾</li>
</ul>
</div>
</div>
<div id="btnList">
<div><button id="btn01">創建一個"廣州"節點,添加到#city下</button></div>
<div><button id="btn02">將"廣州"節點插入到#bj前面</button></div>
<div><button id="btn03">使用"廣州"節點替換#bj節點</button></div>
<div><button id="btn04">刪除#bj節點</button></div>
<div><button id="btn05">讀取#city內的HTML代碼</button></div>
<div><button id="btn06">設置#bj內的HTML代碼</button></div>
<div><button id="btn07">創建一個"廣州"節點,添加到#city下</button></div>
</div>
</body>
</html>
js--打卡--12.14 DOM增刪改方法
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章