基本 (方法)
- getElementById
- getElementsByTagName
- getElementsByClassName
- getAttribute
- setAttribute
这五个方法是将要编写的许多DOM脚本的基石。
基本 (属性)
- childNodes
- nodeType
- nodeValue
- firstChild
- lastChild
- nextSibling
- classList className
DOM提供的几个属性
创建
传统方法创建dom
- document.write方法
- innerHTML属性
一定深度的利用dom
- createElement 方法
- createTextNode 方法
- appendChild 方法
- insertBefore 方法
实例
拖拽窗口(按住头部)
hoverHead(e) {
if (e.target.className === 'el-dialog__header') {
e.target.style.cursor = 'move'
}
},
clickHead(e) {
if (e.target.className === 'el-dialog__header') {
let head = e.target
console.log(e);
let distX = e.offsetX; let distY = e.offsetY; // 相对与头部的位置
document.onmousemove = function (mouse) {
// console.log('1', e)
head.parentElement.style.marginLeft = `${mouse.clientX - distX}px`
head.parentElement.style.marginTop = `${mouse.clientY - distY}px`
console.log(head.parentElement.style.marginLeft , head.parentElement.style.marginTop)
}
}
},
upHead(e) {
if (e.target.className === 'el-dialog__header') {
document.onmousemove = () => {}
}
},
原生JS中DOM节点相关API合集
来源 | https://microzz.com/2017/04/06/jsdom/
非常棒的资源
原生JS中DOM节点相关API合集