码迷,mamicode.com
首页 > 其他好文 > 详细

对文档进行操作

时间:2015-03-01 15:40:05      阅读:197      评论:0      收藏:0      [点我收藏+]

标签:

  1. 创建节点
  2. 追加节点
  3. 删除节点
  4. 任务及例子
  5. 总结

对DOM的修改是,构建动态网页的关键。使用下面列举的方法,我们可以创建新的网页并且动态进行更改。

更多的DOM操作方法请查 DOM1

创建节点

使用以下方法在DOM中创建元素。

  1. document.createElement(tag):创建元素节点
    var div = document.createElement(‘div‘)
  2. document.createTextNode(text): 创建文本节点
    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>

新的元素会成为最后一个子节点。

有一个空内容的元素节点 elem,下面两种操作方式有什么不同, text内容为 "<b>tag</b>"

  1. elem.appendChild(document.createTextNode(text))
  2. elem.innerHTML = text

实现链接

parentElem.insertBefore(elem, nextSibling):插入elem到parentElem的子节点nextSibling之前。

演示:

<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):从parentElem替换elem元素为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>

任务及例子

编写 insertAfter(elem, refElem)方法,插入 elem 节点到 refElem节点后。

<div>Very</div>
<div>Secret</div>

<script>
  var elem = document.createElement(div);
  elem.innerHTML = Child‘;

  function insertAfter(elem, refElem) { 
}
insertAfter(elem, document.body.firstChild) insertAfter(elem, document.body.lastChild) </script>

 

参考答案

 

编写一个方法 removeChildren 移除该元素所有子节点。

<div>Very</div>
<div>Secret</div>
<div>Children</div>

<script>
  function removeChildren(elem) { 
  }

  removeChildren(document.body) // 执行后BODY标签变空  
</script>

参考答案

 

创建一个程序,它又以下功能。

  1. 通过对话框提示,用户输入内容。(prompt方法弹出对话框)
  2. 根据内容创建 LI 节点并添加到 UL 中
  3. 当ESC按下时,停止程序,否则一直运行。

参考答案

总结

创建节点:

  • document.createElement(tag)  创建新的标签
  • document.createTextNode(value)  创建指定内容的文本节点(注意创建文本内容时与innerHTML的区别)
  • elem.cloneNode(deep)  克隆元素节点
    • deep: true 深拷贝
    • deep: false 浅拷贝

插入和删除节点:父节点调用方法,都返回elem。

  • parent.appendChild(elem)
  • parent.insertBefore(elem, nextSibling)
  • parent.removeChild(elem)
  • parent.replaceChild(elem, currentElem)

对文档进行操作

标签:

原文地址:http://www.cnblogs.com/parkcg/p/4305603.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!