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. OGNL和类型转换

    转载 JavaWeb -- Struts 数据传输:OGNL和类型转换 1. 数据传输:OGNL和类型转换 OGNL和struts2 OGNL:Object-Graph Navigation Lang ...

  2. python3 类 组合

    解决类与类之间代码冗余问题有两种解决方案: 第一 是继承,第二是组合 1:继承   描述的是类与类之间的也就是什么是什么的关系 2: 组合  描述的是类与类之间的关系,  是一种什么有什么的关系的,也 ...

  3. 利用Web服务生成产品编号 执行添加操作

    为什么我想要执行添加操作,却添加不成功,系统提示我comm.ExecuteNonQuery有错误 已找到原因 在 string strsql = "insert into tb_goods( ...

  4. python的pip管理工具

    Python有两个著名的包管理工具easy_install.py和pip.在Python2.7的安装包中,easy_install.py是默认安装的,而pip需要我们手动安装. 在此进行编译安装pip ...

  5. bzoj1660:[Usaco2006 Nov]badhair乱头发节

    Description 农民John的某 N 头奶牛 (1 <= N <= 80,000) 正在过乱头发节!由于每头牛都 意识到自己凌乱不堪的发型, FJ 希望统计出能够看到其他牛的头发的 ...

  6. 分布式通信-tcp/ip 广播

    服务端 /** * 广播 */ public class MulticastServer { public static void main(String[] args) { try { //地址是2 ...

  7. Python及bs4、lxml、numpy模块包的安装

    http://blog.csdn.net/tiantiancsdn/article/details/51046490(转载) Python及bs4.lxml.numpy模块包的安装 Python 的安 ...

  8. Thinking In Java持有对象阅读记录

    这里记录下一些之前不太了解的知识点,还有一些小细节吧 序 首先,为什么要有Containers来持有对象,直接用array不好吗?——数组是固定大小的,使用不方便,而且是只能持有一个类型的对象,但当你 ...

  9. Java方式配置Spring MVC

    概述 使用Java方式配置Spring MVC,以及回顾一下Spring MVC的各种用法. Spring MVC简述 关于Spring MVC的介绍网上有很多,这里就不再赘述了,只是要说一下,Spr ...

  10. TCP简单程序

    服务器段: package com.dcz.socket; import java.io.IOException; import java.io.OutputStream; import java.n ...