DOM(Document Object Model) operations

The title

• DOM is that kind of data structure

Tree (DOM)

• Common apis for DOM manipulation
• • DOM node operations: see code demo
• • DOM structure manipulation: see code demo

Attribute and property operations

• Attribute and Property
• • See related knowledge points
• Insert multiple DOM nodes at once for performance reasons
• • See the relevant knowledge point code

knowledge

The nature of the DOM

Is a tree generated after the browser parses the HTML code

DOM node operations

Get DOM node

 const div1 = document.getElementById('div1') / / to get id
 console.log('div1', div1)

 const divList = document.getElementsByTagName('div')  // Get the tag name to return the collection
 console.log('divList.length', divList.length)
 console.log('divList[1]', divList[1])

 const containerList = document.getElementsByClassName('container') // Get the CLSS name to return the collection
 console.log('containerList.length', containerList.length)
 console.log('containerList[1]', containerList[1])

 const pList = document.querySelectorAll('p') // CSS selectors return collections
 console.log('pList', pList)
 
 
Copy the code

attribute

The attribute form changes the HTML tree by obtaining the DOM and using setAttribute and getAttribute to modify or obtain the ATTRIBUTES of the HTML tag node in JS

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

property

• Property form: it is a form of modifying or obtaining THE JS properties and CSS styles of the DOM in JS by obtaining the DOM
• Changing the style attribute is reflected in the DOM, but custom attributes such as p1.a =100 are not reflected in the DOM tree.
• Part of the property can be rendered, such as align, title, className, style
• Float, border, and top attributes cannot be rendered.
• Atribute can all be rendered.

 const pList = document.querySelectorAll('p')
 const p1 = pList[0]
 p1.style.width = '100px'
 console.log( p1.style.width )
 p1.className = 'red'
 console.log( p1.className )
 console.log(p1.nodeName)
 console.log(p1.nodeType) / / 1
Copy the code

• Storing some data in the DOM stage is not the same as using props and attrs. For example,

const elem1 = document.getElementById('p1');
elem1.a = 100; // Use props without changing the DOM node
elem1.setAttrbute('a'.100); // Using attrs changes the DOM node
Copy the code

Conclusion:

Property: suitable for setting custom attributes, can not need to render the property can be used as much as possible use property attribute: suitable for setting tag attributes, need to change the HTML rendering used

DOM structure manipulation

code

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
const p1 = document.getElementById('p1')
div2.appendChild(p1)

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

// Get the list of child elements
const div1ChildNodes = div1.childNodes
console.log( div1.childNodes )
// Labels other than those with nodeType 1 are filtered out
const div1ChildNodesP = Array.prototype.slice.call(div1.childNodes).filter(child= > {
    if (child.nodeType === 1) {
        return true
    }
    return false
})
console.log('div1ChildNodesP', div1ChildNodesP)
// Delete the label
div1.removeChild( div1ChildNodesP[0])Copy the code

DOM performance

• DOM operations are very resource-intensive, so avoid frequent DOM operations
• Cache DOM queries

// DOM query results are not cached
for (let = 0; i<document.getElementsByTagName('p').length; i++){// For each loop, length is computed and DOM queries are performed frequently
}
// Cache DOM query results
const pList = document.getElementByTagName('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 list = document.getElementById('list')

// Create a document fragment that is not yet inserted into the DOM structure
const frag = document.createDocumentFragment()

for (let i  = 0; i < 20; i++) {
    const li = document.createElement('li')
    li.innerHTML = `List item ${i}`

    // Insert the document fragment first
    frag.appendChild(li)
}

// Insert into the DOM structure
list.appendChild(frag)

console.log(list)
  
Copy the code