转载

DOM之文档修改更新

DOM的修改更新可以使页面是动态的. 使用下面的方法描述, 构造新的页面元素且使他们处于活动状态.

上面DOM操作方法的描述定义在 DOM LEVEL 中.

创建元素

下面的方法是在DOM创建一个新的元素节点:

  • document.createElement(tag)

    创建新的DOM元素:

    var div = document.createElement('div')
  • document.createTextNode(text)

    创建新的DOM文本节点:

    var textElem = document.createTextNode('Robin was here')

createElement是使用最多的方法, 但是createTextNode也是常使用的. 它创建一个文本节点可以追加到另外的元素节点中. 对于一个空的元素节点. 创建一个文本节点追加到它里面比起innerHTML要快得多. 但是innerHTML非常简单, 也支持标签嵌套, 因此他们两个都有各自的有用之地.

复制

一个元素可以被复制:

  • elem.cloneNode(true)

    深入复制, 会复制它的子节点

  • elem.cloneNode(false)

    复制节点,包含属性. 但是不包含子节点.

添加元素

元素做某些事情, 你需要调用他们相应的方法:

  • parentElem.appendChild(elem)

  • 追加elem到parentElem, 作为子节点.

下面例子演示了创建和添加新元素到BODY:

<div>   ... </div> <script>   var div = document.body.children[0]    var span = document.createElement('span')   span.innerHTML = 'A new span!'   div.appendChild(span) </script> 

新的节点作为parentElem的最后一个子节点.

一个空的DOM节点elem. 有什么不一样?

elem.appendChild(document.createTextNode(text))

比较

elem.innerHTML = text
  • parentElem.insertBefore(elem, nextSibling)

  • 在nextSibling元素之前,插入elem到parentElem.

下面代码演示了在第一个子节点之前插入一个新的节点:

<div>   ... </div> <script>   var div = document.body.children[0]    var span = document.createElement('span')   span.innerHTML = 'A new span!'   div.insertBefore(span, div.firstChild) </script> 

提示: 如果insertBefore的第二个参数是null, 则与appendChild作用一样.

elem.insertBefore(newElem,  null // same as
elem.appendChild(newElem)

所有的插入方法返回插入节点.

移除节点

DOM移除节点, 主要有两个方法:

  • parentElem.removeChild(elem)

  • 从parentElem中移除子节点elem.

  • parentElem.replaceChild(elem, currentElem)

  • 通过elem替换parentELem子节点currentElem.

两个方法都返回移除的节点, 移除的节点还可以插入到DOM中.

如果你想移动节点, 首先就不要移除他.

elem.appendChild/insertBefore 从他之前的位置自动删除elem

下面的代码将最后一个子节点移动到最开始的地方:

<div>First div</div> <div>Last div</div> <script>   var first = document.body.children[0]   var last = document.body.children[1]    document.body.insertBefore(last, first) </script> 

当有一个父元素的节点插入方法被调用时, 移除自动发生.

总结

创建方法:

  • document.createElement(tag) - 创建新的元素节点

  • document.createTextNode(value) - 创建新的文本节点

  • elem.cloneNode(deep) - 复制节点

通过父节点来插入和移除节点. 所有的都返回elem:

  • parent.appendChild(elem)

  • parent.insertBefore(elem, nextSibling)

  • parent.removeChild(elem)

  • parent.replaceChild(elem, currentElem)

本文属于吴统威的博客, 微信公众号:bianchengderen,QQ群:186659233 的原创文章,转载时请注明出处及相应链接:http://www.wutongwei.com/front/infor_showone.tweb?id=228 ,欢迎大家传播与分享.

原文  http://www.wutongwei.com/front/infor_showone.tweb?id=228
正文到此结束
Loading...