当前位置：网站首页>JS foundation -- about DOM

JS foundation -- about DOM

2022-06-11 09:38:00 【Snatch bamboo shoots 123】

DOM object

DOM Full name Document Object Model),W3C Recommended standard programming interface for handling extensible markup languages

DOM There are many ways , It provides methods to manipulate an element of a page , It can be understood as DOM The operation is HTML Element operation

DOM Use a tree structure , Each element in the page is represented as a tree node , Pictured
Insert picture description here

Node type

DOM The Communist Party of China has 12 Types , Three common types are as follows
$\begin{cases} Element nodes \\ Attribute node \\ Text node \end{cases}$

stay javascript We can pass nodeType Attribute to determine the type of a node , The different node attribute values are as follows
With a certain HTML Node as an example

<p id="demo1"> This is a paragraph </p>

	Elements	nodeType Property value
Element nodes	<p></p>	1
Attribute node	id=“demo1”	2
Text node	This is a paragraph	3

DOM Object traversal

Parent element

Get the parent element of an element

DOM object .parentNode

Subelement

Get all child nodes （ Include element nodes 、 Text node 、 Attribute nodes, etc ）

attribute	describe
childNodes	All child nodes
firstChild	First child node
lastChild	The last child node

Get all element nodes （ Include only element nodes ）

attribute	describe
children	All child element nodes
firstElementChild	The first child element node
lastElementChild	The last child element node

Brother element

Get all child nodes （ Include element nodes 、 Text node 、 Attribute nodes, etc ）

attribute	describe
previousSibling	Find previous sibling
nextSibling	Find the next sibling

Get all element nodes （ Include only element nodes ）

attribute	describe
previousElementSibling	Find previous sibling element node
nextElementSibling	Find the next sibling element node

How to get elements

get

Method	describe	Return value
getElementById()	adopt id Locate an element	DOM
getElementsByTagName()	Locating elements by tag name	An array of class
getElementsByClassName()	Locate elements by class name	An array of class
getElementsName()	adopt name The attribute name locates the element	An array of class

query

Method	describe
querySelector(“ Selectors ”)	Select the first element that meets the condition
querySelectorAll(“ Selectors ”)	Select all elements that meet the conditions

The selector is similar to css Selectors

Method of creating element

Method	describe
createElement()	Create an element node
creatTextNode()	Create a text node

How to manipulate elements

Insert

When we create an element node , You need to insert it into HTML file , This requires inserting elements

// take B Element inserted into A The end of the child element of the element 
A.appendChild(B)
// take B Element inserted into A Child element of element C Before 
A.insertBefore(B,C)

Delete

// Delete A Child element of element B
A.removeChild(B)

Replace

// The child element of the parent element B Replace with element C
A.replaceChild(B,C)

Set up HTML Internal attributes of the element

attribute	describe
innerHTML	Gets or sets the internal element of an element
innerText	Gets or sets the internal text of an element

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title> This is a html5 demo</title>

</head>
<body>
	<script> window.onload=function(){
       let new_html=document.createElement("p") new_html.className="the_new" new_html.style.backgroundColor="red" new_html.style.border="20px solid silver" new_html.innerText=" This is a paragraph " document.body.appendChild(new_html) // amount to  // document.body.innerHTML='<p class="the_new" style="background-color:red; border:20px solid silver"> This is a paragraph </p>' } </script>
</body>
</html>

Chrome Browser run results
Insert picture description here

obtain HTML Element attribute value

Get and set HTML The attribute value of the element

DOM object . Property value 

// such as 
//p.className  Be careful 
//p.type
//p.id

Object methods

Method name	describe
getAttribute(“ Property name ”)	Get the attribute value of an element
setAttribute(“ Property name ”,“ Property value ”)	Set the value of an attribute of an element
removeAttribute(“ Property name ”)	Delete an attribute of an element
hasAttribute(“ Property name ”)	Determine whether an element contains an attribute

css Property value operation

obtain CSS Property value

getComputedStyle(DOM object ). Property name 
// or 
getComputedStyle(DOM object )[ Property name ]
 Such as 
let a=getComputedStyle("p")["class"]

Be careful ：css Hump writing of attribute name
font-size>>fontSize
background-color>>backgroundColor
getComputedStyle Method to get css The advantages of attribute values
We know ,css There are three styles of inline 、 Inside 、 external , For HTML Elements , Three style settings CSS Style this method can get , But the following method can only get the first one, that is, intra line css style

Set up CSS Property value

style object

DOM object .style. Property name =" Property value "
// or 
DOM object .style[ Property name ]=" Property value "
 Such as 
p.style.width=30%;

cssText attribute
Can be used for more than one CSS attribute

DOM object .style.cssText=" Property name : Property value ; Property name : Property value ,..."

原网站

版权声明
本文为[Snatch bamboo shoots 123]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/162/202206110914078296.html