Basic knowledge of Web Api DOM nodes

DOM node

Each content in the DOM tree is called a node

node type

• element node
  • All tags such as body, div
  • html is the root node
• attribute node
  • All attributes such as href
• text node
  • all text
• other
  

find node

1. parent node lookup

   parentNode property

   子元素.parentNode
   

   Returns the parent node of the nearest level and returns null if not found

   <div class="box">
       <span></span>
   </div>
   <script>
   	let span = document.querySelector('span')
       console.dir(span.parentNode)
   </script>
   

2. child node lookup

   childNodes property

   • Get all child nodes, including text nodes (spaces, newlines), comment nodes, etc.
   • returns a pseudo-array

    <ul>
       <li>a1</li>
       <li>2</li>
       <li>3</li>
       <li>4</li>
   </ul>
   <script>
   	let ul = document.querySelector('ul')
       console.dir(ul.childNodes)
   </script>
   
   

children attribute (emphasis)

• get all element nodes only

• returns a pseudo-array

  <ul>
      <li>a1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
  </ul>
  <script>
  	let ul = document.querySelector('ul')
      console.log(ul.children)
  </script>
  

3. Find sibling nodes

   1. Find the next sibling node

      • nextElementSibling property

        <ul>
            <li>a1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
        <script>
        	let li2 = document.querySelector('ul li:nth-child(2)')
        	console.log(li2.nextElementSibling)
        </script>
        

2. Find the previous sibling node

   • ​ previousElementSibling property

     <ul>
         <li>a1</li>
         <li>2</li>
         <li>3</li>
         <li>4</li>
     </ul>
     <script>
     	let li2 = document.querySelector('ul li:nth-child(2)')
     	console.log(li2.previousElementSibling)
     </script>
     

increase node

1. create node

   grammar:

   document.createElement('标签名')
   

   Code example:

   let li = document.createElement('li')//创建一个li标签
   console.dir(li)
   

2. append node

   • Inserts into the last child element of the parent element

     父元素.appendChild(要插入的元素)
     

     Code example:

     <ul>
         
     </ul>
     
     <script>
     	let ul = document.querySelector('ul')
         let li = document.createElement('li')
         ul.appendChild(li)
     </script>
     

   • Add multiple child elements to a parent element

     父元素.append(子元素, 子元素，....)
     

     Note: Which child element is in the front, which element in the page is also in the front

     Code example:

     <div>
         
     </div>
     <script>
     	let div = document.querySelector('div')
         let span =document.createElement('span')
         let p = document.createElement('p')
         div.append(span,p)
         console.dir(div)
     </script>
     

• Insert before a child element in the parent element

  父元素.insertBefore(要插入的元素，在哪个元素前面)
  

  Code example:

  <div>
      <span></span>
  </div>
  
  <script>
  	let div = document.querySelector('div')
      let span = document.querySelector('span')
      let p =document.createElement('p')
      
      console.dir(div.insertBefore(p,span))
  </script>
  

3. clone node

   元素.cloneNode(布尔值)
   

   Note: cloneNode will clone an element that is the same as the original label, and pass in a Boolean value in parentheses

   • If it is true, it means that descendant nodes will be cloned together when cloning (deep clone)
   • If false, it means that descendant nodes are not included when cloning (shallow cloning)
   • Default is false

   Code example:

   <style>
           .box {
           
           
               width: 200px;
               height: 200px;
               background-color: skyblue;
               margin-bottom: 10px;
           }
   </style>
   <div class="box">
       <button>你好</button>
   </div>
   <script>
           let box = document.querySelector('.box')
   
           // 浅克隆
           let box1 = box.cloneNode()
   
           // 深克隆
           let box2 = box.cloneNode(true)
           document.body.appendChild(box1)
           document.body.appendChild(box2)
   </script>
   

delete node

If a node is no longer needed in the page, it can be deleted by deleting the node

1. delete by parent element

   grammar:

   父元素.removeChild(要删除的元素)
   

   Code example:

   <div>
       <span>1</span>
       <span>2</span>
   </div>
   <script>
   	let div = document.querySelector('div')
       let span = document.querySelector('span:nth-child(1)')
       div.removeChild(span)
       console.log(div)
   </script>
   
   

Notice:

• If there is no parent-child relationship, the deletion is unsuccessful

  example:

  <div></div>
  <span></span>
  <script>
  	let div = document.querySelector('div')
      let span = document.querySelector('span')
      div.removeChild(span)
  </script>
  

• There is a difference between deleting a node and hiding a node (display:none): a hidden node still exists, but deleting a node will delete the node from the HTML