DOM:Document/Object/Model
DOM is a tree with nodes, which are divided into document (HTML), element (element), text (text), comment (comment) and others
DOMThe main function is: throughConstructorPutnodeBecomeobjectBy calling theAPI To manipulate objects
——————————————————————————————————————————————————————-
Interface of node
1. Properties
nodeName，nodeType，nodeValue，
childNodes，parentNode，parentElement
firstChild，lastChild，nextSibling，previousSibling
InnerText, textcontent
outerText，ownerDocument
———————————————————————————————————————————————————————————
Some problems needing attention
document.body.childNodes Get child node(will get text node)
document.body.children Get word Tags(text nodes will not be obtained)
How to get text
The difference between innerText (ie) and textconten (Firefox)
(innerText is aware of styles, such as display:none )
(innerText is affected by CSS style and will trigger rearrangement… That is, it will be slower than textcontent.)
How to add text to tags (two ways)
①
div.innerText = 'nice to meet you'The disadvantage of this method is that it will empty your elements, such as the ones in your DivyouAfter adding, your original span and content are gone
②
div.appendChild(document.createTextNode('nice to meet you'))Generate a new node so that the original content is not affected
2. Methods(if an attribute is a function, it is also called a method, in other words, a method is a function property)
.appendChild( )
. clonenode() / / Note.cloneNode(true)Deep copy, the copy is exactly the same as the original;.cloneNode( )For shallow copy, only attributes and tags are cloned, and its child nodes are not cloned
.contains( )
.hasChildNodes( )
.insertBefore( )
. isequalnode() / / equal but not the same, for example, var a = 1; VAR B = 1, then a and B are equal but not the same
. issamenode() / / same, same
. removechild() / / is only removed from the page, but still exists in memory
. replacechild() / / for example, if div1 is replaced with div2, div1 is still in memory
.normalize( )//Routinization
Document interface
Reference link: https://developer.mozilla.org/zh-CN/docs/Web/API/Document
attribute
Anchors / / has been discarded
body
characterSet
childElementCount
children
doctype
documentElement
domain
fullscreen
head
hidden
images
links
location
onxxxxx
origin
plugins
readyState
Referer / / for example, where do you jump to this page? By setting, you can improve the security
……