Dom manipulation in JavaScript

As a front end, is must be all sorts of dom manipulation, although now a lot of plug-in has helped us to achieve the function of many, as well as the vue, the framework such as the react also help us save a lot of dom manipulation, but as our level of progress to want to develop components will have to these dom manipulation, is that sentence: What time is good, but someone is carrying something for you

Get DOM node

methods role
document.body Get the body node, return the body node
document.head Get the head node, return the head node
document.getElementById(id) Get the node by id and return the obtained node
document.getElementsByClassName(className) Returns a pseudo-array of the dom nodes retrieved by class
document.getElementsByName(name) The node is obtained by name, and the pseudo-array composed of dom nodes is returned
document.getElementsByTagName(tagName) Get nodes by label name and return a pseudo-array of dom nodes obtained
Document.queryselector (‘ selector ‘) Retrieves the element through a selector and returns the first element on the page that meets the criteria
Document. QuerySelectorAll (‘ selector ‘) Retrieves the element through a selector that returns a pseudo-array of all the elements on the page that match the criteria

This section is all about selecting elements, but there is a hidden interview question in it. Please write a method that returns the most elements on the page and the number of times they appear

function maxTagCount(){
    const domList = document.querySelectorAll("*")
    const len = domList.length
    const target = {}
    for(let i = 0; i < len; i++){
        if(target[domList[i].nodeName]){
            target[domList[i].nodeName] += 1
        }else{
            target[domList[i].nodeName] = 1}}let max = 0;
    let maxNode = 0
    for(let k in target){
        if(target[k] > max){
            max = target[k]
            maxNode = k
        }
    }
    return The element that appears most frequently is${maxNode}Element, the frequency of occurrence is zero${max}`
}
Copy the code

The node type

nodeType The node type
1 Element nodes
2 An attribute node
3 Text node

Create a node

methods role
document.createElement() Creating element nodes
document.createTextNode() Creating a text node
document.createAttribute() Creating a property node
document.createDocumentFragment() Create the document shard node
document.createComment() Create a comment node

Node operation

methods role
element.setAttributeNode(attrNode) Setting the property node
element.setAttribute(attr, value) Set properties
element.getAttribute(attr) Retrieve attributes
element.append(element) Append child nodes (support batch insert)
element.appendChild(element) Append child node
element.remove() Delete itself
element.removeChild() Deleting child Nodes
element.replaceChild(newNode, oldNode) Replace the node
element.insertBefore(newNode, oldNode) Insert a new node before an existing element

Relationship between nodes

attribute Point to the node
parentNode The parent node
parentElement Parent element node
childNodes A pseudo-array of the first-level children of this node
children A pseudo-array of the node’s first-level child nodes
childElementCount Returns the number of child element nodes
firstChild First child node
lastChild The last child node
firstElementChild The first element child node
lastElementChild The last element child node
nextSibling Next sibling node
previousSibling Last sibling node
nextElementSibling The latter element sibling node
previousElementSibling The previous element sibling node

Various heights of the DOM

attribute explain
clientWidth Width of the visible area
clientHeight Height of visible area
offsetWidth Width of visible area (including edge width)
offsetHeight Height of visible area (including edge height)
scrollWidth The width of the full text of the element body
scrollHeight Element text full height
scrollTop The height to which the element scroll bar rolls
scrollLeft The width of the element scroll bar to the left
window.screen.width Width of screen resolution
window.screen.height High screen resolution

These heights are often used in development, and there is also an interview question, how do you implement an infinite drop-down list

/ / HTML
<style>
    ul{
        height: 100vh;
        overflow-y: scroll;
    }
</style>

<ul id="list"></ul>

// Infinite scrolling logic
const list = document.querySelector('#list')
let timer = null

function appendItems(count = 50){
    for(let i = 0; i < count; i++){
        const item = document.createElement('li')
        item.innerText = `item${i}`
        list.append(item)
    }
}

appendItems()
list.addEventListener('scroll'.(e) = >{
    const pageHeight = e.target.scrollHeight
    const scrollTop = e.target.scrollTop
    const clientHeight = e.target.clientHeight
    const bottom = pageHeight - scrollTop - clientHeight
    if(bottom <= 100) {if(timer) clearTimeout(timer);
        timer = setTimeout(() = >{
            appendItems(50)},500)}})Copy the code

So that’s a summary of what black Chicken did with dom manipulation and what they were asked about in the interview