DOM基礎知識(Node物件 Element物件)

2022-08-01 04:15:16 字數 4066 閱讀 6022

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裡面的物件屬於宿主物件,需要瀏覽器來作 為宿主。一旦離開了瀏覽...