js中的DOM 簡解

2021-09-02 05:39:50 字數 2748 閱讀 7055

二、eventtarget 介面

三、node 的介面

2、node的方法

四、document 介面

五、element 介面

其他一、前提概念理解

1. doctype

一般我們說的dom預設是指html document。

部分人就會以為document文件,指的就是html文件。事實上不正確的。

doctype (文件型別)有多種型別,並且針對不同型別的文件提供相應的api。

document是html的上級

只有我們在html頁面的頭部宣告的時候,這時候瀏覽器才會將頁面以html的模式進行渲染,而不是其他的怪異模式。

有關doctype的更多詳情: 請參考部落格 doctype的幾種型別

或者 搜尋 doctype mdn

2. node型別

hello world

知道這個後,可以幫助我們理解document 提供給我們的api;

//在控制台列印以下語句,

console.log(document.body) //body的建構函式是element

console.dir(tt.firstchild) //hello world 的建構函式是 text

//注意我在id為div1中寫注釋,中間沒有換行。如果換行了,換行符算乙個文字節點,只是在瀏覽器上不會顯示換行符

console.dir(div1.firstchild) // 注釋的 建構函式是comment

二、eventtarget 介面

eventtarget是乙個由可以接收事件的物件實現的介面,並且可以為它們建立偵聽器。

常用方法有(可支援用on來設定事件處理程式)

div.addeventlistener("click",function())

div.onclick = function(){}

三、node 的介面

1、node的屬性(常用)

1.1節點結構關係屬性

獲取父元素

node.parentelement,

node.parentnode,

獲取兄弟元素

1.2 節點自身特徵屬性常量值

描述node.element_node

1乙個 元素 節點,例如

node.text_node

3element 或者 attr 中實際的 文字

node.processing_instruction_node

7乙個用於xml文件的

node.comment_node

8乙個 comment 節點

node.document_node

9乙個 document 節點

node.document_type_node

10描述文件型別的 documenttype 節點。例如 就是用於 html5 的。

node.document_fragment_node

11乙個 documentfragment 節點

2、node的方法

(如果乙個屬性是函式,那麼這個屬性就也叫做方法;換言之,方法是函式屬性)

clonenode() — 拷貝節點

node.clonenode() — 只拷貝元素本身(淺拷貝)

node.clonenode(true) — 拷貝元素本身及其元素下所有的子元素。(深拷貝)

contains()

haschildnodes() — 返回boolean值,判斷是否有子節點

insertbefore()

isequalnode() / issamenode() 這兩個有細微的差別。但一般用不到

removechild()

replacechild()

normalize() // 常規化

四、document 介面

1、document 的屬性

用於指向其他節點(快捷獲取某些特殊節點)的屬性

document.documentelement指向 dom 的 html節點

document.activeelement指向獲得焦點的那個節點

返回文件特定元素的偽陣列集合的屬性

document.links

document.forms

document.images

document.embeds

等等返回文件資訊的屬性

document.location

document.readystate返回的是當前文件的狀態,等等

2、document 的方法

方法方法

getelementbyid()

getelementsbyclassname()

getelementsbyname()

getelementsbytagname()

getselection()

queryselector()

queryselectorall()

open()

write()

五、element 介面

其他window物件於document物件的區別

window 物件表示瀏覽器中的內容,而 document 物件是文件本身的根節點(html)。

JS中的DOM事件

1.html事件處理程式 html事件缺點 html和js 緊密的耦合在一起,js 個html都需要進行修改。2.dom0級事件處理程式 較傳統的方式 把乙個函式賦值給乙個事件的處理程式屬性用的比較多的方法,簡單,跨瀏覽器的優勢 沒有html事件處理程式的缺點。3.dom2級事件處理程式 dom2級...

js中Dom的學習

dom document object model 即文件物件模型,意思是html文件中每乙個元素都是乙個物件節點。節點型別以及對應值如下 需要注意的是 getelementbyid獲得到的是單個節點,而其他方法獲得到的是乙個集合 哪怕最終取到的只有乙個元素 從語義上也能看出來。簡單演示 獲取id為...

JS中的DOM物件

主要是操作html 內容 dom document object model w3c api標準 是w3c組織推薦的處理可擴充套件置標語言的標準程式設計介面。它是一種與平台和語言無關的應用程式介面 api 它可以動態地訪問程式和指令碼,更新其內容 結構和www文件的風格 目前,html和xml文件是...