5、Node對象
u 遍歷節點
u 父節點
.parentNode - 獲取父節點—> 元素節點或文檔節點
.parentElement - 獲取父元素節點—> 元素節點
u 子節點
.childNodes – 獲取所有子節點；
.firstChild – 獲取第一個子節點； .lastChild – 獲取最后一個子節點
u 兄弟節點
.previousSibling - 上一個兄弟節點； .nextSibling - 下一個兄弟節點
L 空白節點問題:
概念：空白節點，實際上就是一個空的文本節點
原因: 編寫HTML代碼時，輸入換行符，瀏覽器解析HTML頁面為DOM結構時，自動添加空白節點 ---獲取子節點及兄弟節點的屬性不能正常使用
注：IE8及以下版本的瀏覽器不存在空白節點問題
- 解決方案
1. 棄用獲取子節點和兄弟節點的屬性；改用getElementsByTagName( ) 方法
從父級根據標簽名得到所有子級，選[0]; 自動把空白節點去掉
- 使用原本的子節點屬性，人為進行判斷，進行重構
- 封裝方法：
l 插入節點
父.appendChild(子)
作用：將child節點插入到parent父節點的子節點列表的最后面
父.insertBefore(new子,current子)
作用：將newChild插入到parent父節點下currentChild子節點的前面
注意 - 沒有insertAfter( )方法
- 自定義---- insertAfter(newChild, currentChild) 方法
function insertAfter(parent, newChild, currentChild){
var next = currentChild.nextSibling;
if(next.nodeType == 3){
next = next.nextSibling;
}
Parent.insertBefore(newChild,next);}
如果調用該方法時，目標節點為 null 值或不存在的話；等價於調用 appendChild( ) 方法
}
l 刪除節點 – 父.removeChild(子)
l 替換節點 –父.replaceChild(newChild,oldChild)
newChild - 創建新的，從頁面獲取； parent和oldChild之間必須是父子關系
u 復制節點 - .cloneNode(boolean)
boolean類型的參數：是否復制后代節點 true：表示賦值； false：(默認值)表示不復制
* 返回值 - 表示被復制新的節點
注：如果復制的節點具有id屬性的話，在復制完成之后，修改id屬性值
6、Element對象
u 概念：
* 使用<節點>概念解析HTML
被解析為元素節點、屬性節點和文本節點；三者相互獨立（文本、元素節點是父子關系）
* 使用<元素>概念解析HTML
被解析為元素，屬性和文本是元素的一部分
注：元素節點和元素都代表HTML頁面中的標簽
DOM查詢的六個方法返回的既是元素節點(Node對象)，又是元素(Element對象)
u 遍歷元素
² 獲取父元素
.parentElement
² 獲取子元素
.children 獲取所有子元素的集合
.firstElementChild獲取第一個子元素 .lastElementChild獲取最后一個子元素
² 獲取兄弟元素
.previousElementSibling 獲取指定節點的前一個兄弟節點。
.nextElementSibling 獲取指定節點的后一個兄弟節點。
注：所有獲取子元素和兄弟元素的屬性，在 IE8及以下版本的瀏覽器不支持
* 人為提供瀏覽器的兼容解決方案
u 操作屬性
² 獲取屬性 .getAttribute(屬性名)
如果獲取的屬性名根本不存在，結果為null
如果屬性名存在，返回屬性的值，轉換為boolean值 true
如果屬性名不存在，返回null，轉換為boolean值 false
² 設置屬性 .setAttribute(屬性名, 屬性值)
如果屬性名已存在的話 - 修改指定屬性名的值
如果屬性名不存在的話 - 新增屬性(同時設置屬性名和屬性值) */
² 刪除屬性 .removeAttribute(屬性名)
效果: 將屬性名和屬性值一並刪除
² 判斷是否含有屬性 .hasAttribute(屬性名) 有----true; 沒有----false
* hasAttribute( )方法：
屬於Element對象； 作用：判斷指定標簽是否含有【指定屬性】
* hasAttributes( )方法：
屬於Node對象；作用：判斷指定標簽是否包含屬性
l 文本操作
- Ø 通過Node 對象的節點方式進行操作
* 文本節點一定是元素節點的子節點 - 獲取指定的文本節點
* 通過 nodeValue 屬性可以獲取或設置文本節點的文本內容
利用 Node 方式操作文本（文本節點）
* 通過獲取子節點的方式得到文本節點
* 通過 appendChild() 方法添加文本節點
* 通過 removeChild() 方法刪除文本節點
文本節點的節點圖
文本節點具有 nodeName、nodeType和nodeValue
nodeType - 用於判斷當前是否是文本節點（3）
nodeValue - 用於獲取或設置文本節點的文本內
【當元素節點的子節點為文本節點時; 不存在空白節點的問題】
- Ø textContent 屬性
作用：獲取指定元素中所有的文本內容(包含所有后代節點的文本內容);
【注：不支持IE8及以下版本；結果不報錯，為 undefined 轉換為boolean類型 false】
- innerText屬性
【支持IE8及以下版本瀏覽器[專有]屬性； IE9以上及其他(Chrome和火狐)新版本都兼容
獲取文本的兼容問題
function getText(elem){
var text;
if(elem.textContent){
text = elem.textContent;
}else{
text = elem.innerText;
}
return text;
}
- innerHTML屬性
作用：獲取或設置指定標簽的所有HTML代碼[有什么輸出什么]
注意：使用innerHTML屬性的安全性很低(可能接收一些惡意代碼)
解決：使用innerHTML屬性時，對應的值不能是用戶輸入內容