JS中的DOM物件

主要是操作html（內容）

dom:document object model w3c api標準

是w3c組織推薦的處理可擴充套件置標語言的標準程式設計介面。它是一種與平台和語言無關的應用程式介面(api),它可以動態地訪問程式和指令碼,更新其內容、結構和www文件的風格(目前,html和xml文件是通過說明部分定義的)。文件可以進一步被處理，處理的結果可以加入到當前的頁面。dom是一種基於樹的api文件，它要求在處理過程中整個文件都表示在儲存器中。另外一種簡單的api是基於事件的sax，它可以用於處理很大的xml文件，由於大，所以不適合全部放在儲存器中處理。

dom分為：核心dom 能夠操作所有結構化文件（html xml）萬能 - 繁瑣

還有html dom 專門操作html內容的api 常用的api --> 簡化

所有的node(元素、屬性、文字)物件都是document的子代節點

nodetype 節點型別 number

document 9

element 1

attrbute 2

text 3

nodename 節點名

document #document

標籤元素全大寫的標籤名

attitude 屬性名

文字節點 #text

nodevalue 節點值

document null

標籤元素 null

attribute 屬性值

text 文字的內容

查詢三個元素不需要找，直接用

document.documentelement

document.head

document.body

節點間關係

1）父子關係 node.parentnode 獲得node的父節點 node.childnodes 獲得node的直接子代節點 node.firstchild 獲得node下的第乙個子節點 node.lastchild 獲得node下最後乙個子節點 2）兄弟關係 node.previussibling 返回當前節點的前乙個兄弟節點 node.nextsibling 返回當前節點的下乙個兄弟節點節點樹：包含了所有節點（元素，文字）完整的結構

元素樹：僅包含元素節點的樹形結構

1）父子關係

elem.parentelement 返回父元素物件

elem.children 返回子元素物件集合 ie8支援

elem.firstelementchild 返回第乙個子元素物件

elem.lastelementchild 返回最後乙個子元素物件

2）兄弟關係

elem.previuselementsibling 返回當前元素的前乙個兄弟元素

elem.nextelementsibling 返回當前元素的下乙個兄弟元素

查詢指定父元素下指定標籤的元素物件集合 （所有子代元素物件）
document.getelementsbytagname("標籤名") ;
查詢指定父元素下指定標籤的id
document.getelementbyid('id')
查詢任意父元素下指定class屬性的元素物件 返回乙個集合
document;getelementsbyclassname("class");

dom物件獲得操作文字內容：

1.innerhtml會獲得html內容 innerhtml新增時會解析內容 2.innertext會獲得純文字內容 innertext新增時直接新增所有內容 3.單標籤：獲得的時候都是用value獲得 4.特殊的標籤：select、textarea 用value獲得

dom物件獲得操作元素樣式：

1.獲得元素標籤樣式：通過標籤元素名.style.width

2.操作元素標籤樣式：方式一：改變元素標籤樣式:直接修改元素標籤名.style.width=「300px」

方式二：改變元素標籤樣式：通過增加class類來增加對應的css樣式

下面是利用節點做的乙個簡單的二級選單

JS中的DOM物件

js 訪問DOM物件

js中字串轉為DOM物件和DOM物件轉為字串

js文件物件模型DOM

JS中的DOM物件

js 訪問DOM物件

js中字串轉為DOM物件和DOM物件轉為字串

js文件物件模型DOM

相關推薦