js常见的创建dom节点的方法有

createElement() 创建一个元素节点 => 接收参数为string类型的nodename

createTextNode() 创建一个文本节点 => 接收参数为string类型的text内容

createAttribute() 创建一个属性节点 => 接收参数为string类型的属性名称

createComment() 创建一个注释节点 => 接收参数为string类型的注释文本

一、创建DOM节点
使用的命令是

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

这样就创建了一个div标签。

二、插入DOM节点

移动DOM节点也就是把这个节点插入到html文档中的某个地方，这里js给了我们两个方法：

1.appendChild()：把节点插入到父节点的末尾。

document.body.appendChild(oDiv);   //把div插入到body中，并且位于末尾

2.insertBefore()：把节点插入到父节点的某个兄弟节点的前面。

var oP = createElement('p');  //创建一个p节点
document.body.insertBefore(oP,oDiv); //把p节点插入到div的前面

三.删除DOM节点

删除DOM节点的方法是removeChild()。

document.body.removeChild(oP);  //删除p节点

四.查找DOM节点

查找DOM节点的方法很多，常用的有：

getElementById()    //通过元素Id，唯一性

如html文档如下：

<body>
    <div id='box'></div>
</body>

这是可以使用getElementById()获取到id为box的div。

var oDiv = document.getElementById('box');

2.getElementsByTagName()   //通过元素的标签名来选择元素

var aDiv = getElementsByTagName('div');
要注意的是，getElementsByTagName()获取的是一组元素，所以如果想取得上面那个id为box的div要在后面加上[0];

var oDiv = getElementsByTagName('div')[0];

五、替换DOM节点

替换DOM节点的方法是replaceChild()。

var oSpan = document.createElement('span'); //创建一个span标签
document.body.replaceChild(oSpan,oBox); //用span标签替换div标签
最常用的DOM操作就是这些了，其他还有很多的方法，就目前而言，各浏览器兼容性不太好，所以还是推荐大家暂时只使用上述这些方法。

DocumentFragment节点不属于文档树，继承的parentNode属性总是null。它有一个很实用的特点，当请求把一个DocumentFragment节点插入文档树时，插入的不是DocumentFragment自身，而是它的所有子孙节点。这个特性使得DocumentFragment成了占位符，暂时存放那些一次插入文档的节点。它还有利于实现文档的剪切、复制和粘贴操作。 
另外，当需要添加多个dom元素时，如果先将这些元素添加到DocumentFragment中，再统一将DocumentFragment添加到页面，会减少页面渲染dom的次数，效率会明显提升。

DocumentFragment文档碎片(高效批量更新多个节点)

原始方法：

var parentNode = document.getElementsByTageName('ul')[0];

function appendDataToElement  (appendToElement, num) {

　　let node;　

　　for (let i = 0; i < num.length; i++) {

　　　　node = document.createElement('li');

　　　　node.innerHTML = i;

　　　　appendToElement.appendChild(node);

　　}

}

appendDataToElement (parentNode, num);

优化后：

var parentNode = document.ElementsByTageName('ul')[0],

　  fragment = document.createDocumentFragment();

function appendDataToElement(appendToElement, num) {

　　let node;

　　for (let i = 0; i < num.length; i++) {

　　　　node = document.createElement('li');

　　　　node.innerHTML = i;

　　　　fragment.appendChild(node);

　　}

　　appendToElement.appendChild(fragment);

}

appendDataToElement(parentNode, num);

JS常用操作节点的方法的更多相关文章

  1. (转)vim(vi)常用操作及记忆方法

    vim(vi)常用操作及记忆方法 原文:https://www.cnblogs.com/doseoer/p/6241443.html vi(vim)可以说是linux中用得最多的工具了,不管你配置服务 ...

  2. zepto.js常用操作

    zepto.js是移动端的jquery,但是并没有提供所有与jquery类似的api.Zepto设计的目的是有一个5-10k的通用库.下载并快速执行.有一个熟悉通用的API,所以你能把你主要的精力放到 ...

  3. vim(vi)常用操作及记忆方法

    vi(vim)可以说是linux中用得最多的工具了,不管你配置服务也好,写脚本也好,总会用到它.但是,vim作为一个“纯字符”模式下的工具,它的操作和WINDOWS中的文本编辑工具相比多少有些复杂.这 ...

  4. js常用操作代码

    页面前进后退<input type=button value=刷新 onclick="window.location.reload()"><input type= ...

  5. js 常用数组和字符串方法

    javascript数组与字符串常用方法总结 最近在梳理js的基础,首先从数组和字符串开始. string 常用方法: 1.substring(start开始位置的索引,end结束位置索引) 截取的位 ...

  6. JS中插入节点的方法appendChild和insertBefore的应用

    1.appendChild() 方法:可以向节点的子节点列表的末尾添加新的子节点.比如:appendChild(newchild)括号里可以是创建的标签var newchild = document. ...

  7. JS(JavaScript)插入节点的方法appendChild与insertBefore

    首先 从定义来理解 这两个方法: appendChild() 方法:可向节点的子节点列表的末尾添加新的子节点.语法:appendChild(newchild) insertBefore() 方法:可在 ...

  8. JS添加父节点的方法。

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. js常用操作事件

    触发描述 方法 用法 点击 onclick="method();"   变换 onchange="testChange();"   双击 ondblclick= ...

随机推荐

  1. 使用命令把类打成jar包

    测试用类 public class Hello { public static void main(String[] args) { System.out.println("hello wo ...

  2. STL-开篇

    基本概念 STL: Standard Template Library,标准模板库 定义: c++引入的一个标准类库 特点:1)数据结构和算法的 c++实现( 采用模板类和模板函数)2)数据的存储和算 ...

  3. tinyxml一些应注意的问题

     今天在对使用tinyxml库的程序调试的时候,出现的一些问题让人很纠结,特记以此... 在对TixmlDocument创建时我是用new创建的,然后在用完之后我用delete释放掉,可是用gdb调试 ...

  4. [Xcode 实际操作]九、实用进阶-(11)系统本地通知的创建和使用

    目录:[Swift]Xcode实际操作 本文将演示系统本地通知的创建和使用. 在项目导航区,打开视图控制器的代码文件[ViewController.swift] import UIKit //引入需要 ...

  5. 【POJ - 3040】Allowance（贪心）

    Allowance 原文是English,这里就放Chinese了 Descriptions: 作为创纪录的牛奶生产的奖励,农场主约翰决定开始给Bessie奶牛一个小的每周津贴.FJ有一套硬币N种(1 ...

  6. 返回零长度的数组或集合，而不是null

    返回零长度的数组或集合,而不是null   像下面的方法并不少见: private final List<Cheese> cheesesInStock = ...; /** * @retu ...

  7. extern使用方法总结！(转)

    extern 在源文件A里定义的函数,在其它源文件里是看不见的(即不能访问).为了在源文件B里能调用这个函数,应该在B的头部加上一个外部声明: extern   函数原型: 这样,在源文件B里也可以调 ...

  8. iOS开发 - 多线程实现方案之NSThread篇

    NSThread API //类方法:创建一个线程 + (void)detachNewThreadWithBlock:(void (^)(void))block API_AVAILABLE(macos ...

  9. servlet小型应用服务器搭建通过tomcat发布web项目

    1.servlet简介:Servlet 是一个 Java程序,是在服务器上运行以处理客户端请求并做出响应的程序 2.servlet的生命周期图解: 3.各阶段: 4.基本的servlet代码: pub ...

  10. [题解]（组合数/二位前缀和）luogu_P2822组合数问题

    首先要知道C(n,m)=C(n-1,m)+C(n-1,m-1),这样显然是一个杨辉三角,这样大部分的问题就解决了, 那么判能否整除只需要杨辉三角对k取模即可, 而对于多组数据的k都是一样的,所以用前缀 ...