前端基礎(十九 DOM 獲取 修改DOM)

2021-10-19 10:44:05 字數 1661 閱讀 3564

dom是文件物件模型的縮寫。通過dom,js能訪問和改變html中的所有元素,dom模型被結構化為物件樹:

通過這個物件模型,我們可以在js中對html元素和屬性進行增加、修改和刪除,對css樣式進行修改,還可以增加html事件,並作出反應等。

獲取dom元素常用的方法如下:

document.getelementsbytagname("xx")[number]:通過標籤名獲取

document.getelementsbyname("xx")[number]:通過名字獲取

;//均輸出

<

/script>

<

/body>

二者均能修改dom內容,但不同的是,innerhtml能識別裡面的html標籤,但innertext僅能修改文字內容,無法識別html標籤:

var odiv1 = document.

getelementbyid

("div1");

odiv1.innertext =

"world"

;//輸出 world

odiv1.innerhtml =

"hello"

;//輸出 hello

odiv1.innertext ="";

//輸出

odiv1.innerhtml ="";

//輸出帶h1標籤樣式的 world

odiv1.style.width =

"300px"

; odiv1.style.height =

"300px"

; odiv1.style.backgroundcolor =

"lightblue"

; odiv1.style.textalign =

"center"

; odiv1.style.lineheight =

"300px"

;

修改樣式屬性後:

更於2021.2.15

angular學習筆記 十九 指令修改dom

本篇主要介紹angular使用指令修改dom 使用angular指令可以自己擴充套件html語法,還可以做很多自定義的事情.在後面會專門講解這一塊的知識,這一篇只是起到了解入門的作用.與控制器,過濾器,服務,一樣,可以通過模組例項的directive的方法來建立指令 var somemodule a...

前端基礎之BOM和DOM

bom browser object model 是指瀏覽器物件模型,它使 j ascript 有能力與瀏覽器進行 對話 dom document object model 是指文件物件模型,通過它,可以訪問html文件的所有元素。一 window的子物件 n igator物件 n igator.u...

DOM獲取,修改,新增,刪除 屬性方法

getattribute 屬性名 獲取元素物件指定特性的值 setattribute name,value 設定元素物件指定特性的值 removeattribute 屬性名 刪除元素物件上的指定特性 hasattribute 屬性名 判斷元素物件是否包含指定特性 attributes 獲取元素物件指...