DOM節點及高階操作

2021-09-26 10:52:32 字數 1514 閱讀 1577

（1）attributes得到dom屬性節點（包含所有的預設屬性、自定義屬性的屬性名和屬性值）
（2）getattribute()，得到某個屬性值，括號裡為屬性名，可得到所有屬性（預設屬性和自定義屬性）

console.log(obox.getattribute("id"));


console.log(obox.getattribute("class"));


console.log(obox.getattribute("data"));
（3）setattribute()，設定某屬性的屬性值（無則新增）

obox.setattribute("class","test2");
（4）removeattribute()，移除某個屬性

obox.removeattribute("class");
dom節點（分為三大類，元素節點、屬性節點、文字節點）

nodetype（節點型別）  nodename（節點名）  nodevalue（節點值）

元素    1        標籤名（如div）    null

屬性    2        屬性名        屬性值

文字    3        #text        文字內容
innertext innerhtml outerhtml（都是可讀可寫）

（1）innertext 文字內容

（2）innerhtml 可寫帶標籤的內容

（3）outerhtml 包含該元素標籤的整個內容

hahaha


今天週六


xixixi
firstchild/lastchild/parentnode/previoussibling/nextsibling

以firstchild為例，其他類似

aaa
（1）得到第乙個子元素：

ofirst=oul.firstelementchild || oul.firstchild

（2）得到最後乙個子元素：

olast=oul.lastelementchild || oul.lastchild

（3）下乙個兄弟元素：

onext=oul. nextelementsibling || oul.nextsibling

（4）上乙個兄弟元素：

oprevious=oul. previouselementsibling || oul. previoussibling

box.insertbefore(newnode, existnode)，在節點之前插入新的節點

DOM節點操作

節點型別 nodetype nodename nodevalue 含義element node 1標籤名 eg div null 元素節點 attribute node 2特性名 eg class 特性值特性節點 text node 3 text 文字的內容 文字節點 cdata section n...

操作dom節點

取到節點物件可以，我們可以建立乙個節點後動態插入到dom節點樹中 html中 1 建立乙個文字節點 第一段第二段 第三段 js var div document getelementsbytagname div 0 var textnode document createtextnode 文字節點 ...

DOM 節點操作

方法名 只能document呼叫 返回單一的值 返回動態集合 getelementbyid getelementsbytagname getelementsbyclassname queryselectorall queryselector 建立節點document.createelement ta...