Javascript DOM 簡單概述

2021-09-23 14:36:05 字數 1062 閱讀 1578

元素節點-nodetype :1

屬性節點-nodetype :2

文字節點-nodetype :3

遍歷dom選取

document.getelementbyid()。

document.getelementsbyclass()。

document.getelementsbytagname()。

根據已知元素選取

element.nextsubling(),已知元素的下乙個兄弟節點。

element.childnodes[index],已知元素的下標為index的子節點。

element.firstchild/p.lastchild,已知元素的首/末子節點。

使用dom core方法(不僅適用於 html,同時適用於xml等文件)

element.getattribute(attrname);

element.setattribute(attrname, value);

使用html dom 屬性節點-使用 . 法訪問和設定

一般屬性節點,element.src / element.title等。

class屬性節點,使用classname

style屬性節點,如果不是內聯的樣式無法訪問,但可以通過style新增樣式

使用nodevalue,且需要選中該文字節點後才能獲取和設定

element.firstchild.nodevalue = value;

使用innerhtml / document.write()

避免使用document.write()

使用innerhtml無法得知是插入還是替換其中的內容

使用dom方法

建立元素

document.createelement(tagname),創捷元素節點

document.createtextnode(text),建立文字節點

插入元素-需要獲取其父節點parentnode

parentnode.insertbefore(newelement, targerelement),在目標元素前面插入新的元素

javaScript DOM程式設計

1.獲取dom樹的根節點 2.getelementbyid 根據標籤的id獲取標籤元素和getelementsbytagname根據標籤名獲取標籤,返回的是陣列的形式 3.getelementsbynames 根據標籤的name屬性獲取標籤,返回的是陣列形式 有兩個input標籤,因此列印結果是2 ...

JavaScript DOM程式設計

dom document objective model 文字物件模型 例子 clickme 例子 先獲取某一指定的元素節點 再讀指定元素節點的屬性 設定指定元素節點的屬性的值 例子 你喜歡那個城市?你喜歡哪款單擊遊戲?name 先獲取某節點。用childnodes方法獲取指定元素節點的所有子節點。...

javascript DOM 獲取節點

1.獲取元素節點 1.1 通過元素節點的id屬性獲取 語法 document.getelementbyid 元素id屬性的值 例如 1.2 根據元素的名稱獲取,獲取的是所有為該名稱的元素節點組成的陣列,可以用陣列的方法操作該節點陣列 語法 document.getelementsbytagname ...