On BOM and DOM (3): DOM node operation - element style modification and DOM content addition, deletion, modification and query

Operation node , First you have to select the node , You have to know the node selector and DOM Node lookup

DOM Node selector

W3C It provides more convenient methods and attributes for locating nodes

getElementById()	One parameter : Element label ID
getElementsByTagName()	One parameter : Element tag name
getElementsByName()	One parameter :name Property name
getElementsByClassName()	One parameter : A string containing one or more class names
querySelector()	receive CSS Selector , Returns the first element matched to , No rules null
querySelectorAll()	receive CSS Selector , Returns an array , No return []

DOM Node relationship and node lookup

Traversing the node tree , Method involved

hasChildNodes()	Contains one or more nodes true
contains()	If it is a descendant node, return true
isEqualNode()	Two nodes refer to the same object : The reference of the incoming node and the reference node returns for the same object true
isSameNode()	It refers to whether two nodes are of the same type , Have equal attributes/childNodes etc.
compareDocumentPostion()	Determine the relationships between nodes
parentNode	Parent node
parentElement	Parent node label element
childNodes	All child nodes
children	First level sub node
firstChild	First child node ,Node Objects form
firstElementChild	The first child tag element
lastChild	The last child node
lastElementChild	The last child tag element
previousSibling	Last sibling node
previousElementSibling	Last brother tag element
nextSibling	Next sibling node
nextElementSibling	Next brother tag element
childElementCount	The number of sub elements in the first layer ( Excluding text nodes and comments )
ownerDocument	The document node pointing to the entire document

node And element The difference between

• element Is contained in node Inside , its nodeType yes 1
• parentElement The match is parent by element The situation of , and parentNode The match is parent by node The situation of .
• When the parent node nodeType No 1, That is not element Node words , its parentElement It would be null

The node relationship diagram is as follows

DOM Node style operation

DOM Node style operation , You can set class, Set the style

operation className

className: Return to node style , You can set  className="demo1 class2"

classList : Returns an array of all class names

• add （ add to ）
• contains （ Is there any class, There is returned true, Otherwise return to false）
• remove（ Delete ）
• toggle（ Delete if it exists , Otherwise, add ）

operation style Method

style.cssText	But for style Read and write the code in
style.item()	Returns the value of a given location CSS Name of property
style.length	style Number of parameters in code block
style.getPropertyValue()	Returns the string value of the given property
style.getPropertyPriority()	Check whether the given property is set !important, Return is set "important"; Otherwise, an empty string is returned
style.removeProperty()	Delete the specified attribute
style.setProperty()	Set properties , There are three parameters : Set property name , Setting property values , Is it set to "important"( Don't write or write "")

DOM Content manipulation

Text node TEXT

innerText	All plain text content , Include text in child Tags
outerText	And innerText similar
innerHTML	All child nodes ( Including elements 、 Comments and text nodes )
outerHTML	Returns its own node and all its children
textContent	And innerText similar , Returned content with style
data	Text content
length	Text length
createTextNode()	Create text
normalize()	Remove the space between the text and the text
splitText()	Division
appendData()	Additional
deleteData(offset,count)	from offset Start deletion at the specified location count Characters
insertData(offset,text)	stay offset Insert at the specified location text
replaceData(offset,count,text)	Replace , from offset Start to offscount The text at is deleted text Replace
substringData(offset,count)	Extract from ffset Start to offscount The text at

innerText、innerHTML、outerHTML、outerText

• innerText: Represents the text between the start tag and the end tag   
• innerHTML: That represents all elements and text of an element HTML Code   
• outerText: The difference from the former is that the whole target node is replaced , Question return and innerText The same thing   
• outerHTML: The difference from the former is that the whole target node is replaced , Returns the complete of the element HTML Code , Including the element itself

Document nodes Document

document.documentElement	Represents the <html> Elements
document.body	Represents the <body> Elements
document.doctype	representative <!DOCTYPE> label
document.head	Represents the <head> Elements
document.title	representative <title> The text of the element , Modifiable
document.URL	Current page URL Address
document.domain	The domain name of the current page
document.charset	The character set used by the current page
document.defaultView	Returns the current  document Object is associated with  window  object , No return  null
document.anchors	All bands in the document name Attribute <a> Elements
document.links	All bands in the document href Attribute <a> Elements
document.forms	All in the document <form> Elements
document.images	All in the document <img> Elements
document.readyState	Two values :loading( Loading document )、complete( Finished loading document )
document.compatMode	Two values ：BackCompat： Standard compatibility mode off 、CSS1Compat： Standard compatibility mode on
write()、writeln()、open()、close()	write() The text is output to the screen as is 、writeln() Line feed after output 、open() Empty content and open new document 、close() Close the current document , Next time I write a new document

DOM Basic operational mind map

Reference article ：

ECMAScript、BOM、DOM（ The core 、 Browser object model and document object model ）https://www.cnblogs.com/best/p/8028168.html

JavaScript Learning summary （ 3、 ... and ）BOM and DOM Detailed explanation  https://segmentfault.com/a/1190000000654274

Javascript operation BOM and DOM Detailed explanation （1） https://blog.csdn.net/openbox2008/article/details/85260063

JavaWeb Learning summary ：JavaScript（BOM and DOM） https://blog.csdn.net/weixin_42384085/article/details/99807198

HTML DOM Event object  https://www.w3school.com.cn/jsref/dom_obj_event.asp

XML DOM - Element object  https://www.w3school.com.cn/xmldom/dom_element.asp

JAVAScript in DOM And BOM The difference analysis of https://www.cnblogs.com/fjner/p/5892325.html

Reprint This station article 《 We can talk BOM and DOM(3):DOM Node operation - Element style modification and DOM Content addition, deletion, modification and query 》, Please indicate the source ：https://www.zhoulujun.cn/html/webfront/SGML/xml/2020_0317_8345.html