O(∩_∩)O~~ 昨天總結了《Javascript知識三》後忘記發佈了，呵呵，最近我的忘性很大啊O(∩_∩)O~~，今天是練習，所以把這周還未總結的寫下來，和大家一起分享交流。
首先，還是先把function剩下的總結下；
函數的自定義：
例如這道題，是定義一個數組，數組裏的屬性可以直接賦值，這裏的SayHi作爲數組的屬性來用
<script>
var p = {
name: "Apphia",
age: 20,
gender: true,
SayHi: function ()
{
//alert(this);//打印出[object Object]
return this.name;//這裏的this指的是當前數組中的name
}
};
alert(p.SayHi()); //打印出名字Apphia
</script>
DOM(Document Object Model)
DOM中的“D”：文檔，如果沒有document（文檔），Dom就無從談起。Dom把編寫的網頁文檔轉換爲一個文檔對象
DOM中的"O"：對像，“對象”是一種自足的數據集合，js中的對象可以分爲三種：用戶定義對象（自行創建的），內建對象（內建在js語言裏的對象，如Array,Date等），宿主對象（由瀏覽器提供的）
DOM中的“M”：模型，含義是某種事物的表現形式。
節點：網絡中的一個連接點。一個HTML文檔就是一個節點樹。在DOM操作中有許多不同類型的HTML標籤組成一個個的節點，每一個節點又是一個對象
節點分爲三種：
- 元素節點 ：HTML標籤
- 文本節點：元素節點裏包含的文本
- 屬性節點：HTML標籤裏定義的屬性
獲取元素：
- 根據標籤獲取： getElementByTagName() 返回數組
<div><span>歌手</span> 囚鳥 <span>歌名</span></div>
<script>
var div = document.getElementsByTagName("div"); //根據標籤名獲取
alert(div.length); //獲取長度，這裏顯示4
for (var i = 0; i < div1.length; i++) {
alert(div1[i].innerHTML); //打印出 <span>歌手</span> 囚鳥 <span>歌名</span>
}
</script>
- 根據name屬性獲取：getElementsName () 返回數組
<body>
<div name="div1">水果</div>
<div name="div1">APPLE</div>
<script>
var div2 = document.getElementsByName("div1");//根據name屬性來獲取
for (var i = 0; i < div2.length; i++) {
alert(div2[i].innerHTML);
}
// ————————————打印出水果、APPLE
</script>
</body>
- 根據calss屬性獲取： getElementsByClassName() 返回數組
<div class="div2">鮮花</div>
<script>
var div = document.getElementsByClassName("div2"); //根據class屬性來獲取
for (var i = 0; i < div.length; i++) {
alert(div[i].innerHTML);
}
//————————————打印出鮮花
</script>
- 根據元素ID屬性獲取：getElementById() 返回的是單個值
<div id="div">Wellcome to xxx</div>
<script>
var divadd = document.getElementById("div")
alert(divadd.innerHTML); //打印出Wellcome to xx
</script>
- 根據選擇器獲取querySelector() 返回數組
<div>柳樹</div>
<script>
var div = document.querySelector(".div"); //根據選擇器來獲取
for (var i = 0; i < div.length; i++) {
alert(div[i].innerHTML);
}
</script>
注：獲取文本節點：先抓取元素在去找到文本節點
innerHTML:獲取HTML和文本 innerText: 獲取純文本（但只在IE瀏覽器下使用）
獲取屬性節點：先抓取元素在去抓取屬性 getAttribute（）
<div id="div" class="divclass" name="divname">
<script>
var div = document.getElementById("div"); //先獲取元素節點
var divAttibute = div.getAttribute("name");
alert(divAttibute);
</script>
修改屬性節點：setAttribute()
<div id="div" class="divclass" name="divname">
<script>
var div = document.getElementById("div");//先獲取元素節點
div.setAttribute("name", "MYDIV");
var divAttibute = div.getAttribute("name");
alert(divAttibute);
</script>
查看子節點長度,節點類型，節點名稱，節點文本內容
<div id="outdiv">外層的DIV <div id="centerdiv">中層的DIV <div id="innerdiv">內層DIV</div> </div> 最後一個空白節點 </div> <script> var divlengh = div.childNodes.length; //查看子節點長度 var divchild = div.childNodes; alert(divlengh); //查看子節點類型 for (var i = 0; i <divchild.length; i++) { alert(divchild[i].nodeType);//打印出 3 1 3（3：文本節點 1：元素節點） } //查看子節點名稱 for (var i = 0; i < divchild.length; i++) { alert(divchild[i].nodeName); } //查看節點文本內容(只顯示文本信息，非文本顯示NULL) for (var i = 0; i < divchild.length; i++) { alert(divchild[i].nodeValue); } </script>
注：還有常用的 firstchild（第一個字節點） 和 lastchild（最後一個字節點） 兩個屬性
動態創建節點：
- innerHTML(創建文本元素)
<div id="textdiv"></div>
<script>
document.getElementById("textdiv").innerHTML = "動態添加"; //打印出 動態添加
</script>
- wirte
<div id="div"></div>
<script>
var divadd = document.getElementById("div");
// write
document.write("<p>HELLO</P>"); //動態產生p標籤
function inserp() //或封裝成方法
{
var str = "<p>";
var text = "薩瓦迪卡";
var str1 = "</p>";
return str + text + str1;
}
document.write(inserp()); //write通常用於大規模處理
</script>
createElement（創建元素節點） createTextNode（創建文本節點） appendChild（追加子節點）
<div id="outdiv">外層的DIV <div id="centerdiv">中層的DIV <div id="innerdiv">內層DIV</div> </div> 最後一個空白節點 </div> <script> var div = document.getElementById("outdiv");//先獲取父節點 //追加節點 var p = document.createElement("p"); //1 首先創建元素節點 var text = document.createTextNode("。。。。。。。。。。。。。。。"); //創建一個文本節點 p.appendChild(text);//文本節點追加到父節點 div.appendChild(p);//將元素節點p追加到父節點div中 var adddiv = document.getElementById("div").appendChild("div"); //使用 </script>