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)
},
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)
},
// ****************** 删
remove(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 array = []
let x = node.firstChild
while (x) {
array.push(dom.remove(node.firstChild))
x = node.firstChild
}
return array
},
// ****************** 改
attr(node, name, value) { //重载
if (arguments.length === 3) {
node.setAttribute(name, value)
} else if (arguments.length === 2) {
return node.getAttribute(name)
}
},
text(node, string) { //适配
if (arguments.length === 2) {
if ('innerText' in node) {
node.innerText = string
} else {
node.textContent = string
}
} else if (arguments.length === 1) {
if ('innerText' in node) {
return node.innerText
} else {
return node.textContent
}
}
},
html(node, string) { //重载
if (arguments.length === 2) {
node.innerHTML = string
}
if (arguments.length === 1) {
return node.innerHTML
}
},
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)
},
// ****************** 查
find(selector, scope) {
return (scope || document).querySelectorAll(selector)
},
parent(node) {
return node.parentNode
},
children(node) {
return node.children
},
siblings(node) { // 兄弟姐妹
return Array.from(node.parentNode.children)
.filter(n=>n !== node)
},
next(node) {
let x = node.nextSibling
while (x && x.nodeType === 3) {
x = x.nextSibling
}
return x
},
previous(node){
let x = node.previousSibling
while (x && x.nodeType === 3) {
x = x.previousSibling
}
return x
},
each(nodeList, fn) {
for (let i = 0; i < nodeList.length; i++){
fn.call(null,nodeList[i])
}
},
index(node) { //知道一个元素排行第几
const list = dom.children(node.parentNode)
let i
for (i = 0; i < list.length; i++){
if (list[i] === node) {
break
}
}
return i
}
}
dom-written-by-myself's Introduction
dom-written-by-myself's People
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.