What is encapsulation:

For example:

  • Computer notebook is CPU, memory, hard disk, motherboard, display card packaging
  • The user only needs to touch the monitor, keyboard and mouse. Trackpad and other devices
  • Can operate complex computers

“Interface”

  • Something encapsulated needs to expose some functionality to the outside world
  • These functions are interfaces, such as USB interface, HDMI interface
  • The device only needs an interface to communicate with the encapsulated object
  • For example, the keyboard and mouse support USB port
  • Display supports HDMI interface

Libraries: – We call tool code for other people libraries

  • Such as jquery, the Underscore
  • API: The functions or properties exposed by the library are called apis (Application programming interfaces)
  • Framework:
  • When your library gets big and you have to learn to understand it
  • Then the library is called a framework, such as vue.React

Object style: Also called namespace style

  • Window.dom is the global object we provide

Add:

Dom.create (' <div>hi</div> ') is used to create the node dom.after(node,node2) is used to add the younger brother dom.before(node,node2) is used to add the younger brother Dom.append (parent,child) for new sons dom.wrap(' <div></div> ') for new fathersCopy the code
  • Example 1: dom.create(<div>hi</div>) // Used to create a node
window.dom = { create(tagName){ return document.createElement(tagName); }}Copy the code

Index.html.

<! DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta  name="viewport" content="width=device-width, Initial-scale =1.0"> <title>Dom1</title> </head> <body> example <script SRC ="dom.js"></script> <script SRC ="main.js"></script>  </body> </html>Copy the code

dom.js:

Window.dom = {create(string){const container = document.createElement("template")// Create a template tag, The template tag can be any element container.innerhtml = string.trim(); // Set the tag to your character. The innerHtml is used to convert the tag to your character. Otherwise it will cause if in the main. In js const div = dom. The create (" there is a space 】 【 < / td > < td > hi ") / / will lead to the console. The log (div), print it out would be undefined return an empty object container.content.firstChild; // Then get the first tag from the template tag, which means the same as the node. }}Copy the code

Main.js:

Console.log ('hi') // is a little simpler than document.createElement('div') const div = dom.create("div") //dom.create is used to create nodes Console. log(div) // Prints the nodeCopy the code
  • Example 2:Dom.after (node,node2)// Used to add younger brother

HTML part code:

<! DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta  name="viewport" content="width=device-width, Initial-scale =1.0"> <title>Dom1</title> </head> <body> example <div><div id="test">test</div></div> <script SRC ="dom.js"></script> <script SRC ="main.js"></script> </body> </ HTML >Copy the code

Dom.js:

window.dom = { create(string){ const container = document.createElement("template") container.innerHTML = string.trim();  return container.content.firstChild; }, after(node, node2){ node.parentNode.insertBefore(node2, node.nextSibling); // Insert node2 in front of the next node}}Copy the code

Main.js:

Const div = dom.create("<div>nextDiv</div>") //dom.create is used to create a node console.log(div) dom.after(test, div)Copy the code

  • Dom.before (node,node2) // Before (node,node2)

Dom.js:

window.dom = { create(string){ const container = document.createElement("template") container.innerHTML = string.trim();  return container.content.firstChild; }, //after(node, node2){ //node.parentNode.insertBefore(node2, node.nextSibling); //// find the parent of this node and call the insertBefore method of the parent, / / / / 2 is inserted to the node before the next node / /}, before (node, 2) {node. ParentNode. InsertBefore (2, node); }}Copy the code

Main.js:

Const div = dom.create("<div>nextDiv</div>") //dom.create is used to create a node Console. log(div) dom.before(test, div) // Inserts the node before 0 of testCopy the code

Here, just insert the first one.)

  • Insert a son under the father:

Dom.js:

Window.dom = {create(string){const container = document.createElement("template")// Create a template tag, The template tag can be any element container.innerhtml = string.trim(); // Set the tag to your character. The innerHtml is used to convert the tag to your character. Otherwise it will cause if in the main. In js const div = dom. The create (" there is a space 】 【 < / td > < td > hi ") / / will lead to the console. The log (div), print it out would be undefined return an empty object container.content.firstChild; // Then get the first tag from the template tag, which means the same as the node. }, // after(node, node2){ // node.parentNode.insertBefore(node2, node.nextSibling); // }, // before(node, node2){ // node.parentNode.insertBefore(node2, node); // } append(parent,node){ parent.appendChild(node); //dom.append(parent,child)Copy the code

The main. Js part:

Const div = dom.create("<div>nextDiv</div>") //dom.create is used to create a node Console. log(div) dom.append(test, div) //dom.append(parent,child) is used to add a sonCopy the code
  • Giving birth to a son:

main.js

Const div = dom.create("<div>nextDiv</div>") //dom.create is used to create a node console.log(div) // dom.append(test, div) const div3 = dom.create('<div id="parent">div3</div>'); dom.wrap(test,div3)Copy the code

dom.js

/ / the window. The dom = {} an empty object / / / / is equal to the dom. The create = function () {} the first API / / / / / / or / / the window. The dom = {/ / create: function () {} / / } // window.dom = { // create(tagName){ // return document.createElement(tagName); //} window.dom = {create(string){const container = document.createElement("template"); The template tag can be any element container.innerhtml = string.trim(); // Set the tag to your character. The innerHtml is used to convert the tag to your character. Otherwise it will cause if in the main. In js const div = dom. The create (" there is a space 】 【 < / td > < td > hi ") / / will lead to the console. The log (div), print it out would be undefined return an empty object container.content.firstChild; // Then get the first tag from the template tag, which means the same as the node. }, after(node, node2){ node.parentNode.insertBefore(node2, node.nextSibling); }, before(node, node2){ node.parentNode.insertBefore(node2, node); }, append(parent,node){ parent.appendChild(node); }, wrap(node, parent){ dom.before(node, parent); Dom.append (parent, Node); // node is wrapped by parent}}Copy the code

  • ① Become a sibling node first

  • Insert div2 directly into div3 and make div2 the child of div3

HTML part:

<! DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta  name="viewport" content="width=device-width, Initial-scale =1.0"> <title>Dom1</title> </head> <body> Example <div> <div id="test">test</div> </div> <script src="dom.js"></script> <script src="main.js"></script> </body> </html>Copy the code

What looks like a simple interface implementation is actually a very dirty implementation.

Delete:

Dom.remove (node) is used to remove the node dom.empty(parent) is used to remove descendantsCopy the code

  • Dom.remove (node) is used to remove a node

  • Dom.empty (parent) is used to delete offspring

index.html

<! DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta  name="viewport" content="width=device-width, Initial-scale =1.0"> <title>Dom1</title> </head> <body> <div id="empty"> <div id="one"> < div id = "two" > the second node < / div > < div id = "three" > the third node < / div > < / div > < div > < div id = "test" > test < / div > < / div > < script src="dom.js"></script> <script src="main.js"></script> </body> </html>Copy the code

main.js:

Const div = dom.create("<div>nextDiv</div>") //dom.create is used to create a node console.log(div) // dom.append(test, div) const div3 = dom.create('<div id="parent">div3</div>'); dom.wrap(test,div3) const nodes = dom.empty(window.empty) console.log(nodes)Copy the code

dom.js

/ / the window. The dom = {} an empty object / / / / is equal to the dom. The create = function () {} the first API / / / / / / or / / the window. The dom = {/ / create: function () {} / / } // window.dom = { // create(tagName){ // return document.createElement(tagName); //} window.dom = {create(string){const container = document.createElement("template"); The template tag can be any element container.innerhtml = string.trim(); // Set the tag to your character. The innerHtml is used to convert the tag to your character. Otherwise it will cause if in the main. In js const div = dom. The create (" there is a space 】 【 < / td > < td > hi ") / / will lead to the console. The log (div), print it out would be undefined return an empty object container.content.firstChild; // Then get the first tag from the template tag, which means the same as the node. }, after(node, node2){ node.parentNode.insertBefore(node2, node.nextSibling); }, before(node, node2){ node.parentNode.insertBefore(node2, node); }, append(parent,node){ parent.appendChild(node); }, wrap(node, parent){ dom.before(node, parent); Dom.append (parent, Node); / / let the node is the parent wrapped up}, remove (node) {node. ParentNode. RemoveChild (node) return the node}, Empty (node){// node.innerhtml = "//} // Empty (node){// const {childNodes} = node // const array = [] // for(let i = 0; i < childNodes.length; i++){ // dom.remove(childNodes[i]) // array.push(childNodes[i]) // } // return array // } empty(node){ const ChildNodes = node.childNodes const array = [] let x = node.firstChild while(x){ Array.push (dom.remove(node.firstChild)) x = node.firstChild} return array}// Array.push (dom.remove(node.firstChild)) x = node.firstChild} return array}Copy the code

Change:

dom.arr(node,'title', ?) Read and write the dom.text(node,?) attribute. Read and write text content dom.html(node,?) Dom.style (node,{color:'red'}) is used to modify the style dom.class.add(node,'blue') is used to add classes Remove (node,'blue') is used to remove class dom.on(node,'click',fn) is used to add event listeners dom.off(node,'click',fn) is used to remove event listenersCopy the code
  • dom.arr(node,’title’, ?) For reading and writing properties

  • index.html
<! DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta  name="viewport" content="width=device-width, Initial-scale =1.0"> <title>Dom1</title> </head> <body> <div id="empty"> <div id="one"> first node </div> <div The second node id = "two" > < / div > < div id = "three" > the third node < / div > < / div > < div > < div id = "test" > test < / div > < / div > < script src="dom.js"></script> <script src="main.js"></script> </body> </html>Copy the code

main.js

Const div = dom.create("<div>nextDiv</div>") //dom.create is used to create a node console.log(div) // dom.append(test, div) const div3 = dom.create('<div id="parent">div3</div>'); dom.wrap(test,div3) const nodes = dom.empty(window.empty) console.log(nodes) dom.attr(test, 'title', 'I am lily') const title = dom.attr(test, 'title')Copy the code

dom.js:

/ / the window. The dom = {} an empty object / / / / is equal to the dom. The create = function () {} the first API / / / / / / or / / the window. The dom = {/ / create: function () {} / / } // window.dom = { // create(tagName){ // return document.createElement(tagName); //} window.dom = {create(string){const container = document.createElement("template"); The template tag can be any element container.innerhtml = string.trim(); // Set the tag to your character. The innerHtml is used to convert the tag to your character. Otherwise it will cause if in the main. In js const div = dom. The create (" there is a space 】 【 < / td > < td > hi ") / / will lead to the console. The log (div), print it out would be undefined return an empty object container.content.firstChild; // Then get the first tag from the template tag, which means the same as the node. }, after(node, node2){ node.parentNode.insertBefore(node2, node.nextSibling); }, before(node, node2){ node.parentNode.insertBefore(node2, node); }, append(parent,node){ parent.appendChild(node); }, wrap(node, parent){ dom.before(node, parent); Dom.append (parent, Node); / / let the node is the parent wrapped up}, remove (node) {node. ParentNode. RemoveChild (node) return the node}, Empty (node){// node.innerhtml = "//} // Empty (node){// const {childNodes} = node // const array = [] // for(let i = 0; i < childNodes.length; i++){ // dom.remove(childNodes[i]) // array.push(childNodes[i]) // } // return array // } empty(node){ const ChildNodes = node.childNodes const array = [] let x = node.firstChild while(x){ Array.push (dom.remove(node.firstChild)) x = node.firstChild} return array}, Index. HTML attr(node, name, value){if(arguments.length === 3){node.setattribute (name, arguments) value) }else if(arguments.length === 2){ return node.getAttribute(name) } } }Copy the code

  • dom.text(node, ?) Used to read and write text content

index.html

<! DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta  name="viewport" content="width=device-width, Initial-scale =1.0"> <title>Dom1</title> </head> <body> Example <div> <div ID ="test">test<p> Paragraph title </p> </div> </div> <div Id ="empty"> <div id="one"> first node </div> <div id="two"> second node </div> <div id="three"> third node </div> </div> <script src="dom.js"></script> <script src="main.js"></script> </body> </html>Copy the code

main.js

Const div = dom.create("<div>nextDiv</div>") //dom.create is used to create a node console.log(div) // dom.append(test, div) const div3 = dom.create('<div id="parent">div3</div>'); dom.wrap(test,div3) const nodes = dom.empty(window.empty) console.log(nodes) dom.attr(test, 'title', 'I am lily') const title = dom.attr(test, 'title') console.log('title: ${title} ') dom.text(test, 'Hello, this is new ')Copy the code

dom.js

/ / the window. The dom = {} an empty object / / / / is equal to the dom. The create = function () {} the first API / / / / / / or / / the window. The dom = {/ / create: function () {} / / } // window.dom = { // create(tagName){ // return document.createElement(tagName); //} window.dom = {create(string){const container = document.createElement("template"); The template tag can be any element container.innerhtml = string.trim(); // Set the tag to your character. The innerHtml is used to convert the tag to your character. Otherwise it will cause if in the main. In js const div = dom. The create (" there is a space 】 【 < / td > < td > hi ") / / will lead to the console. The log (div), print it out would be undefined return an empty object container.content.firstChild; // Then get the first tag from the template tag, which means the same as the node. }, after(node, node2){ node.parentNode.insertBefore(node2, node.nextSibling); }, before(node, node2){ node.parentNode.insertBefore(node2, node); }, append(parent,node){ parent.appendChild(node); }, wrap(node, parent){ dom.before(node, parent); Dom.append (parent, Node); / / let the node is the parent wrapped up}, remove (node) {node. ParentNode. RemoveChild (node) return the node}, Empty (node){// node.innerhtml = "//} // Empty (node){// const {childNodes} = node // const array = [] // for(let i = 0; i < childNodes.length; i++){ // dom.remove(childNodes[i]) // array.push(childNodes[i]) // } // return array // } empty(node){ const ChildNodes = node.childNodes const array = [] let x = node.firstChild while(x){ Array.push (dom.remove(node.firstChild)) x = node.firstChild} return array}, Index. HTML attr(node, name, value){if(arguments.length === 3){node.setattribute (name, arguments) value) }else if(arguments.length === 2){ return node.getAttribute(name) } }, text(node,string){ node.innerText = string//ie node.textContent = string //firefox,chrome } }Copy the code
  • dom.html(node,?) Used to read and write HTML content

Dom. Js code:

Adaptation:

  • Dom.style (node,{color:’red’}) is used to modify the style

main.js:

Const div = dom.create("<div>nextDiv</div>") //dom.create is used to create a node console.log(div) // dom.append(test, div) const div3 = dom.create('<div id="parent">div3</div>'); dom.wrap(test,div3) const nodes = dom.empty(window.empty) console.log(nodes) dom.attr(test, 'title', 'I am lily') const title = dom.attr(test, 'title') console.log('title: ${title} ') dom.text(test, 'what are you doing? ') dom.text(test) dom.style(test, {border:'1px solid red', color:'blue'})Copy the code

dom.js

/ / the window. The dom = {} an empty object / / / / is equal to the dom. The create = function () {} the first API / / / / / / or / / the window. The dom = {/ / create: function () {} / / } // window.dom = { // create(tagName){ // return document.createElement(tagName); //} window.dom = {create(string){const container = document.createElement("template"); The template tag can be any element container.innerhtml = string.trim(); // Set the tag to your character. The innerHtml is used to convert the tag to your character. Otherwise it will cause if in the main. In js const div = dom. The create (" there is a space 】 【 < / td > < td > hi ") / / will lead to the console. The log (div), print it out would be undefined return an empty object container.content.firstChild; // Then get the first tag from the template tag, which means the same as the node. }, after(node, node2){ node.parentNode.insertBefore(node2, node.nextSibling); }, before(node, node2){ node.parentNode.insertBefore(node2, node); }, append(parent,node){ parent.appendChild(node); }, wrap(node, parent){ dom.before(node, parent); Dom.append (parent, Node); / / let the node is the parent wrapped up}, remove (node) {node. ParentNode. RemoveChild (node) return the node}, Empty (node){// node.innerhtml = "//} // Empty (node){// const {childNodes} = node // const array = [] // for(let i = 0; i < childNodes.length; i++){ // dom.remove(childNodes[i]) // array.push(childNodes[i]) // } // return array // } empty(node){ const ChildNodes = node.childNodes const array = [] let x = node.firstChild while(x){ Array.push (dom.remove(node.firstChild)) x = node.firstChild} return array}, Index. HTML attr(node, name, value){if(arguments.length === 3){node.setattribute (name, arguments) value) }else if(arguments.length === 2){ return node.getAttribute(name) } }, text(node,string){ if(arguments.length === 2){ node.innerText = string }else if(arguments.length === 1){ if('innerText' in node){ return node.innerText } return node.textContent } }, html(node, string){ if(arguments.length === 2){ node.innerHTML = string }else if(arguments.length === 1){ return node.innerHTML } }, style(node, object){ for(let key in object){ //key:border/color //node.style.border = ... //node.style.color = ... node.style[key] = object[key] } } }Copy the code

index.html

<! DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta  name="viewport" content="width=device-width, Initial-scale =1.0"> <title>Dom1</title> </head> <body> Example <div> <div ID ="test">test<p> Paragraph title </p> </div> </div> <div Id ="empty"> <div id="one"> first node </div> <div id="two"> second node </div> <div id="three"> third node </div> </div> <script src="dom.js"></script> <script src="main.js"></script> </body> </html>Copy the code

In the above code, main.js can get the element’s style addition (the difference between object and string meaning of the second argument)

Dom. style(test, 'border')//'border' string gets its value dom.style(test, {border:'1px solid red', Dom. style(test, 'border' '1px solid red')Copy the code

main.js:

Const div = dom.create("<div>nextDiv</div>") //dom.create is used to create a node console.log(div) // dom.append(test, div) const div3 = dom.create('<div id="parent">div3</div>'); dom.wrap(test,div3) const nodes = dom.empty(window.empty) console.log(nodes) dom.attr(test, 'title', 'I am lily') const title = dom.attr(test, 'title') console.log('title: ${title} ') dom.text(test, 'what are you doing? ') dom.text(test) dom.style(test, {border:'1px solid red', color:'blue'}) console.log(dom.style(test, 'border')) dom.style(test, 'border', '1px solid black')Copy the code

Dom. Js code:

/ / the window. The dom = {} an empty object / / / / is equal to the dom. The create = function () {} the first API / / / / / / or / / the window. The dom = {/ / create: function () {} / / } // window.dom = { // create(tagName){ // return document.createElement(tagName); //} window.dom = {create(string){const container = document.createElement("template"); The template tag can be any element container.innerhtml = string.trim(); // Set the tag to your character. The innerHtml is used to convert the tag to your character. Otherwise it will cause if in the main. In js const div = dom. The create (" there is a space 】 【 < / td > < td > hi ") / / will lead to the console. The log (div), print it out would be undefined return an empty object container.content.firstChild; // Then get the first tag from the template tag, which means the same as the node. }, after(node, node2){ node.parentNode.insertBefore(node2, node.nextSibling); }, before(node, node2){ node.parentNode.insertBefore(node2, node); }, append(parent,node){ parent.appendChild(node); }, wrap(node, parent){ dom.before(node, parent); Dom.append (parent, Node); / / let the node is the parent wrapped up}, remove (node) {node. ParentNode. RemoveChild (node) return the node}, Empty (node){// node.innerhtml = "//} // Empty (node){// const {childNodes} = node // const array = [] // for(let i = 0; i < childNodes.length; i++){ // dom.remove(childNodes[i]) // array.push(childNodes[i]) // } // return array // } empty(node){ const ChildNodes = node.childNodes const array = [] let x = node.firstChild while(x){ Array.push (dom.remove(node.firstChild)) x = node.firstChild} return array}, Index. HTML attr(node, name, value){if(arguments.length === 3){node.setattribute (name, arguments) value) }else if(arguments.length === 2){ return node.getAttribute(name) } }, text(node,string){ if(arguments.length === 2){ node.innerText = string }else if(arguments.length === 1){ if('innerText' in node){ return node.innerText } return node.textContent } }, html(node, string){ if(arguments.length === 2){ node.innerHTML = string }else if(arguments.length === 1){ return node.innerHTML } }, // style(node, object){ // for(let key in object){ // //key:border/color // //node.style.border = ... // //node.style.color = ... // node.style[key] = object[key] // } // } style(node, name, value){ if(arguments.length === 3){ //dom.style(div, 'color', 'red') node.style[name] = value }else if(arguments.length === 2){ if(typeof name === 'string'){ //dom.style(div, 'color') return node.style[name] }else if(name instanceof Object){ //dom.style(div, {color:'red'}) const object = name for(let key in object){ node.style[key] = object[key] } } } } }Copy the code

index.html

<! DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta  name="viewport" content="width=device-width, Initial-scale =1.0"> <title>Dom1</title> </head> <body> Example <div> <div ID ="test">test<p> Paragraph title </p> </div> </div> <div Id ="empty"> <div id="one"> first node </div> <div id="two"> second node </div> <div id="three"> third node </div> </div> <script src="dom.js"></script> <script src="main.js"></script> </body> </html>Copy the code
  • Dom.class. add(node,’blue’) is used to add classes

The main. Js code:

Const div = dom.create("<div>nextDiv</div>") //dom.create is used to create a node console.log(div) // dom.append(test, div) const div3 = dom.create('<div id="parent">div3</div>'); dom.wrap(test,div3) const nodes = dom.empty(window.empty) console.log(nodes) dom.attr(test, 'title', 'I am lily') const title = dom.attr(test, 'title') console.log('title: ${title} ') dom.text(test, 'what are you doing? ') dom.text(test) dom.style(test, {border:'1px solid red', color:'blue'}) console.log(dom.style(test, 'border')) dom.style(test, 'border', '1px solid black') dom.class.add(test, 'red')Copy the code

dom.js

/ / the window. The dom = {} an empty object / / / / is equal to the dom. The create = function () {} the first API / / / / / / or / / the window. The dom = {/ / create: function () {} / / } // window.dom = { // create(tagName){ // return document.createElement(tagName); //} window.dom = {create(string){const container = document.createElement("template"); The template tag can be any element container.innerhtml = string.trim(); // Set the tag to your character. The innerHtml is used to convert the tag to your character. Otherwise it will cause if in the main. In js const div = dom. The create (" there is a space 】 【 < / td > < td > hi ") / / will lead to the console. The log (div), print it out would be undefined return an empty object container.content.firstChild; // Then get the first tag from the template tag, which means the same as the node. }, after(node, node2){ node.parentNode.insertBefore(node2, node.nextSibling); }, before(node, node2){ node.parentNode.insertBefore(node2, node); }, append(parent,node){ parent.appendChild(node); }, wrap(node, parent){ dom.before(node, parent); Dom.append (parent, Node); / / let the node is the parent wrapped up}, remove (node) {node. ParentNode. RemoveChild (node) return the node}, Empty (node){// node.innerhtml = "//} // Empty (node){// const {childNodes} = node // const array = [] // for(let i = 0; i < childNodes.length; i++){ // dom.remove(childNodes[i]) // array.push(childNodes[i]) // } // return array // } empty(node){ const ChildNodes = node.childNodes const array = [] let x = node.firstChild while(x){ Array.push (dom.remove(node.firstChild)) x = node.firstChild} return array}, Index. HTML attr(node, name, value){if(arguments.length === 3){node.setattribute (name, arguments) value) }else if(arguments.length === 2){ return node.getAttribute(name) } }, text(node,string){ if(arguments.length === 2){ node.innerText = string }else if(arguments.length === 1){ if('innerText' in node){ return node.innerText } return node.textContent } }, html(node, string){ if(arguments.length === 2){ node.innerHTML = string }else if(arguments.length === 1){ return node.innerHTML } }, // style(node, object){ // for(let key in object){ // //key:border/color // //node.style.border = ... // //node.style.color = ... // node.style[key] = object[key] // } // } style(node, name, value){ if(arguments.length === 3){ //dom.style(div, 'color', 'red') node.style[name] = value }else if(arguments.length === 2){ if(typeof name === 'string'){ //dom.style(div, 'color') return node.style[name] }else if(name instanceof Object){ //dom.style(div, {color:'red'}) const object = name for(let key in object){ node.style[key] = object[key] } } } }, 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

index.html

<! DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta "> <title>Dom1</title> <style>. Red {background: red; } < / style > < / head > < body > example < div > < div id = "test" > test < p > a paragraph headings < / p > < / div > < / div > < div id = "empty" > < div The first node id = "one" > < / div > < div id = "two" > the second node < / div > < div id = "three" > the third node < / div > < / div > < script SRC = "dom. Js" > < / script > < script  src="main.js"></script> </body> </html>Copy the code

console.log(dom.class.has(test, 'blue'))
Copy the code

dom.js

/ / the window. The dom = {} an empty object / / / / is equal to the dom. The create = function () {} the first API / / / / / / or / / the window. The dom = {/ / create: function () {} / / } // window.dom = { // create(tagName){ // return document.createElement(tagName); //} window.dom = {create(string){const container = document.createElement("template"); The template tag can be any element container.innerhtml = string.trim(); // Set the tag to your character. The innerHtml is used to convert the tag to your character. Otherwise it will cause if in the main. In js const div = dom. The create (" there is a space 】 【 < / td > < td > hi ") / / will lead to the console. The log (div), print it out would be undefined return an empty object container.content.firstChild; // Then get the first tag from the template tag, which means the same as the node. }, after(node, node2){ node.parentNode.insertBefore(node2, node.nextSibling); }, before(node, node2){ node.parentNode.insertBefore(node2, node); }, append(parent,node){ parent.appendChild(node); }, wrap(node, parent){ dom.before(node, parent); Dom.append (parent, Node); / / let the node is the parent wrapped up}, remove (node) {node. ParentNode. RemoveChild (node) return the node}, Empty (node){// node.innerhtml = "//} // Empty (node){// const {childNodes} = node // const array = [] // for(let i = 0; i < childNodes.length; i++){ // dom.remove(childNodes[i]) // array.push(childNodes[i]) // } // return array // } empty(node){ const ChildNodes = node.childNodes const array = [] let x = node.firstChild while(x){ Array.push (dom.remove(node.firstChild)) x = node.firstChild} return array}, Index. HTML attr(node, name, value){if(arguments.length === 3){node.setattribute (name, arguments) value) }else if(arguments.length === 2){ return node.getAttribute(name) } }, text(node,string){ if(arguments.length === 2){ node.innerText = string }else if(arguments.length === 1){ if('innerText' in node){ return node.innerText } return node.textContent } }, html(node, string){ if(arguments.length === 2){ node.innerHTML = string }else if(arguments.length === 1){ return node.innerHTML } }, // style(node, object){ // for(let key in object){ // //key:border/color // //node.style.border = ... // //node.style.color = ... // node.style[key] = object[key] // } // } style(node, name, value){ if(arguments.length === 3){ //dom.style(div, 'color', 'red') node.style[name] = value }else if(arguments.length === 2){ if(typeof name === 'string'){ //dom.style(div, 'color') return node.style[name] }else if(name instanceof Object){ //dom.style(div, {color:'red'}) const object = name for(let key in object){ node.style[key] = object[key] } } } }, class: { add(node, className){ node.classList.add(className) }, remove(node, className){ node.classList.remove(className) }, has(node, className){ return node.classList.contains(className) } }, on(node, eventName, fn){ node.addEventListener(eventName, fn) }, off(node, eventName, fn){ node.removeEventListener(eventName, fn) } };Copy the code

main.js

Const div = dom.create("<div>nextDiv</div>") //dom.create is used to create a node console.log(div) // dom.append(test, div) const div3 = dom.create('<div id="parent">div3</div>'); dom.wrap(test,div3) const nodes = dom.empty(window.empty) console.log(nodes) dom.attr(test, 'title', 'I am lily') const title = dom.attr(test, 'title') console.log('title: ${title} ') dom.text(test, 'what are you doing? ') dom.text(test) dom.style(test, {border:'1px solid red', color:'blue'}) console.log(dom.style(test, 'border')) dom.style(test, 'border', '1px solid black') dom.class.add(test, 'red') dom.class.remove(test, Log (dom.class.has(test, 'blue')) dom.on(test, 'click',()=> {console.log(' You clicked! ')})Copy the code

index.html

<! DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta "> <title>Dom1</title> <style>. Red {background: red; } < / style > < / head > < body > example < div > < div id = "test" > test < p > a paragraph headings < / p > < / div > < / div > < div id = "empty" > < div The first node id = "one" > < / div > < div id = "two" > the second node < / div > < div id = "three" > the third node < / div > < / div > < script SRC = "dom. Js" > < / script > < script  src="main.js"></script> </body> </html>Copy the code