JS对文档进行操作

对文档进行操作

 

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)

 

分类: JavaScript

标签: DOM