文件物件模型 DOM

2022-05-01 15:48:10 字數 2383 閱讀 4051

dom:文件物件模型,核心物件document,對html元素的樣式(顏色、屬性、位置)、內容、屬性進行動態的改變和操作

一、document物件

1.屬性

title   返回或設定當前文件的標題   "標題名"

url   返回當前文件的url            //只能獲取不能設定

bgcolor  設定文件的背景色

fgcolor   設定文件的前景色(設定文字顏色)

2.方法(獲取元素的方法)

document.getelementbyid("")   //通過id名獲取元素,id名是唯一的

document.getelementbytagname()          //通過標籤名獲取元素集合,不是陣列,但可通過陣列的方式訪問

document.getelementbyclassname()     //通過類名獲取元素,存在相容性問題

document.getelementbyname()             //通過表單的name名獲取元素

document.queryselector()                    //萬能選擇器,與jquery中的$選擇器類似,可通過類名、標籤名等獲取元素

document.queryselectorall()               //獲取元素集合

3.document物件集合

docment.all          文件所有元素的集合

document.forms    文件forms物件的集合

document.anchors   文件錨鏈結的集合

document.links          文件所有鏈結的集合,包括地圖

document.images       文件所有的集合

二、元素操作

1.元素內容的獲取與設定

<

div

class

="word"

id="list" str="自定義屬性"

>

我是文字內容

div>

1)元素內容

var obj=document.queryselector("div");

console.log(obj.innerhtml)

obj.innertext="修改後的文字內容"console.log(obj.innertext)

獲取:innerhtml  獲取或設定文字內容,包括空格文字

innertext   獲取或設定文字內容

ps(innerhtml與document.write 的區別:

document.write直接輸出到瀏覽器中,並且可繼續新增write新增內容,innerhtml是對dom元素的操作,獲取或設定文字內容,並且將所有文字內容替換)

設定:obj.innerhtml="設定的文字內容"    

obj.innertext="設定的文字內容"

2)元素的屬性

獲取:對於標籤自帶屬性id class等可以直接獲取,

對於自定義屬性,可通過getattribute獲取

console.log(obj.classname)

console.log(obj.id)

console.log(obj.getattribute("class"))

console.log(obj.getattribute("str"))

設定:直接設定  obj.classname="aa";

通過setattribute設定屬性      obj.setattribute("str","list")

3)元素的樣式

獲取:obj.style.css屬性         //只能獲取行內樣式

getcomputedstyle(元素物件,null).css屬性            //獲取非行內樣式,只能獲取不能設定

obj.currentstyle.css屬性                                    //ie瀏覽器中獲取非行內樣式,只能獲取不能設定

//對於非行內樣式中的屬性,有連字元的屬性去掉連字元,首字母大寫(w3c標準),getcomputedstyle在ie中會直接報錯,有相容性問題,因此在封裝函式時不可作為判定條件

設定:(設定的屬性都是行內樣式,優先順序最高,因此注意樣式的覆蓋)

單個屬性樣式的設定       obj.style.css屬性="";

多個屬性樣式的設定       obj.style.csstext="width:200px;height:100px";   //多個屬性的設定直接將行內樣式的style重新設定

先給屬性新增樣式,在通過js給元素新增屬性

2.元素操作

1)元素的大小

DOM 文件物件模型

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

DOM文件物件模型

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

DOM文件物件模型

文件 標記型文件 html xml 物件 封裝了屬性和行為 模型 共性特徵的體現 dom解析html 1 通過dom的方法,把html全部 元素 標籤 文字 屬性 都封裝成了物件 2 dom想要操作標記型文件先解析 解析器 dom解析html 瀏覽器也可以解析html dom的三個級別 1 將htm...