DOM文件物件模型(一)

2021-10-20 21:22:49 字數 2124 閱讀 9631

輸出內容(了解)

write()

將內容輸出到瀏覽器中

語法:document.write()

writeln()

向文件寫入資料並新增換行符

語法:document.writeln()

快速獲取元素(了解*)

document.forms⭐(掌握)

獲取所有form物件引用

由於form是用來提交資料的,是前後端進行連線的一種技術手段,所以獲取form表單的方法一定要掌握

通過js快速獲取表單物件:

document.forms[0].username ==> 獲取表單中使用者名稱的元素物件

document.images

返回文件中所有image物件引用

document.embeds

獲取所有嵌入內容的 embed集合

document.links

獲取所有的link物件引用

document.scripts

獲取指令碼物件引用

document.title

獲取文件標題

document.domain

獲取文件的網域名稱

document.body

獲取文件中的 body元素

document.referrer

獲取載入當前文件的文件的url

document.cookie

獲取文件中的所有的cookie

選擇器(重點)

id選擇器:根據元素的id屬性來獲取指定的元素

語法:document.getelementbyid(「id名」)

返回值:文件中擁有此id名的元素物件

舉例:(假設有個id值為tmain的div標籤)

var maindiv  = document.getelementbyid

('main'

);//獲取id值為『main』的元素

cosole.log

(maindiv)

;

語法:document.getelementsbytagname(『標籤名』);

返回值:文件中擁有此標籤名的元素集合

舉例:(假設有個標籤名為div的多個元素)

var tags = document.getelementsbytagname

('div'

);//獲取標籤名為『div』的元素集合

cosole.log

(tags)

;

語法:document.getelementsbyname(『name名』);

返回值:文件中帶有指定name值的物件集合

舉例:(假設有個name值為task的input標籤)

var names = document.getelementsbyname

('task'

);//獲取name值為『task』的元素集合

console.log

(names)

;

語法:document.getelementsbyclassname(『類名』);

返回值:文件中所有指定類名的元素集合

舉例:(假設有個類名為task的p標籤)

var tasks = document.getelementsbyclassname

('task'

);//獲取類名為『task』的元素集合

cosole.log

(tasks)

;

5. 使用css選擇器選中dom元素

語法:document.queryselector('css選擇器');

- 永遠返回第乙個選中的元素

- 必須按照css的寫法來寫,例如#main,.task等等

返回值:根據css選擇器獲取第乙個匹配的元素

語法:document.queryselectorall('css選擇器');

返回值:根據css選擇器獲取所有匹配元素的列表

文件物件模型 DOM 一

首先看一下dom樹結構 每個節點都是乙個物件,擁有方法和屬性。指令碼可以訪問以及更新dom樹 不是源 針對dom樹的修改都會反映到瀏覽器。訪問並更新dom樹需要兩個步驟 一 定位到與需要操作的元素所對應的節點 訪問元素的相關方法和屬性 1.選擇單個元素節點方法 1 getelementbyid 使用...

DOM 文件物件模型

dom 文件物件模型 概念的推出,這個api使html如虎添翼,但是有些學dhtml的朋友還是有些困撓,只是因為目前的手冊的書寫不太科學,是按字母 來分的,不便查閱.其實dom中最關鍵是要掌握節點與節點之間的關係 between node andnode 想學習dhtml中的dom千萬不要從頭到尾地...

DOM文件物件模型

dom document object model文件物件模型 用來將標記型文件的文件封裝成物件,並且將文件中的所有的類容 文字,屬性,屬性值 分裝成為物件。封裝的目的是為了更好的對文字文件進行操作。有了物件就可以更好的利用文件對其中的屬性和值進行呼叫。document 標記型文件 object 封...