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...