DOM Node 的建立、删除与修改

栏目: JavaScript · 发布时间: 5年前

内容简介:在之前的介绍中,我们已经理解了DOM Node的类型、以及节点之间的查找与关系。那么在今天的介绍里我们将继续来说明,如何通过DOM API来建立新的节点、修改以及删除节点。通过在建立新的

在之前的介绍中,我们已经理解了DOM Node的类型、以及节点之间的查找与关系。那么在今天的介绍里我们将继续来说明,如何通过DOM API来建立新的节点、修改以及删除节点。

DOM 节点的新增

document.createElement(tagName)

通过 document.createElement() 可以建立一个新的元素:

var newDiv = document.createElement('div');
复制代码

在建立新的 div 元素 newDiv 后,这时候我们在浏览器上还看不到它,直到通过 appendChild()insertBefore()replaceChild() 等方法将新元素加入至指定的位置之后才会显示。

新建立的 newDiv 我们也可以同时对它指定属性,如:

newDiv.id = "myNewDiv"; 
newDiv.className = "box";
复制代码

document.createTextNode()

之前曾介绍过,除了HTML元素节点外,还有文字节点,那么 document.createTextNode() 就是用来建立文字节点的方法。

用法很简单,直接在 document.createTextNode() 加入字符串即可。跟 createElement 一样的是,新增的TextNode在被加入至某个节点前,我们是看不到它的。

var newDiv = document.createElement('div');

// 建立 textNode 文字节点
var textNode = document.createTextNode("Hello world!");

// 通过 newDiv.appendChild 将 textNode 加入至 newDiv 
newDiv.appendChild(textNode);
复制代码

document.createDocumentFragment()

在DOM规范的所有节点之中, DocumentFragment 算是最特殊的一种,它是一种没有父层节点的 最小化文件对象 。可以把它看作是一个轻量化的 Document ,用如同标准文件一般的方式来保存片段的文件结构。

例如,一开始我们有一个HTML 的容器元素:

<ul id="myList"></ul>
复制代码

接着我们通过 document.createDocumentFragment() 来建立 DocumentFragment

// 取得外层容器 myList
var ul = document.getElementById("myList");

// 建立一个 DocumentFragment,可以把它看作一个虚拟的容器
var fragment = document.createDocumentFragment();

for (var i = 0; i < 3; i++){
  // 生成新的 li,加入文字后置入 fragment 中。
  let li = document.createElement("li");
  li.appendChild(document.createTextNode("Item " + (i+1)));
  fragment.appendChild(li);
}

// 最后将组合完成的 fragment 放进 ul 容器
ul.appendChild(fragment);
复制代码

通过操作 DocumentFragment 与直接操作DOM最关键的区别在于 DocumentFragment 不是真实的DOM结构,所以说 DocumentFragment 的变动并不会影响目前的网页文件,也不会导致回流(reflow)或引起任何影响效果的情况发生。

document.write()

document 对象要将某内容写入网页也可以用 write() 方法,当浏览器读取页面,解析到 document.write() 的时候就会停下来,并且将内容输出,且不只是单纯的字符串,也可以是HTML的标签。

我们只要将对应的HTML 字符串传入:

document.write("<h1>Hello World!</h1>");
复制代码

甚至,如果要新增一个 <script> 标签,并指定外部js资源也是可以的,但要注意的是:

// 写成这样, </script>会变成目前 script 块的结束,导致错误 
document.write("<script type=\"text\javascript\" src=\"file.js\">" + "</script>");

// 为了避免这种问题,要将结尾的标签这种写法 <\/script> 就 ok 了 
document.write("<script type=\"text\javascript\" src=\"file.js\">" + "<\/script>");
复制代码

另外,需要特别注意的是,当网页已经读取完成后才执行 document.write() ,则里面的内容会完全覆盖掉目前的网页:

window.onload = function(){   
  document.write("Hello world!"); 
};
复制代码

上面例子的 window.onload 表示网页已载入完成,此时无论网页原本有什么内容,都会被 "Hello world!" 所覆盖。

DOM 节点的修改与删除

上面介绍了很多建立DOM节点的方法,除了最后的 document.write 之外,其他都只是单纯建立节点,并未输出至网页上。

那么,接下来要介绍的几个方法,则说明要如何将刚刚建立好的DOM 节点,置入到我们所需要指定的位置上。

NODE.appendChild(childNode)

DOM Node 的建立、删除与修改

通过 appendChild() 方法,可以将指定的 childNode 节点,加入到 Node 父容器节点的末端:

<ul id="myList">
  <li>Item1</li>
  <li>Item2</li>
  <li>Item3</li>
</ul>

<script>
  // 取得容器
  var myList = document.getElementById('myList');
  // 建立新的 <li> 元素
  var newList = document.createElement('li');

  // 建立 textNode 文字节点
  var textNode = document.createTextNode("Hello world!");

  // 通过 appendChild 将 textNode 加入至 newList
  newList.appendChild(textNode);

  // 通过 appendChild 将 newList 加入至 myList
  myList.appendChild(newList);
</script>
复制代码

NODE.insertBefore(newNode, refNode)

DOM Node 的建立、删除与修改

insertBefore() 方法,则是将新节点 newNode 插入至指定的 refNode 节点的前面:

<ul id="myList">
  <li>Item1</li>
  <li>Item2</li>
  <li>Item3</li>
</ul>

<script>
  // 取得容器
  var myList  = document.getElementById('myList');

  // 取得 "<li>Item2</li>" 的元素
  var refNode = document.querySelectorAll('li')[1];

  // 建立 li 元素节点
  var newNode = document.createElement('li');

  // 建立 textNode 文字节点
  var textNode = document.createTextNode("Hello world!");
  newNode.appendChild(textNode);

  // 将新节点 newNode 插入 refNode 的前方
  myList.insertBefore(newNode, refNode);
</script>
复制代码

NODE.replaceChild(newChildNode, oldChildNode)

DOM Node 的建立、删除与修改

replaceChild() 方法,则是将原本的 oldNode 替换成指定的 newNode

<ul id="myList">
  <li>Item1</li>
  <li>Item2</li>
  <li>Item3</li>
</ul>

<script>
  // 取得容器
  var myList  = document.getElementById('myList');

  // 取得 "<li>Item2</li>" 的元素
  var oldNode = document.querySelectorAll('li')[1];

  // 建立 li 元素节点
  var newNode = document.createElement('li');

  // 建立 textNode 文字节点
  var textNode = document.createTextNode("Hello world!");
  newNode.appendChild(textNode);

  // 将原有的 oldNode 替换成新节点 newNode
  myList.replaceChild(newNode, oldNode);
<script>
复制代码

NODE.removeChild(childNode)

DOM Node 的建立、删除与修改

removeChild() 方法,则是将指定的 childNode 子节点移除。

<ul id="myList">
  <li>Item1</li>
  <li>Item2</li>
  <li>Item3</li>
</ul>

<script>
  // 取得容器
  var myList  = document.getElementById('myList');

  // 取得 "<li>Item2</li>" 的元素
  var removeNode = document.querySelectorAll('li')[1];

  // 将 myList 下的 removeNode 节点移除
  myList.removeChild(removeNode);
</script>
复制代码

相信看完今天的分享,已经有能力可以通过DOM 提供的API 来进行节点的新增、修改以及删除了吧。

大家也许会发现,无论要对网页元素做出什么样的操作,我们都会基于某个节点出发对吧?

刚好呼应阿基米德的一句众所周知的名言:

「给我一个支点,我就能撬动整个地球。」

那么有了DOM API 的帮助后, JavaScript 也可以说:

「给我一个节点,我就能建立整个网页世界。」

如果觉得文章对你有些许帮助,欢迎在 我的GitHub博客 点赞和关注,感激不尽!


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

大视觉创意宝典

大视觉创意宝典

2008-8 / 28.00元

《大视觉创意宝典:网页设计》主要内容:将优秀的网页分为设计、卡通、教育、金融、通讯、企业、房地产、娱乐等十四个章节,并详尽解析其页面布局、配色参考、设计特色及细节元素。丛书编写以设计基础的角度出发,具备速查、参照、案头工具书等功能。一起来看看 《大视觉创意宝典》 这本书的介绍吧!

CSS 压缩/解压工具
CSS 压缩/解压工具

在线压缩/解压 CSS 代码

Base64 编码/解码
Base64 编码/解码

Base64 编码/解码

MD5 加密
MD5 加密

MD5 加密工具