javascript_DOM操作

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 设置/获取元素特性

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
 }