JavaScript筆記(5)

時間 2020-08-06

原文原文鏈接

1.DOM操做

經常使用的DOM操做

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

/* 不經常使用 */
getElementsByClassName(className);  
//返回指定類名的元素集合，不兼容IE七、8，其餘瀏覽器支持
getElementsByName();
//返回指定name屬性元素的集合

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

假如如今有一個DOM元素爲objjava

找DOM節點

1.找父節點瀏覽器

/* 通用 */

obj.parentNode;

2.找兄弟節點app

/* 不經常使用，應爲不兼容 */

obj.nextSibling;//找obj「下一個」兄弟節點，這個屬性只有IE七、8認識   

obj.nextElementSibling;//找obj「下一個」兄弟節點，其餘瀏覽器認識  

obj.previousSibling;//找obj「上一個」兄弟節點，這個屬性只有IE七、8認識  

obj.previousElementSibling;//找obj「上一個」兄弟節點，其餘瀏覽器認識  

/* 兼容性寫法：先通用 || 後IE七、8 */

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

3.找子節點dom

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

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

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

/* 找全部子節點 */
obj.childNodes;//w3c標準，但會找到空文本的節點，不經常使用
obj.children;//非標準，只會計算「真正」的子元素，經常使用

DOM節點操做

在DOM操做裏，全部的建立、插入、刪除操做，都必須經過父節點來插入子節點和刪除子節點動畫

節點文本操做: 控制節點文本
(1) innerText: 會原封不動的顯示字符串（不經常使用）code
(2) innerHTML: 會解析這個字符串，若是該字符串中有HTML標記成分，就會被按照HTML的規範，將標記解析出來後顯示（經常使用）對象

4.動態建立DOM節點ip

/* 尾部添加節點 */

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);