javascript
JS中的DOM
DOM文檔對(duì)象模型
HTML中每個(gè)內(nèi)容(標(biāo)簽、文本內(nèi)容、屬性)都是一個(gè)節(jié)點(diǎn)對(duì)象Node。
node(節(jié)點(diǎn))的屬性
三大屬性:
1、nodeType節(jié)點(diǎn)類型
專門區(qū)分節(jié)點(diǎn)的類型:
document 9
element ? 1
attribute? ? ? ? ?2
? ? text? ? ? ? ? ? ?3
2、nodeName節(jié)點(diǎn)名稱
document #document
? element 全大寫的標(biāo)簽名
? attribute 屬性名
text #text
3、nodeValue節(jié)點(diǎn)值
null
null
屬性
文本內(nèi)容
?
DOM的操作之查找
查找:
1、直接獲取的三個(gè)元素:
html document.documentElement
head .head
body .body
2、節(jié)點(diǎn)關(guān)系
父子關(guān)系:
node.parentNode 返回node的父節(jié)點(diǎn)
node.childNodes 返回Node的所有直接子節(jié)點(diǎn)
node.firstChild 返回node下第一個(gè)子節(jié)點(diǎn)
node.lastChild 返回node下最后一個(gè)子節(jié)點(diǎn)
兄弟關(guān)系:
node.previousSibling 返回當(dāng)前節(jié)點(diǎn)前一個(gè)兄弟節(jié)點(diǎn)
node.nextSibling 獲得當(dāng)前節(jié)點(diǎn)后一個(gè)兄弟節(jié)點(diǎn)
不但包含有用的元素節(jié)點(diǎn),還包含了看不見的換行、空格干擾。
下一種方法只獲取節(jié)點(diǎn)信息:
父子關(guān)系:
elem.parentElement 返回一個(gè)父元素對(duì)象
? ? ? ? .children 返回子元素對(duì)象的集合(IE8支持)
? ? ? ? .firstElementChild? ?返回第一個(gè)子元素對(duì)象?
? ? ? ? .lastElementChild 返回最后一個(gè)子元素對(duì)象
兄弟關(guān)系:
? ? ? ? .previousElementSibling 返回當(dāng)前元素的前一個(gè)兄弟元素對(duì)象
? ? ? ? . nextElementSibling ? 返回當(dāng)前元素的下一個(gè)兄弟元素對(duì)象(IE9+)
按HTML查找
what?
在整個(gè)網(wǎng)頁或指定父元素下,查找屬性或標(biāo)簽符合要求的元素對(duì)象。
what?
只要是按照基本的條件有選擇的查找元素。
四種方法:
1、通過id查找html元素
2、通過類名查找html元素
3、通過標(biāo)簽名查找html屬性
4、通過元素的name屬性查找html元素
按選擇器查找:
按HTML查找每一次只能使用一個(gè)查詢條件,選擇器查找條件復(fù)雜的都可以查找。
1、僅查找一個(gè)元素:
var? elem = 父元素.querySelector(“選擇器”);
2、查找多個(gè)元素:
var? elem = 父元素.querySelectorAll(“選擇器”);
非動(dòng)態(tài)!
?鄙視題: getXXX vs SeletorAPI的差別是什么? 如何選擇?
1、返回值: getXXX 返回值:動(dòng)態(tài)集合
SeletorAPI 返回值:非動(dòng)態(tài)集合
2、效率: getXXX 首次查詢效率高
? SeletorAPI 首次查詢效率低
3、易用: getXXX 條件復(fù)雜是,更繁瑣
SeletorAPI 更簡單,因?yàn)榉爆嵉墓ぷ骶徒唤o了選擇器
如果通過一個(gè)條件就可以得到元素時(shí),首選getXXX;
如果條件復(fù)雜時(shí),首選SeletorAPI
在JS中修改html:
DOM分兩種,核心DOM,HTML DOM。
核心DOM:可以操作一切結(jié)構(gòu)文檔的API(HTML和XML)
優(yōu)點(diǎn):萬能 缺點(diǎn):繁瑣
HTML DOM:對(duì)核心DOM中常用的API的簡化
優(yōu)點(diǎn):簡單 缺點(diǎn):不是萬能,只有對(duì)部分API的簡化
視情況而定使用哪種方法,優(yōu)先用簡單的。
核心DOM訪問屬性:
獲得屬性值:var value = elem.getAttribute("屬性名");
修改屬性值:elem.setAttribute("屬性名","屬性值");
判斷是否包含屬性:var bool != elem.hasAttribute("屬性名");
移除屬性:elem.removeAttribute("屬性名");
HTML DOM屬性:
elem.屬性名;
elem.屬性名 = "屬性值";
elem.屬性名 != ""; //判斷是否為空則判斷是否包含屬性
elem.屬性名 = ""; //屬性名設(shè)為空則刪除
?
轉(zhuǎn)載于:https://www.cnblogs.com/yeming980912/p/10981536.html
總結(jié)
- 上一篇: 八数码(康拓展开标记)及类似题
- 下一篇: Springboot .properti