掌握 DOM 操作

5,465 阅读2分钟
原文链接: www.lixuejiang.me

原文
DOM操作并没有你想象的那么难。

初步介绍

许多web开发者认为DOM真的很难(或者很慢),你需要很多框架来驯服它。然后他们花了很多时间来学习框架,一两年过去之后,另一个框架变得流行,你需要从头开始学习一切。这样重复几次,JavaScript疲劳就出现了。更不用说一大堆依赖。
如果我告诉你DOM没有那么难,你会相信吗?如果不需要依赖第三方的库来掌握DOM是不是很酷,你会再给DOM一次机会吗?我们一起来看看:

DOM is not that hard and especially not slow.

首先,我会展示一些基本的技巧,来自于我自己的个人库RE:DOM

创建元素

让我们开始创建HTML元素,为了创建元素,你需要用document.createElement(tagName) 方法:

const h1 = document.createElement('h1')
// 

修改文本内容

如果html元素没有内容,显示出来就是空的:

h1.textContent = 'Hello world!'
// 

Hello world!

Attributes

h1.setAttribute('class', 'hello')
// 

Hello world!

为了管理类,用element.className属性

h1.className = 'hello'
// 

Hello world!

然而,最好的办法还是用classList

h1.classList.add('hello')
// 

Hello world!

h1.classList.remove('hello') //

Hello world!

要设置元素的ID,你可以用attribute或者直接设置id属性


h1.setAttribute('id', 'hello-world')
h1.id = 'hello-world'
// 

Hello world!

如果你不确定是用attributes还是properties,那就用attributes,除了表单元素的状态,像value和checked

除了下面这些,你不能用element.setAttribute(someBoolean, false)来设置bool值:

input.checked = true
// 
input.checked = false
// 
input.setAttribute(‘checked’, ‘’)
// 
input.removeAttribute('checked')
// 

添加元素

document.body.appendChild(h1)
// 

Hello world!

删除元素

document.body.removeChild(h1)
// 

查找元素

  • document.getElementById(id)
  • element.childNodes[i]
  • element.firstChild === element.childNodes[0]
  • element.lastChild === element.childNodes[element.childNodes.length - 1]
  • element.getElementsByTagName(tagName)
  • element.getElementsByClassName(className)
  • element.querySelector(query)
  • element.querySelectorAll(query)

注意:getElementsByTagName, getElementsByClassName 和 querySelectorAll返回的不是数组,而是一个NodeList,所以不能用ES5的数组迭代器迭代,这里有一些关于NodeList的介绍

元素之间插入元素

/*
 *  
 *    
 *  
 */
 document.body.insertBefore(h1, document.body.firstChild)
/*  
 *    

Hello world!

* * */

创建很多元素


const data = [
  [ 1, 2, 3 ],
  [ 4, 5, 6 ],
  [ 7, 8, 9 ]
  ]
const table = document.createElement('table')
data.forEach(row => {
  const tr = document.createElement('tr')
  row.forEach(cell => {
    const td = document.createElement('td')

    td.textContent = cell
    tr.appendChild(td)
 })
  table.appendChild(tr)
  })
document.body.appendChild(table)

更新一系列元素


const table = document.createElement('table')
document.body.appendChild(table)
updateTable(table, [
  [ 1, 2 ],
  [ 3, 4, 5 ],
  [ 6, 7, 8, 9 ]
  ])
setTimeout(() => {
  updateTable(table, [
    [ 1, 2, 3, 4 ],
    [ 5, 6, 7 ],
    [ 8, 9 ]
  ])  
  }, 1000)
function updateTable (table, data) {
  const rowLookup = table._lookup || (table._lookup = [])

  setChildren(table, updateRows(rowLookup, data))
  }
function updateRows (rowLookup, rows) {
  return rows.map((row, y) => {
    const tr = rowLookup[y] || (rowLookup[y] = document.createElement('tr'))
    const cellLookup = tr._lookup || (tr._lookup = [])
    setChildren(tr, updateCells(cellLookup, row))
    return tr
  })
  }
function updateCells (cellLookup, cells) {
 return cells.map((cell, x) => {
    const td = cellLookup[x] || (cellLookup[x] = document.createElement('td'))
    td.textContent = cell
    return td
  })
  }
function setChildren (parent, children) {
  let traverse = parent.firstChild
  for (let i = 0; i < children.length; i++) {
    const child = children[i]

    if (child == null) {
      return
    }

    if (child === traverse) {
      traverse = traverse.nextSibling
    } else if (traverse) {
      parent.insertBefore(child, traverse)
    } else {
      parent.appendChild(child)
    }
  }

  while (traverse) {
    const next = traverse.nextSibling
    parent.removeChild(traverse)

    traverse = next
  }
  }

这是什么魔法?这里发生了两件事:

  • 1.这里有一个隐藏的元素element._lookup = [],用来查找子元素(可能是一个有id的元素),用这个方法我们可以重复利用已经存在的dom,更新他们
  • 2.setChildren(parent, children)方法里有包含子元素的列表

你还可以用setChildren方法来mount/unmount子元素

setChildren(login, [
  email,
  !forgot && pass
  ])

后面是作者的RE:DOM的广告。