js學習 5 操作DOM物件

2021-10-07 20:52:37 字數 1421 閱讀 7903

dom:文件物件模型

瀏覽器網頁就是乙個dom樹形結構

更新:更新dom節點

遍歷dom節點:得到dom節點

刪除:刪除dom節點

新增:新增乙個新的節點

要操作乙個dom節點,就必須要先獲得這個節點

獲得節點

window.

onload

=function()

更新節點

h2.innertext =

"我是h2"

;//設定文字

p1.innerhtml =

; h2.style.color =

"red"

;//設定樣式:顏色

刪除節點

獲取父節點,然後通過父節點刪除子節點

box.

removechild

(p1)

;

注意,刪除多個節點時,節點是時刻變化的

插入節點

let p2 = document.

getelementbyid

("p2");

box.

(p2)

;let p3 = document.

createelement

("p");

p3.innertext =

"我是新新增的p3"

; box.

(p3)

;

最後附上完整**:

<

!doctype html>

"en"

>

"utf-8"

>

title<

/title>

window.

onload

=function()

<

/script>

<

/head>

"p2"

>

<

/p>

"box"

>

="h2"

>

<

/h2>

"p1"

>

<

/p>

"div1"

>

<

/div>

<

/h3>

<

/div>

<

/body>

<

/html>

Js操作 DOM操作

一 節點屬性 dom 是樹型結構,相應的,可以通過一些節點屬性來遍歷節點樹 方法說明 nodename 節點名稱,相當於tagname.屬性節點返回屬性名,文字節點返回 text。nodename,是唯讀的。nodetype 節點的型別,返回值 1,元素節點 2,屬性節點 3,文字節點。nodety...

js 訪問DOM物件

document物件 document物件實際上是window物件的屬性.所以,如下訪問是正確的 window.document.document 有許多屬性 常用的,可讀寫的 document.title 改變頁面標題 document.url 載入新頁面 document集合 document....

js操作dom節點

1.訪問節點 document.getelementbyid id 返回對擁有指定id的第乙個物件進行訪問 document.getelementsbyname name 返回帶有指定名稱的節點集合 注意 elements document.getelementsbytagname tagname ...