重新认识DOM操作-re:dom

掌握DOM操作

DOM操作并没有你想象中那么困难

DOM操作

简介

许多的web开发者认为DOM操作很困难或者很慢以至于需要一个web框架来完成DOM操作的工作。所以他们花费许多的时间去学习框架。一两年之后,当新的框架出现并变得流行后,你不得不重头学起。重复几次之后就会对javascript的学习感到疲惫,更不要说去处理一大堆的依赖关系了。

如果我告诉你DOM操作并不是那么难?你愿意相信我吗?不通过第三方库就可以控制浏览器不是很棒吗?如果你愿意给DOM操作一个机会的话,让我们一起来见证一下:
DOM操作并不难,尤其不慢
首先我会向你展示一些基本的dom操作以及一些小技巧在RE:DOM中所使用的,这是我缩写的一个微型的dom库。

创建元素

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


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

文本

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


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

属性

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


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

通过 element.className 可以操作类:


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

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


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

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


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

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

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


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

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

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


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

删除

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


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

查找

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

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

在两个标签直接插入元素

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


/*
 *  <body>
 *    <script src="main.js"></script>
 *  </body>
 */

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

/*  <body>
 *    <h1>Hello world!</h1>
 *    <script src="main.js"></script>
 *  </body>
 */

创建标签列表

当有许多数据的时候,我们可以动态的创建标签:
点击查看

更新列表数据

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

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

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


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数据的同步。


import { el, text, mount } from 'redom'

class Hello {
  constructor () {
    this.el = el('h1.hello', 
      { onclick: e => this.onclick(e) }

     'Hello ',
      this.target = text('world'),
      '!'
    )
  }
  update (data) {
    this.target.textContent = data
  }
  onclick (e) {
    console.log('clicked ', this)
  }
}

const hello = new Hello()

mount(document.body, hello)

hello.update('you')

lists方法的示例:


mport { el, list, mount } from 'redom'

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 ]
])

原文链接: https://medium.com/re-dom/master-the-dom-bc1a2a06089b
翻译:杨小福 http://www.zcfy.cc/article/master-the-dom-re-dom-1368.html

1.本文由杨琼博客整理发布,部分文章来自网络,如有侵犯权益,请联络博主,资源失效和内容勘误欢迎留言.

2.转载请注明本文地址:http://www.iyangqiong.com/web/387.html

3.订阅更新:您可以通过 RSS订阅本站

【推荐!必备网址导航】http://longmiao.wang/

分享到:
顶部 评论 底部