DOM(Document Object Model)
Node 分为 Document(html)、Element(元素)和 Text(文本),以及其他不重要的。
Node相当于是Document、Element、Text的根元素,Node具有的属性,Document、Element、Text都具有,但Document、Element、Text又各自具有自己的属性(这跟Array、Function与Object的关系是一样的,Array、Function都具有Object的公用属性,但它们又有各自的特性)
Node 的接口
Node具有的接口,Document、Element、Text也都具有。
-
属性
childNodes, firstChild, innerText, lastChild, nextSibling, nodeName, nodeType, nodeValue, outerText, ownerDocument, parentElement, parentNode, previousSibling, textContent
妈的记不住。
如果记不住就背下以下单词:- child / children / parent
- node
- first / last
- next / previous
- sibling / siblings
- type
- value / text / content
- inner / outer
- element
然后互相组合
document.body.childNodes会把回车也当作子节点
document.body.firstChild也会把回车当子节点
document.body.lastChild也会把回车当子节点
document.body.previousSibling也会把回车当子节点
document.body.nextSibling也会把回车当子节点
document.body.children不会把回车当子节点
document.body.firstElementChild不会把回车(文本)当子节点
document.body.lastElementChild不会把回车(文本)当子节点
document.body.previousElementSibling不会把回车(文本)当子节点
document.body.nextElementSibling不会把回车(文本)当子节点
firstElementChild、lastElementChild、previousElementSibling不是Node的属性,是Element的属性。
nodeName都是大写,除了svg,HTML要写成document.documentElement.nodeName(死记硬背)
nodeType取值:
nodeType = 1的Node就是Element;nodeType = 3的Node就是Text;nodeType = 8的Node就是Comment;nodeType = 9的Node就是Document
考点:DocumentFragment性能优化
innerText和textContent区别:
- 方法(如果一个属性是函数,那么这个属性就也叫做方法;换言之,方法是函数属性)
- appendChild()
- cloneNode()
- contains()
- hasChildNodes()
- insertBefore()
- isEqualNode()
- isSameNode()
- removeChild()
- replaceChild()
- normalize() // 常规化
cloneNode():
存在深拷贝和浅拷贝
Document 接口
- 属性
body
characterSet
childElementCount
children
doctype
documentElement
domain
fullscreen
head
hidden
images
links
location
onxxxxxxxxx
origin
plugins
readyState
referrer
scripts
scrollingElement
styleSheets
title
visibilityState
2.方法:
close()
createDocumentFragment()
createElement()
createTextNode()
execCommand()
exitFullscreen()
getElementById()
getElementsByClassName()
getElementsByName()
getElementsByTagName()
getSelection()
hasFocus()
open()
querySelector()
querySelectorAll()
registerElement()
write()
writeln()
Element 接口
自己看mdn