JavaScript DOM 6 - 节点的创建，插入，替换，删除

liuchengxu 发布于2019-08-20 17:31 / 2701人阅读

摘要：来看一个在本文档嵌入一个来自中的节点的例子节点的插入在父节点上调用方法，参数是想要插入的子节点，执行的结果是，这个子节点会被成为父节点的最后一个子节点。必须传入一个或者，不能省略。

1: 节点的创建
新建一个新节点的方式主要有三种：
1: createElement()

document.createElement(tagName); //返回一个HTMLElement类型的节点，参数为字符串类型的标签名字

var p = document.createElement("p"); //

2: createTextNode()

document.createTextNode(text);//返回一个Text类型的节点，参数为这个节点里的内容，字符串

var text = document.createTextNode("text node content"); //"text node content"

3: cloneNode()

targetElement.cloneNode(deepClone);//它接受一个参数，如果为true,就返回对targetElement的深拷贝，也就是返回targetElement包含它的后代子节点；如果为false，就只返回targetElement本身，不包含任何的子节点

比如，我们有一段HTML：


    book 1
    book 2

我们对"

4: importNode()

document.importNode(externalNode, deep);

externalNode: 来自别的document的node, 比方说一个iframe的node
deep: 是否深拷贝，默认值为false. 在DOM4的时候，在deep缺省的情况下，它的默认值是true，但是后来又变为false。所以为了向前向后兼容，deep永远给一个值，不要缺省。

来看一个在本文档嵌入一个来自iframe中的节点的例子：

var iframe = document.getElementsByTagName("iframe")[0];
var oldNode = iframe.contentWindow.document.getElementById("myNode");
var newNode = document.importNode(oldNode, true);
document.getElementById("container").appendChild(newNode);

2: 节点的插入
1: appendChild()

parentNode.appendChild(childNode)

在父节点上调用appendChild（）方法，参数是想要插入的子节点，执行的结果是，这个子节点会被成为父节点的最后一个子节点。
假如我们之前有一段HTMl:


    book 1
    book 2

我们现在先新建一个"

"元素，然后把它添加到"

var lastBook = document.createElement("li");
lastBook.textContent = "last book";
var bookList = document.getElementsByClassName("bookList")[0];
bookList.appendChild(lastBook);

再执行完上面的代码之后，之前的HTML就会变成：


    book 1
    book 2
    last book

2: insertBefore()

var insertedNode = parentNode.insertBefore(newNode, referenceNode);

newNode: 想要插入的节点
referenceNode: 新的节点插入到referenceNode节点之前。必须传入一个node或者null，不能省略。

还是上面的一段HTML:


    book 1
    book 2

我们尝试在最后一个"

"前面插入一个新的"

var bookList = document.getElementsByClassName("bookList")[0];
var lastLi = bookList.lastElementChild;
var newLi = document.createElement("li");
newLi.textContent = "new book";
bookList.insertBefore(newLi, lastLi);

执行完上面的代码之后，原来的"

"就变为：
```
    book 1
    new book
    book 2
```
3: insertAdjacentHTML()
```
element.insertAdjacentHTML(position, HTMLText);//参数为一段HTML文本
element.insertAdjacentElement(position, Element);//参数为一个Element
element.insertAdjacentText(position, text); //插入一段纯文本
```
以上的三个方法，都是根据position的值，在特定的位置插入一个节点，只是参数的类型不一样。position的值有四个：
```
1: ‘beforeBegin’
2: "afterBegin"
3: "beforeEnd"
4: "afterEnd"
```
以上四个值，驼峰和全小写都可以。

1: 先来就以上三个不同的方法的使用和效果做一个对比：
还是先准备一段HTML:
```
 
    book 1
    book 2
 
```
1: element.insertAdjacentHTML(position, HTMLText);
```
var bookList = document.getElementsByClassName("bookList")[0];
bookList.insertAdjacentHTML("afterBegin"," new node
");
```
执行完之后，原来的HTML变成这样：

2: element.insertAdjacentElement(position, Element);
还是之前的那段HTML,然后我们执行：
```
var bookList = document.getElementsByClassName("bookList")[0];
var newLi = document.createElement("li");
newLi.textContent = "new node";
bookList.insertAdjacentElement("afterBegin", newLi)
```
执行完之后，效果变这样：

3: element.insertAdjacentText(position, text)
还是之前的那段HTML, 然后我们执行：
```
var bookList = document.getElementsByClassName("bookList")[0];
bookList.insertAdjacentText("afterBegin", "text content")
```
执行之后，会在"
- "元素换掉：
```
var bookList = document.getElementsByClassName("bookList")[0];
var oldLi = bookList.firstElementChild;
var newLi = document.createElement("li");
newLi.textContent = "new node";
bookList.replaceChild(newLi, oldLi);
```
  执行完上面的代码之后呢，之前的HTML就变成了这样：
```
    new node
    book 2
```
  4: 节点的删除
```
targetNode.parentNode.removeChild(targetNode);
```
  依然是在目标元素的父节点上调用这个方法，把目标元素作为参数传进去。
  还是我们之前的那段HTML:
```
    book 1
    book 2
 
  
```
  我们尝试着把第一个"
- "删掉：
```
var bookList = document.getElementsByClassName("bookList")[0];
bookList.removeChild(bookList.firstElementChild);
```
  这之后，就只剩下一个"
- "元素了：
```
        
    book 2
  
```
  removeChild()会对父节点的childNodes产生影响，删掉了一个节点，它后面的节点会在childNodes里依次往前移动。

混合云云服务器 javascript创建dom javascript的dom对象 javascript的dom编程 dom的节点类型

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/83645.html

前端_JavaScript_API

摘要：方法可用的屏幕高度窗口可用的屏幕宽度浏览器表示的颜色位数用户浏览器表示的颜色位数屏幕的像素高度屏幕的像素宽度对象返回前一个返回下一个返回某个具体页面事件事件:鼠标事件,键盘事件,进度事件,表单事件,触摸事件,拖拉事件,其他常见事件.GlobalEventHandler接口DOM(文档对象模型)是JavaScript操作网页的接口,将网页转为一个树状结构,所有的节点都有借口. DO...

tunny 2019-08-23 15:15 评论0 收藏0
《JavaScript高级程序设计》（第3版）读书笔记第11章 DOM拓展

摘要：对的两个主要拓展是选择和。以下插入标记的拓展已经纳入了规范。在写模式下，会根据指定的字符串创建新的子树，然后用这个子树完全替换调用元素。在删除带有时间处理程序或引用了其他对象子树时，就有可能导致内存占用问题。尽管DOM作为API已经非常完善了，但为了实现更多功能，仍然会有一些标准或专有的拓展。2008年之前，浏览器中几乎所有的拓展都是专有的，此后W3C着手将一些已经成为事实标准的专...

luck 2019-08-26 13:52 评论0 收藏0
《JavaScript高级程序设计》（第3版）读书笔记第11章 DOM拓展

摘要：对的两个主要拓展是选择和。以下插入标记的拓展已经纳入了规范。在写模式下，会根据指定的字符串创建新的子树，然后用这个子树完全替换调用元素。在删除带有时间处理程序或引用了其他对象子树时，就有可能导致内存占用问题。尽管DOM作为API已经非常完善了，但为了实现更多功能，仍然会有一些标准或专有的拓展。2008年之前，浏览器中几乎所有的拓展都是专有的，此后W3C着手将一些已经成为事实标准的专...

fjcgreat 2019-08-05 17:02 评论0 收藏0
JavaScript笔记——常见DOM知识

摘要：前言本篇文章以介绍常见的节点知识元素操作方法为目的，其中也对一些比较容易忽略的问题进行简要说明。此外，还有一些方式可以获得相关的元素节点。利用字符串拼接使用字符串拼接的方法插入元素是效率最高的。前言本篇文章以介绍常见的DOM节点知识、DOM元素操作方法为目的，其中也对一些比较容易忽略的问题进行简要说明。才疏学浅，如有纰漏之处或建议欢迎留下评论。 Node节点首先，简单看看Node...

madthumb 2019-08-20 18:58 评论0 收藏0
Javascript--DOM

摘要：中的所有对象都是以对象的形式实现的。这意味着中的对象与原生对象的行为或活动特点并不一致。该属性指向表示整个文档的文档节点。同时由要插入的节点占据其位置。返回被移除的节点。操作类名操作类名时，需要通过属性添加删除和替换类名。 Note:IE中的所有DOM对象都是以COM对象的形式实现的。这意味着IE中的DOM对象与原生Javascript对象的行为或活动特点并不一致。 DOM1级主要定义...

jsyzchen 2019-08-19 17:42 评论0 收藏0