JS Web API

  • DOM
  • BOM
  • event
  • ajax
  • storage

DOM manipulation

The title

- Insert multiple DOM nodes at once, considering performanceCopy the code

  • What kind of data structure is DOM

    • Tree (DOM tree)

  • Common apis for DOM manipulation

    • DOM node operations (list them yourself)
    • DOM structure manipulation
    • The attribute and the property

  • Attr and property

    • Property: Modifies the attributes of an object, which are not reflected in the HTML structure
    • Attribute: Modifying HTML attributes changes the HTML structure
    • Both can cause DOM rerendering (try to use property only)
    • For details, see attribute and property in JS

  • Insert multiple DOM nodes at once for performance reasons

    • Refer to DOM performance below

knowledge

  • Nature of the DOM
  • DOM node operation
  • DOM structure manipulation
  • DOM performance

Nature of the DOM

The DOM is essentially a tree

DOM node operation

  • Get DOM node
  • attribute
  • property
// Get the DOM node
const div1 = document.getElementById('div1')  // Get the element
const divList = document.getElementsByTagName('div') // Get the collection
console.log(divList.length)
console.log(divList[0])

const containerList = document.getElementsByClassName('.container') / / collection
const pList = document.querySelectorAll('p') / / collection
Copy the code

Property of a DOM node

const pList = document.querySelectorAll('p')
const p = pList[0]
p.style.width = '100px' // Modify the style
console.log(p.style.width) // Get the style
p.className = 'p1'  / / modify the calss
console.log(p.className) / / for the class

// Get nodeName and nodeType
console.log(p.nodeName)
console.log(p.nodeType)
Copy the code

Attribute of a DOM node

const pList = document.querySelectorAll('p')
const p = pList[0]
p.getAttribute('data-name')
p.setAttribute('data-name'.'imooc')
p.getAttribute('style')
p.setAttribute('style'.'font-size:30px; ')
Copy the code

The property and the attribute

  • Property: Modifies the attributes of an object, which are not reflected in the HTML structure
  • Attribute: Modifying HTML attributes changes the HTML structure
  • Both have the potential to cause DOM re-rendering
  • For details, see attribute and property in JS

DOM structure manipulation

  • A node is added or inserted
  • Gets the list of child elements, gets the parent element
  • Deleting child elements
<body>
    <div id="div1">
        <p id="p1">A paragraph 1</p>
        <p>A paragraph 2</p>
        <p>A paragraph 3</p>
    </div>
    <div id="div2">    </div>
</body>
<script>
const div1 = document.getElementById('div1')
const div2 = document.getElementById('div2')

// Create a node
const newP = document.createElement('p')
newP.innerHTML = 'this is newP'
// Insert the node
div1.appendChild(newP)

// Move the node!! Moving an existing node is moving!!
const p1 = document.getElementById('p1')
div2.appendChild(p1)
</script>
Copy the code

Get the list of child elements & Get the parent element & Remove the child node

// Get the parent element
console.log(p1.parentNode)

// Get the list of child elements
const div1childNodes = div1.childNodes;
console.log(div1.childNodes)
const div1ChildNodesP = Array.prototype.slice.call(div1.childNodes).filter(child= > {
    //childNodes will have some text nodes and so on
    if(child.nodeType === 1) {return true
    }
    return false
})
console.log('div1ChildNodesP',div1ChildNodesP)

// Delete the child node
const div1 = document.getElementById('div1')
const child = div1.childNodes
div1.removeChild(child[0])
Copy the code

DOM performance

  • DOM manipulation is “expensive”, so avoid frequent DOM manipulation
  • Cache DOM queries
  • Change the frequent operation to a one-time operation

DOM queries are cached

// Do not cache DOM query results (not recommended)
for(let i = 0; i < document.getElementsByTagName('p').length; i++){// For each loop, length is computed and DOM queries are performed frequently
}

// Cache DOM query results (recommended)
const pList = document.getElementsByTagName('p')
const length = pList.length
for(let i = 0; i < length; i++){
    // Cache length, only one DOM query
}
Copy the code

Change the frequent operation to a one-time operation

const listNode = document.getElementById('list')

// Create a document fragment that has not yet been inserted into the DOM tree
const frag = document.createDocumentFragment()

// Perform the insert
for(let x= 0; x < 10; x++){
    const li = document.createElement('li')
    li.innerHTML = 'List item' + x;
    frag.appendChild(li)
}

// Insert into the DOM tree
Copy the code

Frequent operation without error (not recommended)

const list = document.getElemetById('list')
for(let i = 0; i < 10; i++){
    const li = document.createElement('li')
    li.innerHTML = 'List item' + i
    list.appendChild(li)
}
Copy the code