JavaScript筆記(5)

1.DOM操作

常用的DOM操作

document.getElementById(id);
//返回指定id的元素，通用
document.getElementsByTagName(tagName);
//返回帶有指定標簽名的對象的集合，通用

/* 不常用 */
getElementsByClassName(className);  
//返回指定類名的元素集合，不相容IE7、8，其他瀏覽器支持
getElementsByName();
//返回指定name屬性元素的集合

DOM樹中元素與元素之間的關係：父子、兄弟

假如現在有一個DOM元素為obj

找DOM節點

1.找父節點

/* 通用 */

obj.parentNode;

2.找兄弟節點

/* 不常用，應為不相容 */

obj.nextSibling;//找obj“下一個”兄弟節點，這個屬性只有IE7、8認識   

obj.nextElementSibling;//找obj“下一個”兄弟節點，其他瀏覽器認識  

obj.previousSibling;//找obj“上一個”兄弟節點，這個屬性只有IE7、8認識  

obj.previousElementSibling;//找obj“上一個”兄弟節點，其他瀏覽器認識  

/* 相容性寫法：先通用 || 後IE7、8 */

var next = obj.nextElementSibling || obj.nextSibling;
var last = obj.previousElementSibling || obj.previousSibling;

3.找子節點

/* 找第一個子節點 */
obj.firstElementChild;通用
obj.firstChild;//只有IE7、8認識，不通用

/* 找最後一個子節點 */
obj.lastElementChild;//通用
obj.lastChild;//只有IE7、8認識，不通用

/* 相容性寫法：先通用 || 後IE7、8 */
var firstLi = obj.firstElementChild || obj.firstChild;
var lastLi = obj.lastElementChild || obj.lastChild;

/* 找所有子節點 */
obj.childNodes;//w3c標準，但會找到空文本的節點，不常用
obj.children;//非標準，只會計算“真正”的子元素，常用

DOM節點操作

在DOM操作里，所有的創建、插入、刪除操作，都必須通過父節點來插入子節點和刪除子節點

• 節點文本操作: 控制節點文本
  

• (1) innerText: 會原封不動的顯示字元串（不常用）

• (2) innerHTML: 會解析這個字元串，如果該字元串中有HTML標記成分，就會被按照HTML的規範，將標記解析出來後顯示（常用）

4.動態創建DOM節點

/* 尾部添加節點 */

var obj = document.createElement("tagName");
//此時只在記憶體里創建了節點，還沒有寫入HTML文檔中
var fatherNode = document.getElementById("fatherId");
//拿到父節點
fatherNode.appendChild(obj);
//在父節點內部所有子節點尾部追加新建的節點
//此時節點才創建完成

/* 任意位置插入節點 */
var newChild = document.createElement("tagName");
var fatherNode = document.getElementById("fatherId");
var refChild = document.getElementById("refChild_Id");
fatherNode.insertBefore(newChild, refChild);//newChild: 新建節點   refChild: 參照節點  
//在參照節點之前插入新節點，參照節點可以為null，此時新建節點會被插入尾部

/* 刪除節點 */

var fatherNode = document.getElementById("fatherId");
var oldChidNode = document.getElementById("oldChild_Id");
fatherNode.removeChild(oldChildNode);

動態設置DOM元素的屬性

寫屬性: obj.setAttribute("valueName","value");
讀屬性: obj.getAttribute("valueName");

2.控制樣式

3.動畫效果