二、eventtarget 介面
三、node 的介面
2、node的方法
四、document 介面
五、element 介面
其他一、前提概念理解
1. doctype
一般我們說的dom預設是指html document。
部分人就會以為document文件,指的就是html文件。事實上不正確的。
doctype (文件型別)有多種型別,並且針對不同型別的文件提供相應的api。
document是html的上級
只有我們在html頁面的頭部宣告的時候,這時候瀏覽器才會將頁面以html的模式進行渲染,而不是其他的怪異模式。
有關doctype的更多詳情: 請參考部落格 doctype的幾種型別2. node型別或者 搜尋 doctype mdn
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文件是...