js tutorial - DOM [010]

DOM (bottom)

DOM is composed of nodes in our html structure one by one
Not only is our label a node, but the text we write is also a node. Comments, including spaces, are nodes

DOM node

DOM nodes are generally divided into three categories: element nodes, text nodes and attribute nodes
What is classification? For example, when we get elements, we call them element nodes (tag nodes) through various methods
For example, the text written in our label is the text node
The attribute written on each label is the attribute node

Element node

All we get through getElementBy... Are element nodes

Attribute node

What we get through getAttribute is the attribute node of the element

Text node

What we get through innerText is the text node of the element

Get node

childNodes: get all child nodes under a node
```
<body>
  <div>
    <p>hello</p>
  </div>
  
  <script>
    // This oDiv obtains the div element in the page, which is an element node
  	var oDiv = document.querySelector('div')
    
    console.log(oDiv.childNodes) 
    /*
    	NodeList(3) [text, p, text]
      0: text
      1: p
      2: text
      length: 3
      __proto__: NodeList
    */
  </script>
</body>
```
- We will find that after we get it, it is a pseudo array with three nodes
- A text: from
  Until
  There is a newline and a bunch of spaces in the middle. This is the first node and a text node
- A p: this p tag is the second node, and this is an element node
- A text: there is a newline and a pile of spaces from the middle to the middle. This is the third node and a text node
- At this time, you can see that we have different node types

children: get all child element nodes under a node

<body>
  <div>
    <p>hello</p>
  </div>
  
  <script>
    // This oDiv obtains the div element in the page, which is an element node
  	var oDiv = document.querySelector('div')
    
    console.log(oDiv.children) 
    /*
    	HTMLCollection [p]
      0: p
      length: 1
      __proto__: HTMLCollection
    */
  </script>
</body>

We found that there is only one node, because children only need element nodes
There is only one element node under div, which is p
So there is only one, although there is only one, but it is also a pseudo array

firstChild: get the first node of the child level of a node

<body>
  <div>
    <p>hello</p>
  </div>
  
  <script>
    // This oDiv obtains the div element in the page, which is an element node
  	var oDiv = document.querySelector('div')
    
    console.log(oDiv.firstChild) // #text 
  </script>
</body>

This is to get only one node, which is no longer a pseudo array
Get the first one
The first is
Until
The newline and space of is a text node

lastChild: get the last node of the child level of a node

<body>
  <div>
    <p>hello</p>
  </div>
  
  <script>
    // This oDiv obtains the div element in the page, which is an element node
  	var oDiv = document.querySelector('div')
    
    console.log(oDiv.lastChild) // #text 
  </script>
</body>

Get only one node, no longer a pseudo array
Get the last one
The last one is line breaks and spaces from to, which is a text node

firstElementChild: get the first element node of the child level of a node

<body>
  <div>
    <p>hello</p>
  </div>
  
  <script>
    // This oDiv obtains the div element in the page, which is an element node
  	var oDiv = document.querySelector('div')
    
    console.log(oDiv.firstElementChild) // <p>hello</p>
  </script>
</body>

Get only one node, not a pseudo array
Gets the first element node
The first element node is the p tag, which is an element node

lastElementChild: get the last element node of the child level of a node

<body>
  <div>
    <p>hello</p>
    <p>world</p>
  </div>
  
  <script>
    // This oDiv obtains the div element in the page, which is an element node
  	var oDiv = document.querySelector('div')
    
    console.log(oDiv.lastElementChild) // <p>world</p>
  </script>
</body>

Get only one node, not a pseudo array
Gets the last element node
The last element node is < p > World < / P >, which is an element node

nextSibling: get the next sibling node of a node

<body>
  <ul>
    <li id="a">hello</li>
    <li id="b">world</li>
    <li id="c">!!!</li>
  </ul>
  
  <script>
    // This oLi obtains the li element in the page, which is an element node
  	var oLi = document.querySelector('#b')
    
    console.log(oLi.nextSibling) // #text
  </script>
</body>

Get only one node, not a pseudo array
The next sibling node of the li with id="b" is obtained
Because the next node of id="b" is a line break and space between two li tags, it is a text node

previousSibling: get the previous sibling node of a node

<body>
  <ul>
    <li id="a">hello</li>
    <li id="b">world</li>
    <li id="c">!!!</li>
  </ul>
  
  <script>
    // This oLi obtains the li element in the page, which is an element node
  	var oLi = document.querySelector('#b')
    
    console.log(oLi.previousSibling) // #text
  </script>
</body>

Get only one node, not a pseudo array
The last sibling node of the li with id="b" is obtained
Because the previous node of id="b" is a line feed and space between two li tags, it is a text node

Nexterementsibling: get the next element node of a node

<body>
  <ul>
    <li id="a">hello</li>
    <li id="b">world</li>
    <li id="c">!!!</li>
  </ul>
  
  <script>
    // This oLi obtains the li element in the page, which is an element node
  	var oLi = document.querySelector('#b')
    
    console.log(oLi.nextElementSibling) // <li id="c">!!!</li>
  </script>
</body>

Get only one node, not a pseudo array
The next sibling element node of the li with id="b" is obtained
Because the next sibling element node of id="b" is the li of id="c", which is an element node

previousElementSibling: get the previous element node of a node

<body>
  <ul>
    <li id="a">hello</li>
    <li id="b">world</li>
    <li id="c">!!!</li>
  </ul>
  
  <script>
    // This oLi obtains the li element in the page, which is an element node
  	var oLi = document.querySelector('#b')
    
    console.log(oLi.previousElementSibling) // <li id="a">hello</li>
  </script>
</body>

Get only one node, not a pseudo array
The last sibling element node of the li with id="b" is obtained
Because the last sibling element node of id="b" is the li of id="a", which is an element node

parentNode: get the parent node of a node

<body>
  <ul>
    <li id="a">hello</li>
    <li id="b">world</li>
    <li id="c">!!!</li>
  </ul>
  
  <script>
    // This oLi obtains the li element in the page, which is an element node
  	var oLi = document.querySelector('#b')
    
    console.log(oLi.parentNode) // <ul>...</ul>
  </script>
</body>

Get only one node, not a pseudo array
Gets the parent element node of the current li
Because the father of this li is ul, what you get is ul, which is an element node

attributes: get all attribute nodes of an element node

<body>
  <ul>
    <li id="a" a="100" test="test">hello</li>
  </ul>
  
  <script>
    // This oLi obtains the li element in the page, which is an element node
  	var oLi = document.querySelector('#a')
    
    console.log(oLi.attributes) 
    /*
    	NamedNodeMap {0: id, 1: a, 2: test, id: id, a: a, test: test, length: 3}
      0: id
      1: a
      2: test
      length: 3
      a: a
      id: id
      test: test
      __proto__: NamedNodeMap
    
    */
  </script>
</body>

What is obtained is a set of data, which is all the attributes of the element and a pseudo array
This li has three attributes, id / a / test, so we get these three attributes

Node attributes

We already know that nodes can be divided into many kinds, and we can also get a variety of different nodes
Next, let's talk about the differences of attributes between various nodes

Let's prepare a piece of code first

<body>
  <ul test="I am ul A property of">
    <li>hello</li>
  </ul>

  <script>
    // Get ul first
    var oUl = document.querySelector('ul')
    
    // The first child element node under ul is an element node
    var eleNode = oUl.firstElementChild
    
    // Get the attribute node combination of ul. Because it is a combination, we need to use the index to get the node
    var attrNode = oUl.attributes[0]

    // The first child node under ul is a text node
    var textNode = oUl.firstChild
  </script>
</body>

nodeType

nodeType: gets the node type of the node, expressed in numbers
```
console.log(eleNode.nodeType) // 1
console.log(attrNode.nodeType) // 2
console.log(textNode.nodeType) // 3
```
- nodeType === 1 indicates that the node is an element node
- nodeType === 2 indicates that the node is an attribute node
- nodeType === 3 indicates that the node is a comment node

nodeName

nodeName: gets the node name of the node
```
console.log(eleNode.nodeName) // LI
console.log(attrNode.nodeName) // test
console.log(textNode.nodeName) // #text
```
- The nodeName of the element node is the upper case label name
- The nodeName of the attribute node is the attribute name
- The nodeName of the text node is #text

nodeValue

nodeValue: gets the value of the node
```
console.log(eleNode.nodeValue) // null
console.log(attrNode.nodeValue) // I am an attribute of ul
console.log(textNode.nodeValue) // Line feed + space
```
- Element node has no nodeValue
- The nodeValue of the attribute node is the attribute value
- The nodeValue of a text node is the text content

Summary

-	nodeType	nodeName	nodeValue
Element node	1	Upper case label name	null
Attribute node	2	Attribute name	Attribute value
Text node	3	#text	Text content

Manipulating DOM nodes

The operation we are talking about is nothing more than adding, deleting, modifying and querying (CRUD)
Create a node (because we need to create a node before adding it to the page)
Add a node to the page
Delete a node in the page
Modify a node in the page
Get a node in the page

Create a node

createElement: used to create an element node

// Create a div element node
var oDiv = document.createElement('div')

console.log(oDiv) // <div></div>

What is created is a div element that can be used

createTextNode: used to create a text node

// Create a text node
var oText = document.createTextNode('I am a text')

console.log(oText) // "I am a text"

Add a node to the page

appendChild: appends a node to the end of an element node

Syntax: parent node. AppendChild (child node to insert)

// Create a div element node
var oDiv = document.createElement('div')
var oText = document.createTextNode('I am a text')

// Append a text node to the div
oDiv.appendChild(oText)

console.log(oDiv) // < div > I am a text < / div >

insertBefore: inserts a node before a node

Syntax: parent node. InsertBefore (the node to be inserted, before which node to insert)

<body>
  <div>
    <p>I am a p label</p>
  </div>
  
  <script>
  	var oDiv = document.querySelector('div')
    var oP = oDiv.querySelector('p')
    
    // Create an element node
    var oSpan = document.createElement('span')
    
    // Add this element node to the front of p under div
    oDiv.insertBefore(oSpan, oP)
    
    console.log(oDiv)
    /*
    	<div>
    		<span></span>
    		<p>I am a p tag</p>
    	</div>
    */
  </script>
</body>

Delete a node in the page

removeChild: removes a node under a node

Syntax: parent node. Removechild (byte point to be removed)

<body>
  <div>
    <p>I am a p label</p>
  </div>
  
  <script>
  	var oDiv = document.querySelector('div')
    var oP = oDiv.querySelector('p')
    
    // Remove the p tag under div
    oDiv.removeChild(oP)
    
    console.log(oDiv) // <div></div>
  </script>
</body>

Modify a node in the page

replaceChild: replace a node in the page

Syntax: parent node. Replacechild (new node, old node)

<body>
  <div>
    <p>I am a p label</p>
  </div>
  
  <script>
  	var oDiv = document.querySelector('div')
    var oP = oDiv.querySelector('p')
    
    // Create a span node
    var oSpan = document.createElement('span')
    // Add some text to the span element
    oSpan.innerHTML = 'I was newly created span label'
    
   	// Replace the p tag under the original div with the created span tag
    oDiv.replaceChild(oSpan, oP)
    
    console.log(oDiv)
    /*
    	<div>
    		<span>I am a newly created span tag</span>
    	</div>
    */
  </script>
</body>

Gets the non line style of the element

When we operate DOM, a very important point is to manipulate the css style of elements
When operating css style, we can't avoid getting the style of elements
As we said before, you can use the element. style.xxx to get

However, this method can only get the element inter line style, that is, the style written in the line

<style>
  div {
    width: 100px;
  }
</style>
<body>
  <div style="height: 100px;">
    <p>I am a p label</p>
  </div>

  <script>
    var oDiv = document.querySelector('div')
		console.log(oDiv.style.height) // 100px
    console.log(oDIv.style.width) // ''
  </script>
</body>

We can't get the style of this element whether it's external chained or embedded
Here we will use the method to get getComputedStyle and currentStyle
The functions of these two methods are the same, except one in non IE browser and one in IE browser

getComputedStyle (not used by IE)

Syntax: window.getcomputedstyle (element, null). Attribute to get

<style>
  div {
    width: 100px;
  }
</style>
<body>
  <div style="height: 100px;">
    <p>I am a p label</p>
  </div>

  <script>
    var oDiv = document.querySelector('div')
		console.log(window.getComputedStyle(oDiv).width) // 100px
    console.log(window.getComputedStyle(oDiv).height) // 100px
  </script>
</body>

This method can obtain both inter line style and non inter line style

currentStyle (used by IE)

Syntax: element. currentStyle. Attribute to get

<style>
  div {
    width: 100px;
  }
</style>
<body>
  <div style="height: 100px;">
    <p>I am a p label</p>
  </div>

  <script>
    var oDiv = document.querySelector('div')
		console.log(oDiv.currentStyle.width) // 100px
    console.log(oDiv.currentStyle.height) // 100px
  </script>
</body>

Gets the offset of the element

Is where the element is on the page
We have several properties to get, offsetLeft and offsetTop, offsetWidth and offsetHeight

offsetLeft and offsetTop

Get the offset on the left side of the element and the offset on the upper side
Look at it in two cases
Without positioning
- Gets the distance from the outside of the element border to the inside of the page
With positioning
- Get the distance from the outside of the element border to the inside of the positioning parent border (actually the left and top values we wrote)

offsetWidth and offsetHeight

Get the sum of element content width and height + padding width and height + border width and height

Keywords: Javascript Front-end H5

Added by Transmission94 on Mon, 22 Nov 2021 23:44:07 +0200

Programming VIP