5、node物件
u 遍歷節點
u 父節點
.parentnode- 獲取父節點—> 元素節點或文件節點
.parentelement- 獲取父元素節點—> 元素節點
u 子節點
.childnodes– 獲取所有子節點;
.firstchild– 獲取第乙個子節點;.lastchild– 獲取最後乙個子節點
u 兄弟節點
.previoussibling- 上乙個兄弟節點;.nextsibling- 下乙個兄弟節點
l 空白節點問題:
概念:空白節點,實際上就是乙個空的文字節點
原因: 編寫html**時,輸入換行符,瀏覽器解析html頁面為dom結構時,自動新增空白節點 ---獲取子節點及兄弟節點的屬性不能正常使用
注:ie8及以下版本的瀏覽器不存在空白節點問題
1. 棄用獲取子節點和兄弟節點的屬性;改用getelementsbytagname( ) 方法
從父級根據標籤名得到所有子級,選[0]; 自動把空白節點去掉
使用原本的子節點屬性,人為進行判斷,進行重構
l 插入節點
父子)
作用:將child節點插入到parent父節點的子節點列表的最後面
父.insertbefore(new子,current子)
作用:將newchild插入到parent父節點下currentchild子節點的前面
注意 - 沒有insertafter( )方法
}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 文字操作
* 文字節點一定是元素節點的子節點 - 獲取指定的文字節點
* 通過 nodevalue 屬性可以獲取或設定文字節點的文字內容
利用 node 方式操作文字(文字節點)
* 通過獲取子節點的方式得到文字節點
* 通過 removechild() 方法刪除文字節點
文字節點的節點圖
文字節點具有 nodename、nodetype和nodevalue
nodetype - 用於判斷當前是否是文字節點(3)
nodevalue - 用於獲取或設定文字節點的文字內
【當元素節點的子節點為文字節點時; 不存在空白節點的問題】
作用:獲取指定元素中所有的文字內容(包含所有後代節點的文字內容);
【注:不支援ie8及以下版本;結果不報錯,為 undefined 轉換為boolean型別 false】
【支援ie8及以下版本瀏覽器[專有]屬性; ie9以上及其他(chrome和火狐)新版本都相容
獲取文字的相容問題
function gettext(elem)else
return text;
}作用:獲取或設定指定標籤的所有html**[有什麼輸出什麼]
注意:使用innerhtml屬性的安全性很低(可能接收一些惡意**)
解決:使用innerhtml屬性時,對應的值不能是使用者輸入內容
dom基礎知識
dom 英文全稱 document object model 譯成中文即是 文件對像模型 聽起來很術語,其實就是文件內容的結構關係 文件型別可以是html或xml,dom具有對html檔案和xml檔案元素的訪問控制能力,簡單點說利用dom可以對某個html或xml檔案新增,修改,刪除元素 更改其現有...
DOM 基礎知識
dom樹中的元素節點 節點的屬性 x.nodevalue 節點物件x的值 唯讀 元素節點的 nodename 與標籤名相同 屬性節點的 nodename 是屬性的名稱 文字節點的 nodename 永遠是 text 文件節點的 nodename 永遠是 document x.nodename 節點物...
DOM基礎知識
首先,我們需要介紹什麼是dom。dom的英語全稱為document object model,翻譯成中文就 是文件物件模型。也就是說,將整個文件看作是乙個物件。而乙個文件又是由很多節點組成的,那麼這些節點也可以被看作是乙個個的物件。dom裡面的物件屬於宿主物件,需要瀏覽器來作 為宿主。一旦離開了瀏覽...