DOM (Document Object Model)
DOM 节点类型
Document #document => null DocumentTpe doctype名称 => null Element elementName => null Attr 属性名称 => 属性值 Text #text => 节点内容 Comment #comment => 注释文本
DOM 获取节点
// 查询id元素
const node = document.getElementById(element)
// 查询className元素，返回的是一个node list，是一个集合
const node = document.getElementsByClassName(className)
// 查询标签元素,返回的是一个node list，是一个集合
const node = document.getElementsByTagName(tagname)
// 查询元素的 name 属性
document.getElementsByName(name)
// h5 出的
// 获取selector选择器元素
const node = document.querySelector(selector)
// 获取所有selector选择器元素
const node = document.querySelectorAll(selector)
// 查询第一个子节点/最后一个
const node = document.querySelector(selector).firstChild(lastChild)
// 查询第一个元素子节点
const node = document.querySelector(selector).firstElementChild(lastElementChild)
// 查询第几个子元素节点，返回一个node list集合,通过下标获取第几个元素节点
const node = document.querySelector(selector).children[1]
// 查询第几个子节点，包括文本节点等...
const node = document.querySelector(selector).childNodes[1]
// 查询自己是父元素的第几个元素节点
const node = document.querySelector('.three')
Object.prototype.index = function () {
let index;
const nodeList = this.parentElement.children
// 使用foreach遍历报错
for (let i = 0; i < nodeList.length; i++) {
if (nodeList[i] == this) index = i
}
return index
}
console.log(node.index())
DOM 设置/获取内容
.innerHTML 和.innerText // 获取内容 .innerHTML = 'tet' // 设置内容 // 区别就是innerHTMl可以渲染html标签
DOM 设置/获取元素特性
- id
elementNode.id // 获取 elementNode.id = 'value' //设置
- class
elementNode.className // 获取， 返回一个字符串
element.classList // 获取,返回一个集合
elementNode.className = 'className' // 设置
elementNode.classList.add('className') // 添加样式
elementNode.classList.remove('className') // 移除样式
- getAttribute 属性
<span value="test" name="jack"></span>
span.getAttribute('value') // 获取特性
span.setAttribute('class', 'value') // 设置class特性
- data-value 自定义特性
// 标签自定义特性必须以data-开头
<span data-value="test" data-name="jack" ....></span>
span.dataset //获取data-开头的值，返回一个对象 {value: 'test', name: 'jack'}
span.dataset.test // 获取或设置
DOM节点操作
// 创建节点
const div = document.createElement('div')
div.className = 'box1' // 创建属性节点
// 添加节点
cosnt html = '<span>11</span>' // 并不是节点元素，不能通过appendChild添加
document.body.innerHTML = html
// 删除子节点
div.removeChild(node) // 删除指定子节点，返回被删除的节点
div.parentElement.removeChild(div) // 删除自身元素
// 替换节点
div.replaceChild(newNode, currentNode)
// 克隆节点
div.cloneNode([boolean])
boolean: false // 浅克隆， 只会克隆节点结构
boolean: true // 深克隆， 克隆节点所有子节点，也克隆通过AddEventListener监听的事件
// 在指定的子节点之前插入节点
div.appendChild(newNode) // 在元素末尾添加一个新节点
div.insertBefore(newNode, div.firstChild) // 在第一个元素之前添加一个新元素
div.insertBefore(newNode, null) // 等同于div.appendChild(newNode)
DOM 遍历
// forEach()
const array = ['one', 'two', 'three', 'four']
array.forEach((currentValue, index, array)=>{
currentCalue => //数组当前的值 'one', 'two', 'three', 'four'
inext => // 数组下标 0, 1, 2, 3
array => // 数组本身 ['one', 'two', 'three', 'four']
return => // 循环无法中途跳出
})
// for...in遍历
const array = ['one', 'two', 'three', 'four']
array.__proto__.result = () => console.log('result')
for (let index in array) {
console.log('index:', index) => // 对象只能获得key，数组只能获取下标
array[index] => // 获取当前的值
// 能遍历对象原型上的方法, 也会打印result
}
// for...of 遍历
对于普通对象，没有部署原生的 iterator 接口，直接使用 for...of 会报错
var obj = {
'name': 'Jim Green',
'age': 12
}
for(let key of obj) {
console.log('for of obj', key)
}
// Uncaught TypeError: obj is not iterable
// map 遍历
let iterable = new Map([["a", 1], ["b", 2], ["c", 3]]);
for (let [key, value] of iterable) {
console.log(value) => // 1, 2, 3
console.log(key) => // a, b, c
}
来源：https://www.cnblogs.com/JunLan/p/12657557.html