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

-nodeTypenodeNamenodeValue
Element node1Upper case label namenull
Attribute node2Attribute nameAttribute value
Text node3#textText 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