DOM节点详解-CSDN博客

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()