Writing in the front

The purpose of this blog post is to get to know the DOM for encapsulation

DOM native statement

  1. Create the element

Document.createelement (‘ name ‘) document.createTextNode() document.createAttribute() document.createcomment () DocumentFragment document. CreateDocumentFragment () is not a real part of the DOM tree, its change will not trigger a DOM tree to render, The most common way to do this without causing performance problems is to insert the current document once using the document fragment as a parameter.

Please place the

line 1

line 2

… (with 100 P elements between the bodies) is inserted into the body, which is obviously better with a DocumentFragment than with a for loop

The above methods just create regardless of the insertion in the JS thread to complete, insert requires other statements

  1. Second syntax for inserting elements

Element.innerHTML = ‘string’ overwrites the contents of all Element nodes, or inserts tags if the string is an HTML tag

  1. Insert elements

Node.insertbefore () the insertBefore method takes two arguments. The first argument is newNode, the Node to be inserted, and the second argument is a child Node inside the parent Node. Node.appendchild () takes a Node object, Insert the current node as the last child node.

encapsulation

  1. Insert element statement
window.dom.creat = function(tagName){
    return document.createElement(tagName)
}
Copy the code

Not convenient enough to continue the transformation

window.dom.creat = function(string){
    const container = document.createElement("div")
    container.innerHTML = string
    return container.children[0]
}
Copy the code

But there are elements that cannot be inside a div element as well as td

window.dom.creat = function(string){
    const container = document.createElement("template")
    container.innerHTML = string.trim()
    return container.content.firstChild
}
Copy the code

If you change it to template, you can use HTML5’s new tag as a container tag to put anything in it. Note that this tag cannot use children[].

Trim removes whitespace from both sides of the string to prevent whitespace from becoming the first child

This allows the creat function to accept code such as

1

, where creat still exists in the thread and the container is not returned

  1. Create an element before and after an element
window.dom.after = function(node,node2){
    node.parentNode.insertBefore(node2,node.nextSilbling)
}
Copy the code

Before inserting the next element, you can still insert the last element

window.dom.bofore = function(node,node2){
    node.parentNode.insertBefore(node2,node)
}
Copy the code
  1. Insert a node
dom.append = function(parent,node){
    parent.appendChild(node)
}
Copy the code
  1. Add a parent element to an element
window.dom.wrap = function(node,parent){
    dom.before(node,parent)
    dom.append(parent,node)
}
Copy the code

Put parent before node and node inside parent

  1. Remove nodes
window.dom.remove = function(node){
    node.parentNode.removeChild(node)
    return node
}
Copy the code
window.dom.empty = function(node){
   const array = []
   let x = node.firstChild
   while(x){
       array.push(dom.remove(node.firstChild))
       x = node.firstChild
   }
   return array
}
Copy the code

Delete all the children, and notice that the length of the pseudo-array will be reflected in real time if you go through the deletion directly

Const {childNodes} = node equivalent to const childNodes = node.childnodes

  1. Set properties

The property itself is an object (Attr object), but in reality, this object is rarely used. Properties are typically manipulated through element node objects (HTMlElement objects). The element object has an Attributes attribute that returns an array-like dynamic object whose members are all the attribute node objects of the element’s tag, and which are reflected in real-time changes to the attributes. Other types of node objects also have attributes but return null, so you can treat this attribute as unique to the element object.

window.dom.attr = function(node,name,value){
    if(arguments.length === 3){
    node.setAttritube(name,value)
    }else if(arguments === 2){
        return node.getAttribute(name)
    }
}
Copy the code
  1. Modify the text
window.dom.text = function(node,string){
    if(arguments.length === 2){
    if('innerText' in node){
    node.innerText = string
    }else{
    node.textContent = string
    }
}else if(arguments.length === 1){
    return node.innerText
    }
}
Copy the code

Internet Explorer and other browsers

The textContent property returns the textContent of the current node and all of its descendants. Automatically ignores HTML tags inside the current node and returns all text content.

  1. Modify the style

Unique operations: the style property of the Element node (element. style), the style property

window.dom.style = function(node,name,value){
    if(arguments.length === 3){
        // dom.style(div,'color'.'red')
        node.style.name = value
    }else if(arguments.length === 2){
        // dom.style(div,'color')
        if(typeof name === 'string') {return node.style[name]
        }else if(naem instanceof Object){
            // dom.style(div,{color:'red'})
            for(let key in name){
                node.stlyle[key] = name[key]
            }
        }
    }
    
}
Copy the code
  1. Class the element
window.dom.class = {
    add(node,className){
        node.classList.add(className)
    }
    remove(node,className){
        node.classList.remove(className)
    }
    has(node,className){
        return node.classList.contains(className)
    }
}
Copy the code
  1. The event
window.dom.on = function(node,eventName,fn){
    node.addEventListener(eventName,fn)
}
window.dom.off = function(node,eventName,fn){
    node.removeEventListener(eventName,fn)
}
Copy the code
  1. Look for the element
window.dom.find = function(selector,scope){
    return (scope || document).querySelectorAll(selector)
}
Copy the code

Look inside the scope for a selector

  1. Find father and son and brother
window.dom.parent = function(node){
    return node.parentNode
}
Copy the code
window.dom.sibling = function(node){
    returnArray.from(node.parentNode.children).filter(n => n! == node) }Copy the code

ChildNodes is provided by nodes with Spaces, and children is provided by elements

window.dom.next = function(node){
    let x = node.nextSbling
    while(x.nodeType === 3){
        x = x.nextSbling
    }
    return x
}
Copy the code
window.dom.previous = function(node){
    let x = node.previousSbling
    while(x.nodeType === 3){
        x = x.previousSbling
    }
    return x
}
Copy the code

There are many different types of nodeTypes that return different values, and nextSibling all nodes return

  1. traverse
window.dom.each = function(nodeList,fn){
    for(leti= 0; i <= nodeList.length; i++){ fn.call(null,nodeList[i]) } }Copy the code
  1. The subscript
window.dom.index = function(node){
    const list = window.dom.children(node.parentNode)
    for(leti = 0; i<list.length; i++){if(list[i] === node){
            break}}return i
}
Copy the code
  1. To find the child
window.dom.children = function(node){
    return node.children
}
Copy the code

Note that dom.children does not change in real time, whereas children change in real time