JS筆記—03（DOM編程）

標籤：超連結   append   attr   原理   eva   app   value   解決方案   parent   

1. 動態體現：HTML代碼載入到瀏覽器，代碼運行後改變文檔(DOM樹)增刪改查節點。
例如：ajax（不是新技術，是幾個技術的合體js+http後台操作）就是這樣的原理

2.js對象(瀏覽器對象、指令碼對象、HTML對象)

3.添加文本方法
 a.第一種建立文本節點
 建立元素節點：createElement()
 建立文本節點：createTextNode()：也可以加空格用
 添加節點用appendChild();
 得值用：innerHTML
 b.第二種直接賦值
 innerHTML=""：直接賦值
 得值用：NodeValue

4.給元素對象設定屬性
 a.第一種方法
 object.屬性=""
 b.第二種方法
 setAttribute("屬性", "值")；
5.設定連結屬性
 .href="#";
 .onclick = function() {}
 this.代表當前對象，parentNode:父節點
6.加空格
 opra.innerHTML="<a href="#" onclick=‘upda(this)‘>更新</a>&nbsp <a href
 = "#" onclick=‘dela(this)‘>刪除</a>

7.元素a.innerHTML會重寫元素標記內容（覆蓋）
要顯示則用a.innerHTML+="html代碼";

8.三大重點元素:document. element. node

9最後一個省市聯動：IE和Firefox不相容，建議使用document.createElement();方法，
而不使用new Option();因為代碼會冗餘。

二、代碼中遇到的問題：

第一個例子：給節點賦值時，底層用文本節點：var txtNode = createTextNode()

   也可以：父節點.innerHTML直接賦值
從節點取值時，用innerHTML直接取值，
   也可以：txtNode.nodeValue直接取值；

第二個例子：ul列表輸出 nodeType.nodeName.nodeValue

 特註：++++++老師說當nodeType=1時是類型，=2時是名字，=3時是值++++。
 a. 可以用for(var i = 0;i < arr.length; i++)迴圈
 b. 也可以用for(x in arr) {
   if(x >= 0) {
    arr[x].nodeType

     }
    }

第三個例子：給div標籤裡添加超連結
注意使用innerHTML直接給div賦值時會發生超連結標籤覆蓋HTML內容的問題
解決方案：mydiv.innerHTML += "超連結代碼";
 有三個方法加<a href>:
 a.innerHTML直接賦值div標籤
 b.建立a標籤，設定屬性，設定內容，再依次添加div標籤
 c.建立a標籤，建立文本節點，設定屬性，再依次添加
標註：++++++老師說的是用appendChild():必須加的是對象而不是文本++++。

details：詳情
estimate/evaluate：評價

第四個例子：變幻面板：點選連結，改變下邊的面板的內容(用div來操控)

 div屬性：style = "display:none/block"
 none:不顯示div內容
 block:顯示div的
 注+++如果是超連結，則不能用window.onload = function() {}
 因為按鈕是只點擊一次，而超連結要多次變幻。

第五個例子：省市聯動

<select>標籤事件onchange():事件會在域的內容改變時發生。
清空列表：length = 1;(只有一個請選擇)

JS筆記—03（DOM編程）