JavaScript—DOM basic learning

1. DOM description

• DOM (Document Object Model), Document Object Model (DOM) is a programming interface for HTML and XML documents. It provides a structured representation of a document and defines a way to access this structure from within a program to change the structure, style, and content of the document. DOM parses a document into a structured collection of nodes and objects (objects that contain properties and methods). In short, it links web pages with scripting or programming languages.
  ——————— Quoted from the official website

---

2. DOM node tree

• JS operates the webpage, which will turn the entire webpage into a node tree, and operate the node tree through DOM, so as to realize the operation of the webpage. The node tree is classified as follows:

type	describe	Node Value (NodeValue)	Node name (NodeName)	Node type (NodeType)
document node	Document //The entire document	Null	#document	9
element node	Element //html tag	Null	HTML	1
text node	Text //text	Text content (spaces and newlines are also text content)	#Text	3
comment node	Comment //Comment	N/A	N/A	N/A
attribute node	Attr //attribute	attribute value	attribute name	2

(1) Node object properties

1) Node attributes

Attributes	describe
parentNode	Returns the parent node of the current node
childNodes	Returns all child nodes of the current node
children	Returns all element children of the current node
firstChild	Returns the first child node of the current node
firstElementChild	Returns the first element child of the current node
lastChild	Returns the last child node of the current node
lastElementChild	Returns the last element child of the current node
nextSibling	Returns the next node of the current node
nextElementSibling	Returns the next element node of the current node
prevSibling	Returns the previous node of the current node
prevElementSibling	Returns the previous element node of the current node
document.body	Navigate to the body tag

(2) Get node elements

1) Obtain by ID

example	describe	Value method
document.getElementById( “ID name” )	Return a node object, you can get the content by object value	document.getElementById( "ID name" ).Key name

2) Obtain according to Name

example	describe	Value method
document.getElementByName( “Name” )	Returns a list of nodes, the content can be obtained by subscripting the array	document.getElementsByName( "name" )[subscript]

3) Obtain according to ClassName

example	describe	Value method
document.getElementsByClassName(“类名”)	Returns a list of nodes, the content can be obtained by subscripting the array	document.getElementsByClassName( "ClassName" ) [subscript]

4) Obtain according to tagName

example	describe	Value method
document.getElementsByTagName(“标签名”)	Returns a list of nodes, the content can be obtained by subscripting the array	document.getElementsByTagName( "tag name" ) [subscript]

Notice

• The above is an old version, pay attention to compatibility when using

5) Obtain according to the selector

example	describe	Value method
document.querySelector( "tag name" )	Returns a dom node object, does not return Null	document.querySelector( "tag name" ).key name
document.querySelectorAll( "tag name" )	Returns an array, does not return an empty array	document.querySelectorAll( "tag name" ) [subscript]

document.getElement… & document.querySelector… difference

• document.getElement: //The obtained element is static and does not change with the change of the document
• document.querySelector: //The obtained elements are dynamic

(3) Create a node

example	describe
creatTextNode	create text node
creatElement	Create element nodes

(4) Add nodes

example	describe
parent node.appendChild("child node")	Add a child node (if the added child node already exists, adding is equivalent to moving)

(5) Delete node

example	describe
parent node.removeChild("child node")	delete child node

For more DOM learning, please refer to the official website documentation

https://developer.mozilla.org/zh-CN/docs/Web/API/Document_Object_Model/Introduction