DOM API

2023年11月30日 110次阅读 来源: UCCs

Node派生自Object，它包括Element、Text、Document(html)、Coment，假如一個 API 是Node的，那它的子類也具有。

DOM節點

DOM的最小構成單元就是節點（node）。DOM樹就是由差別範例的節點構成。每一個節點能夠看成是DOM樹上的恭弘=叶 恭弘子。

在DOM中，節點的範例一共有7種
Document：全部文檔樹的頂層節點；
DocumentType：dotype標籤（比方：<!DOCTYPE html>）
Element：網頁的種種HTML標籤（比方：<body> <h> <a> <div>）
Attribute：網頁元素的屬性（比方：id="id" class="class" type="text"）
Text：標籤之間或標籤包括的文本
Comment：解釋
DocumentFragment：文檔片斷

Node 的接口

屬性：
DOM API 記着下面的英文單詞后各自組合就是 DOM 供應的 API

child/children/parent
node
first/last
next/previous
sibling/siblings
type
value/text/content
inner/outer
element

innerText增加文本，會掩蓋原有文本
childNodes獵取一切的子元素（會獵取到回車）
children獵取一切的子標籤，沒有文本
firstChild第一個元素，會有文本
lastChild末了一個元素，會有文本
firstElementChild，第一個標籤，沒有文本
previousSibling上一個元素，會有文本
nextSibling下一個元素，會有文本
previousElementSibling下一個標籤，沒有文本
nextSibling下一個元素，會有文本

nodeName獵取節點稱號都是大寫，svg是慣例，小寫
nodeType獵取節點範例，1是元素節點，3是文本節點，11是DocumentFragment

textContent會獵取一切元素的內容，包括<script>、style，而innerText不會

要領：
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()寫一行

Elelment

屬性：
innertext用戶輸入啥就是啥
innerHTML假如用戶輸入標署名會寫入HTML

ChildNode接口

用於處置懲罰子節點（包括但不限於Element子節點）。Element節點、DocumentType節點和CharacterData接口，布置了ChildNode接口。通常這三類節點（接口），都能夠運用下面四個要領。

(1)remove()移除當前節點
(2)before(), (3)after() , (4)replaceWith()

    原文作者：UCCs
    原文地址: https://segmentfault.com/a/1190000014856721
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞