对文档进行操作

  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)

你可能感兴趣的:(操作)