[笔记]WEB开发之3456：DOM4

part1:文档节点(HTMLDocument/Document/document)
1.1元数据
characterSet
charset
compatMode
cookie
defaultCharset
defaultView
dir
domain
implementation
lastModified
location
readyState
referrer
title
URL
doctype
documentElement
1.2特定元素/类型
activeElement/HTMLElement
body/HTMLElement
embeds,plugins/HTMLCollection
forms/HTMLCollection
head/HTMLHeadElement
images/HTMLCollection
links/HTMLCollection
scripts/HTMLCollection

1.3方法/搜索元素
getElementById(<id>)
getElementsByClassName(<class>)
getElementsByName(<name>)
getElementsByTagName(<tag>)
querySelector(<selector>)
querySelectorAll(<selector>)

1.4关系
childNodes
firstChild
hasChildNodes()
lastChild
nextSibling
parentNode
previousSibling
>>更多:https://developer.mozilla.org/en-US/docs/Web/API/document

part2:元素节点(HTML*Element/Element)
2.1元数据对象
base/HTMLBaseElement
body/HTMLBodyElement
link/HTMLLinkElement
meta/HTMLMetaElement
script/HTMLScriptElement
style/HTMLStyleElement
title/HTMLTitleElement
2.2文本元素
2.2.1 a/HTMLAnchorElement
属性:href,target,rel,media,hreflang,type,text,protocol,host,hostname,port,pathname,search,hash
>>更多:https://developer.mozilla.org/en-US/docs/Web/API/HTMLAnchorElement
2.2.2 其它文本
del和ins/HTMLModElement
q/HTMLQuoteElement
time/HTMLTimeElement
br/HTMLBRElement
span/HTMLSpanElement

2.2.3没有专属对象
abbr,b,cite,code,dfn,em,i,u,kbd,mark,rt,rp,ruby,s,samp,small,strong,sub,sup,var,wbr

2.3分组
blockquote/HTMLQuoteElement
li/HTMLLIElement
ol/HTMLOLListElement

div/HTMLDivElement
dl/HTMLDListElement
hr/HTMLHRElement
p/HTMLParagraphElement
pre/HTMLPreElement
ul/HTMLUListElement

2.4区块
details/HTMLDetailsElement
h1-h6/HTMLHeadingElement

没有专属对象
address,article,aside,footer,header,hgroup,nav,section,summary

2.5表格
col,colgroup/HTMLTableColElement
table/HTMLTableElement
thead,tbody,tfoot/HTMLTableSectionElement
th/HTMLTableHeaderCellElement
tr/HTMLTableRowElement
caption/HTMLTableCaptionElement


2.6表单
button/HTMLButtonElement
datalist/HTMLDataListElement
fieldset/HTMLFieldSetElement
form/HTMLFormElement
input/HTMLInputElement
label/HTMLLabelElement
legend/HTMLLegendElement
optgroup/HTMLOptGroupElement
option/HTMLOptionElement
output/HTMLOutputElement
select/HTMLSelectElement
textarea/HTMLTextAreaElement

2.7内容元素
area/HTMLAreaElement
embed/HTMLEmbedElement
iframe/HTMLFrameElement
img/HTMLImageElement
map/HTMLMapElement
meter/HTMLMeterElement
object/HTMLObjectElement
param/HTMLParamElement
progress/HTMLProgressElement

2.8Element属性
accessKey,attributes,id,name,length,tagName,
classList,className,
clientHeight,clientLeft,clientTop,clientWidth,
innerHTML,outerHTML,
scrollLeft,scrollTop,scrollWidth,scrollHeight

2.9Element方法
2.9.1
getAttribute
getAttributeNS
getAttributeNode
getAttributeNodeNS

hasAttribute
hasAttributeNS

removeAttribute
removeAttributeNS
removeAttributeNode

setAttribute
setAttributeNode
setAttributesNS
setAttributeNodeNS
2.9.2
querySelector,
querySelectorAll
getElementsByClassName
getElementsByTagName
getElementsByTagNameNS
2.9.3
insertAdjacentHTML

2.10继承关系
HTML*Element > HTMLElement > Element > Node > Object

HTMLElement:https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement

part3:文本节点
3.1创建
空白和文本字符不论是在解析或编程创建时都是文本节点。除非压缩html文档，不然页面都包含大量的空白符与回车的文本节点

var ts=document.createTextNode('内容');
element.appendChild(ts)

3.2获取值
element.data或element.nodeValue

3.3操作文本节点
appendData()
deleteData()
insertData()
replaceData()
subStringData()

splitText()
appendData()
注意:各浏览器实现不一致,列的内容不是所有浏览器都有实现

3.4textContent VS innerText

1> firefox不支持innerText

2> innerText关心css,它将触发一次重排,textcontent不会

3> innerText无视<style>,<script>中的的Text节点

4> innerText会使返回的文本规范化,textContent完全按照文档所含返回,仅移除标记,返回的字符串包括：空白，回车，换行符

5> innerText认为是非标准的而且特定于浏览器,textContent依据DOM规范实现

3.5合并兄弟文本节点
element.normalize()

3.6分割文本节点
element.splitText(<length>)

3.7继承关系
Text > CharacterData > Node > Object