常用dom操作(转)

发表于

创建元素

让我们从创建HTML标签开始，我们可以通过document.createElement(tagName)方法来创建，如下所示：

1
const h1 = document.createElement('h1')
1
// <h1></h1>

文本

HTML标签如果没有内容的话是一个空的标签，我们可以使用element.textContent来增加一些文本：

1
h1.textContent = 'Hello world!'
1
// <h1>Hello world!</h1>

属性

可以通过element.setAttribute(name, value)方法来操作属性：

1
h1.setAttribute('class', 'hello')
1
// <h1 class="hello">Hello world!</h1>

通过 element.className 可以操作类：

1
h1.className = 'hello'
1
// <h1 class="hello">Hello world!</h1>

但是使用 classList是一种更好的方式:

1
h1.classList.add('hello')
1
// <h1 class="hello">Hello world!</h1>
1
h1.classList.remove('hello')
1
// <h1>Hello world!</h1>

标签的ID可以通过属性操作或是 id相关api来操作:

1
h1.setAttribute('id', 'hello-world')
1
h1.id = 'hello-world'
1
// <h1 id="hello-world" class="hello">Hello world!</h1>

如果你不确定使用attributes 还是 properties操作，那么就直接使用attributes操作-除了像标签的 value、checked等值.

记住你不能用 element.setAttribute(someBoolean, false) 来更改布尔属性值,但是可以使用其他的方法来代替:

1
2
input.checked = true
// <input checked>
1
2
input.checked = false
// <input>
1
2
input.setAttribute(‘checked’, ‘’)
// <input checked>
1
2
input.removeAttribute('checked')
// <input>

在一个标签之后附加标签元素

如何在标签元素之后插入标签呢?我们可以通过 parent.appendChild(child)来完成:

1
document.body.appendChild(h1)
1
// <body><h1>Hello world!</h1></body>

删除

可以通过 parent.removeChild(child)来删除一个标签元素:

1
document.body.removeChild(h1)
1
// <body></body>

查找

下面的这些API都可以实现查找功能：

注意，getElementsByTagName, getElementsByClassName 和 querySelectorAll 返回的不是数组而是一个NodeList对象, 所以不能直接使用数组操作. 这里有一些帮助你使用数组操作的方法.

在两个标签直接插入元素

如何在两一个标签之前插入一个元素呢？可以通过 parent.insertBefore(child, before) 来实现!

1
2
3
4
5
/*
 *  <body>
 *    <script src="main.js"></script>
 *  </body>
 */
1
document.body.insertBefore(h1, document.body.firstChild)
1
2
3
4
5
/*  <body>
 *    <h1>Hello world!</h1>
 *    <script src="main.js"></script>
 *  </body>
 */

创建标签列表

当有许多数据的时候，我们可以动态的创建标签：

点击查看

更新列表数据

下面我们来看如何更新列表：
点击查看

这里做了什么呢？主要做了两件事：

1.通过一个隐藏元素来查找子元素
通过使用_lookup我们可以使用已经存在的元素然后更新它们。
2.setChildren(parent, children)方法可以让你设置一个子元素列表，他会智能的比较已存在的子元素并将函数中提供的子元素合并进去。

你也可以使用 setChildren 来挂载或卸载子元素：

1
2
3
4
setChildren(login, [
  email,
  !forgot && pass
])

RE:DOM

这是我所编写的一个微型dom库，你可以在这里了解关于RE:DOM的一切。

1.通过redom会更容易创建DOM元素相比于el(query, …attributes/properties/text/children)等方法。
2.你可以自己定义视图并决定如何更新它们，浏览器会自动的更新对应的DOM。
3.redom的list(parent, View, id, initData)让你非常容易的实现dom数据的同步。

1
import { el, text, mount } from 'redom'
1
2
3
4
class Hello {
  constructor () {
    this.el = el('h1.hello', 
      { onclick: e => this.onclick(e) }
1
2
3
4
5
6
7
8
9
10
11
12
     'Hello ',
      this.target = text('world'),
      '!'
    )
  }
  update (data) {
    this.target.textContent = data
  }
  onclick (e) {
    console.log('clicked ', this)
  }
}
1
const hello = new Hello()
1
mount(document.body, hello)
1
hello.update('you')

lists方法的示例：

1
import { el, list, mount } from 'redom'
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
class Td {
  constructor () {
    this.el = el('td')
  }
  update (data) {
    this.el.textContent = data
  }
}
const Tr = list.extend('tr', Td)
const Table = list.extend('table', Tr)
const table = new Table
mount(document.body, table)
table.update([
  [ 1, 2, 3 ],
  [ 4, 5, 6 ],
  [ 7, 8, 9 ]
])