課題一：
<pre name="code" class="javascript">var chils= s.childNodes; //得到s的全部子節(jié)點
var par=s.parentNode; //得到s的父節(jié)點
var ns=s.nextSbiling; //獲得s的下一個兄弟節(jié)點
var ps=s.previousSbiling; //得到s的上一個兄弟節(jié)點
var fc=s.firstChild; //獲得s的第一個子節(jié)點
var lc=s.lastChile; //獲得s的最后一個子節(jié)點
課題二：
1.訪問節(jié)點
document.getElementById(id);
返回對擁有指定id的第一個對象進行訪問
document.getElementsByName(name);
返回帶有指定名稱的節(jié)點集合
注意:Elements
document.getElementsByTagName(tagname);
返回帶有指定標簽名的對象集合
注意：Elements
document.getElementsByClassName(classname);
返回帶有指定class名稱的對象集合
注意：Elements
2.生成節(jié)點
document.createElement(eName);
創(chuàng)建一個節(jié)點
document.createAttribute(attrName);
對某個節(jié)點創(chuàng)建屬性
document.createTextNode(text);
創(chuàng)建文本節(jié)點
3.添加節(jié)點
document.insertBefore(newNode,referenceChild);
在某個節(jié)點前插入節(jié)點
parentNode.appendChild(newNode);
給某個節(jié)點添加子節(jié)點
4.復制節(jié)點
cloneNode(true | false);
復制某個節(jié)點
參數(shù)：是否復制原節(jié)點的所有屬性
5.刪除節(jié)點
parentNode.removeChild(node)
刪除某個節(jié)點的子節(jié)點
node是要刪除的節(jié)點
注意：IE會忽略節(jié)點間生成的空白文本節(jié)點(例如，換行符號)，而Mozilla不會這樣做。在刪除指定節(jié)點的時候不會出錯，但是如果要刪除最后一個子結點或者是第一個子結點的時候，就會出現(xiàn)問題。這時候，就需要用一個函數(shù)來判斷首個子結點的節(jié)點類型。
元素節(jié)點的節(jié)點類型是 1，因此如果首個子節(jié)點不是一個元素節(jié)點，它就會移至下一個節(jié)點，然后繼續(xù)檢查此節(jié)點是否為元素節(jié)點。整個過程會一直持續(xù)到首個元素子節(jié)點被找到為止。通過這個方法，我們就可以在 Internet Explorer 和 Mozilla 得到正確的方法。
6.修改文本節(jié)點
appendData(data);
將data加到文本節(jié)點后面
deleteData(start,length);
將從start處刪除length個字符
insertData(start,data)
在start處插入字符,start的開始值是0;
replaceData(start,length,data)
在start處用data替換length個字符
splitData(offset)
在offset處分割文本節(jié)點
substringData(start,length)
從start處提取length個字符
7.屬性操作
getAttribute(name)
通過屬性名稱獲取某個節(jié)點屬性的值
setAttribute(name,value);
修改某個節(jié)點屬性的值
removeAttribute(name)
刪除某個屬性
8.查找節(jié)點
parentObj.firstChild
如果節(jié)點為已知節(jié)點的第一個子節(jié)點就可以使用這個方法。此方法可以遞歸進行使用
parentObj.firstChild.firstChild.....
parentObj.lastChild
獲得一個節(jié)點的最后一個節(jié)點，與firstChild一樣也可以進行遞歸使用
parentObj.lastChild.lastChild.....
parentObj.childNodes
獲得節(jié)點的所有子節(jié)點，然后通過循環(huán)和索引找到目標節(jié)點
9.獲取相鄰的節(jié)點
neborNode.previousSibling :獲取已知節(jié)點的相鄰的上一個節(jié)點
nerbourNode.nextSlbling: 獲取已知節(jié)點的下一個節(jié)點
10.獲取父節(jié)點
childNode.parentNode:得到已知節(jié)點的父節(jié)點
示例代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>題目三</title>
<style>
#memberlist{
background: whitesmoke;
width:400px;
? ? ? ? height:400px;
? ? ? ? border:1px #000 dashed;
}
#single{
background: antiquewhite;
width:400px;
? ? ? ? height:60px;
? ? ? ? display: block;
? ? ? ? border:1px #fff dashed;
? ? ? ? padding-top: 20px;
}
#button{
float:right;
background: deepskyblue;
width:80px;
? ? ? ? height:20px;
? ? ? ? border-radius: 5px;
}
</style>
</head>
<body>
<div id="memberlist"></div>
</body>
<script>
//ajax操作
var message;
var xhr=new XMLHttpRequest();//構造請求
xhr.open("GET","data.json",true);//通過GET方法來獲取“data.json”中的數(shù)據(jù)。
xhr.onreadystatechange=function(){
if(xhr.readyState===4){
if(xhr.status===200){
var r=xhr.responseText;//得到響應文本
//把原來的r由字符串改成對象
message =JSON.parse(r);//json文件中，不能注釋，否則轉化為對象時，就操蛋了，報錯。
// console.log(message);
var container=document.querySelector("#memberlist");//地址選擇器
var div=document.createElement("div");
? div.setAttribute("id","single");
? div.innerHTML="名字---學號---年齡---電話";
? container.appendChild(div);//將節(jié)點加入dom樹
? for(var i=0;i<message.length;i++){
? var div=document.createElement("div");
? var buttons=document.createElement("button");
? buttons.setAttribute("id","button");
? buttons.setAttribute("name",i);
? buttons.innerHTML="刪除";
? div.setAttribute("id","single");
? div.setAttribute("name",i);
? div.innerHTML=message[i].name+"---"+message[i].no+"---"+message[i].age+"---"+message[i].tel;
? div.appendChild(buttons);
? container.appendChild(div);//將節(jié)點加入dom樹
}
? var button_all=document.querySelectorAll("button");
? var div_all=container.querySelectorAll("div");
? for(var i=0;i<button_all.length;i++){
? button_all[i].addEventListener("click",function(){
? for(var j=1;j<div_all.length;j++){
? if(div_all[j].getAttribute("name")==this.getAttribute("name")){
? ? container.removeChild(div_all[j]);
? }
? }
? })
? }
}
}
}
xhr.send(null);//發(fā)送請求
</script>
</html>
