摘要:派生自,它包括,如果一個是的,那它的子類也擁有。節點的最小組成單位就是節點。樹就是由不同類型的節點組成。每個節點可以看成是樹上的葉子。節點節點和接口,部署了接口。凡是這三類節點接口,都可以使用下面四個方法。
Node派生自Object,它包括Element、Text、Document(html)、Coment,如果一個 API 是Node的,那它的子類也擁有。
DOM節點DOM的最小組成單位就是節點(node)。DOM樹就是由不同類型的節點組成。每個節點可以看成是DOM樹上的葉子。
在DOM中,節點的類型一共有7種 屬性: innerText添加文本,會覆蓋原有文本 nodeName獲取節點名稱都是大寫,svg是特例,小寫 textContent會獲取所有元素的內容,包括、style,而innerText不會 方法: 屬性: 方法: 屬性: 用于處理子節點(包含但不限于Element子節點)。Element節點、DocumentType節點和CharacterData接口,部署了ChildNode接口。凡是這三類節點(接口),都可以使用下面四個方法。 (1)remove()移除當前節點 文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。 轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/94980.html
Document:整個文檔樹的頂層節點;
DocumentType:dotype標簽(比如:)
Element:網頁的各種HTML標簽(比如:
Attribute:網頁元素的屬性(比如:id="id" class="class" type="text")
Text:標簽之間或標簽包含的文本
Comment:注釋
DocumentFragment:文檔片段
Node 的接口
DOM API 記住下面的英文單詞后各自組合就是 DOM 提供的 APIchild/children/parent
node
first/last
next/previous
sibling/siblings
type
value/text/content
inner/outer
element
childNodes獲取所有的子元素(會獲取到回車)
children獲取所有的子標簽,沒有文本
firstChild第一個元素,會有文本
lastChild最后一個元素,會有文本
firstElementChild,第一個標簽,沒有文本
previousSibling上一個元素,會有文本
nextSibling下一個元素,會有文本
previousElementSibling下一個標簽,沒有文本
nextSibling下一個元素,會有文本
nodeType獲取節點類型,1是元素節點,3是文本節點,11是DocumentFragment
appendChild()添加一個子元素
cloneNode()接受參數true,深復制,有多少復制多少;不傳參數,只復制最外面的一個
contains()表示一個元素是否包含另一個元素
hasChildNodes()表示一個元素是否有子元素,返回Boolean
insertBefore()把一個元素查到另一個元素前面
isEqualNode()相等,如果是兩個一樣的元素就是true
isSameNode()相同,如果是同一個元素就是true
removeChild()移除子元素,但依然在內存中,只是從頁面中移除
replaceChild()交換一個子元素
normalize() // 常規化var wrapper = document.createElement("div");
wrapper.appendChild( document.createTextNode("Part 1 ") );
wrapper.appendChild( document.createTextNode("Part 2 ") );
// At this point, wrapper.childNodes.length === 2
// wrapper.childNodes[0].textContent === "Part 1 "
// wrapper.childNodes[1].textContent === "Part 2 "
wrapper.normalize();
// Now, wrapper.childNodes.length === 1
// wrapper.childNodes[0].textContent === "Part 1 Part 2 "
Document接口是Document特有的,window.document所符合的就是這個接口,document是html的父元素,但html還是根元素
body獲取body元素
characterSet獲取字符編碼
childElementCount子標簽的數量,無符號長整型數字
children
doctype
documentElementhtml元素
domain
fullscreen
head
hidden
images
links
location
onxxxxxxxxx
origin
plugins檢測插件
readyState
referrer引薦
scripts
scrollingElement獲取正在滾動的元素
styleSheets
title
visibilityState頁面是否被顯示,正在看頁面,返回true
close()關閉文檔
createDocumentFragment()
createElement()
createTextNode()創建一個文本節點
execCommand()寫一個富文本編輯器時可以用到
exitFullscreen()退出全屏
getElementById()
getElementsByClassName()
getElementsByName()通過name屬性
getElementsByTagName()通過標簽名
getSelection()回去用戶選中的文本
hasFocus()用戶是否Focus到上面
open()
querySelector()通過選擇器獲取,返回一個選擇器(數組的形式,不過是偽數組)
querySelectorAll()通過選擇器獲取,返回所以選擇器(數組的形式,不過是偽數組)
write()寫
writeln()寫一行
innertext用戶輸入啥就是啥
innerHTML如果用戶輸入標簽名會寫入HTML
(2)before(), (3)after() , (4)replaceWith()
摘要:通過解析器獲取文檔對象后,開發人員可以很方便的對其進行操作,如獲取更元素,獲取一個子元素,增加子元素,移除子元素。它并沒有為解析提供任何新功能,但是它為在獲取與解析器提供了更加直接的途徑。自身不包含解析器,默認使用隨包一起發行的。 showImg(/img/bVDhQE?w=888&h=220); 文章最初發表于我的個人博客非典型性程序猿 眾所周知,SAX與DOM是JAVA中兩大核心X...
摘要:通過解析器獲取文檔對象后,開發人員可以很方便的對其進行操作,如獲取更元素,獲取一個子元素,增加子元素,移除子元素。它并沒有為解析提供任何新功能,但是它為在獲取與解析器提供了更加直接的途徑。自身不包含解析器,默認使用隨包一起發行的。 showImg(https://segmentfault.com/img/bVDhQE?w=888&h=220); 文章最初發表于我的個人博客非典型性程序猿...
摘要:事件觸發和監聽事件相關。文檔是一個由標簽嵌套而成的樹形結構,因此,也是使用樹形的對象模型來描述一個文檔。節點的寫法三是樹繼承關系的根節點。七表示一個上的范圍,這個范圍是以文字為最小單位的。 筆記說明 重學前端是程劭非(winter)【前手機淘寶前端負責人】在極客時間開的一個專欄,每天10分鐘,重構你的前端知識體系,筆者主要整理學習過程的一些要點筆記以及感悟,完整的可以加入winter的...
摘要:事件觸發和監聽事件相關。文檔是一個由標簽嵌套而成的樹形結構,因此,也是使用樹形的對象模型來描述一個文檔。節點的寫法三是樹繼承關系的根節點。七表示一個上的范圍,這個范圍是以文字為最小單位的。 筆記說明 重學前端是程劭非(winter)【前手機淘寶前端負責人】在極客時間開的一個專欄,每天10分鐘,重構你的前端知識體系,筆者主要整理學習過程的一些要點筆記以及感悟,完整的可以加入winter的...
摘要:事件觸發和監聽事件相關。文檔是一個由標簽嵌套而成的樹形結構,因此,也是使用樹形的對象模型來描述一個文檔。節點的寫法三是樹繼承關系的根節點。七表示一個上的范圍,這個范圍是以文字為最小單位的。 筆記說明 重學前端是程劭非(winter)【前手機淘寶前端負責人】在極客時間開的一個專欄,每天10分鐘,重構你的前端知識體系,筆者主要整理學習過程的一些要點筆記以及感悟,完整的可以加入winter的...
閱讀 2965·2021-11-23 10:12
閱讀 2690·2021-11-23 09:51
閱讀 2040·2021-11-15 11:37
閱讀 1352·2019-08-30 15:55
閱讀 1965·2019-08-29 15:40
閱讀 1165·2019-08-28 18:30
閱讀 1650·2019-08-28 18:02
閱讀 2640·2019-08-26 12:00