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

Elelment

属性：
innertext用户输入啥就是啥
innerHTML若是用户输入标签名会写入HTML

ChildNode接口

用于处理子节点（包含但不限于Element子节点）。Element节点、DocumentType节点和CharacterData接口，部署了ChildNode接口。凡是这三类节点（接口），均可以使用下面四个方法。

(1)remove()移除当前节点
(2)before(), (3)after() , (4)replaceWith()