DOM API

時間 2019-12-05

標籤 dom api 欄目 HTML 简体版

原文原文鏈接

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

DOM節點

DOM的最小組成單位就是節點（node）。DOM樹就是由不一樣類型的節點組成。每一個節點能夠當作是DOM樹上的葉子。node

在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 提供的 APIapp

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下一個元素，會有文本dom

nodeName獲取節點名稱都是大寫，svg是特例，小寫
nodeType獲取節點類型，1是元素節點，3是文本節點，11是DocumentFragment編輯器

textContent會獲取全部元素的內容，包括<script>、style，而innerText不會svg

方法：
appendChild()添加一個子元素
cloneNode()接受參數true，深複製，有多少複製多少；不傳參數，只複製最外面的一個
contains()表示一個元素是否包含另外一個元素
hasChildNodes()表示一個元素是否有子元素，返回Boolean
insertBefore()把一個元素查到另外一個元素前面
isEqualNode()相等，若是是兩個同樣的元素就是true
isSameNode()相同，若是是同一個元素就是true
removeChild()移除子元素，但依然在內存中，只是從頁面中移除
replaceChild()交換一個子元素
normalize() // 常規化this

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()寫一行插件