DOM node operations & M-side events

1. What is a DOM node?

1.1. DOM node: Each content in the DOM tree is called a node.

1.2. Classification of DOM nodes :

Element node such as div tag
Attribute node such as class attribute
Text node For example, the text in the label

2. Find nodes

Any node in the DOM tree does not exist in isolation. They are either a parent-child relationship or a brother relationship. Not only that, we can Find relationships between nodes.

Parent Node Find: parentNode attribute, return the most recent parent node. If not found, return null.
```
Child element.parentNode
```
Child Node Find:

childNodes Get all child nodes, including text nodes (spaces, newlines), comment nodes, etc.
children attribute (emphasis)
Only get all element nodes, what is returned is still a pseudo array?

Parent element.children

<body>
  <button class="btn1">All child nodes</button>
  <!-- Get the child nodes of ul -->
  <ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript basics</li>
    <li>Web APIs</li>
  </ul>
  <script>
    const btn1 = document.querySelector('.btn1')
    btn1.addEventListener('click', function () {
      // parent node
      const ul = document.querySelector('ul')

      // all child nodes
      console.log(ul.childNodes)
      // Contains only element child nodes
      console.log(ul.children)
    })
  </script>
</body>

Brotherhood Find :

next sibling node
nextElementSibling property
Previous sibling node
previousElementSibling property

<body>
  <ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript basics</li>
    <li>Web APIs</li>
  </ul>
  <script>
    // Get all li nodes
    const lis = document.querySelectorAll('ul li')

    //Add event listeners to all li nodes
    for(let i = 0; i < lis.length; i + + ) {
      lis[i].addEventListener('click', function () {
        // previous node
        console.log(this.previousSibling)
        //Next node
        console.log(this.nextSibling)
      })
    }
  </script>
</body>

3. Add nodes

3.1. Create nodes

That is, create a new web page element and then add it to the web page. Generally, a node is created first and then the node is inserted;
Create element node method:

//Create a new element node
document.createElement('New Label')

3.2. Adding nodes

If you want to see it on the interface, you have to insert it into a parent element
Insert into the last child element of the parent element:

// To be inserted at the end of this parent element
Parent element.appendChild (element to be inserted)

<body>
  <h3>Insert node</h3>
  <p>Insert new element nodes based on the existing dom structure</p>
  
  <!-- Ordinary box -->
  <div class="box"></div>
  <!-- Click the button to insert a node into the box -->
  <button class="btn">Insert node</button>
  <script>
    // Click the button to insert the node into the web page
    const btn = document.querySelector('.btn')
    btn.addEventListener('click', function () {
      // 1. Get a DOM element node
      const p = document.createElement('p')
      p.innerText = 'New p tag created'
      p.className = 'info'
      
      //Copy the original DOM node
      const p2 = document.querySelector('p').cloneNode(true)
      p2.style.color = 'red'

      // 2. Insert box box box
      document.querySelector('.box').appendChild(p)
      document.querySelector('.box').appendChild(p2)
    })
  </script>
</body>

Insert in front of a child element in the parent element

// To be inserted in front of a child element
Parent element.insertBefore (the element to be inserted, which element is before it)

<body>
  <h3>Insert node</h3>
  <p>Insert new element nodes based on the existing dom structure</p>
\t
  <button class="btn1">Insert before any node</button>
  <ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
  </ul>
  <script>
    // Click the button to insert a new node into the existing DOM
    const btn1 = document.querySelector('.btn1')
    btn1.addEventListener('click', function () {

      // 2nd li element
      const relative = document.querySelector('li:nth-child(2)')

      // 1. Dynamically create new nodes
      const li1 = document.createElement('li')
      li1.style.color = 'red'
      li1.innerText = 'Web APIs'

      //Copy existing node
      const li2 = document.querySelector('li:first-child').cloneNode(true)
      li2.style.color = 'blue'

      // 2. Insert before relative node
      document.querySelector('ul').insertBefore(li1, relative)
      document.querySelector('ul').insertBefore(li2, relative)
    })
  </script>
</body>

3.3. Clone node

Under special circumstances, we add a new node and do as follows:

Copy an original node
Place the copied node inside the specified element

//Clone an existing element node
Element.cloneNode(boolean)

cloneNode will clone an element that is the same as the original tag, and pass in a Boolean value in the brackets

If true, it means that descendant nodes will be included in the clone when cloning.
If false, it means that descendant nodes will not be included when cloning.
Default is false

4. Delete node

Goal: Be able to delete nodes as needed
If a node is no longer needed in the page, you can delete it
In JavaScript native DOM operations, elements must be deleted through the parent element

Syntax:

Parent element.removeChild (element to be deleted)

Note:

If there is no parent-child relationship, the deletion will be unsuccessful
There is a difference between deleting nodes and hidden nodes (display:none): hidden nodes still exist, but if deleted, the nodes will be deleted from html

M terminal events (mobile terminal)

Goal: Understand common events on the M side: M sideCommon events