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. 前端基础 之css

    css 介绍 css(层叠样式表)定义如何显示html 元素 当浏览器读到一个样式表, 他就会按照这个表对文档进行格式化(渲染) css语法 css实例 css 注释 注释是代码之母 /* 这是注释* ...

  3. unity3d 在UGUI中制作自适应调整大小的滚动布局控件

    http://blog.csdn.net/rcfalcon/article/details/43459387 在游戏中,我们很多地方需要用到scroll content的概念:我们需要一个容器,能够指 ...

  4. 3DMAX 如何将删去的面补回来

    1.例如下面长方体被删除一个面 2.点击主键盘区数字键[3] ,进入[边界]修改模式 ,使用鼠标点击 被删除面的边界,并点击[修改面板]---[封口],例如下图:

  5. IT兄弟连 JavaWeb教程 JSP内置对象1

    JSP内置对象定义 JSP提供了由容器实现和管理的内置对象,也可以称之为隐含对象,这些内置对象不需要通过JSP页面编写来实例化,在所有的JSP页面中都可以直接使用,它们起到了简化页面的作用,JSP的内 ...

  6. python之文件路径截取 & endswith()

    文件路径截取: >>> import os >>> path = '/etc/singfor/passwd/sunny/test.log' >>> ...

  7. 应用日志获取-web系统

    1 场景 应用使开发写的,但应用使部署再服务器上,而开发没有ssh登陆服务器的权限. so,开发总是请运维查日志,下载日志. so and so,运维要花很多时间帮开发去搞日志. 这是件很没意义的事, ...

  8. HDU 1233(最小生成树）

    HDU 1233(最小生成树 模板) #include <iostream> #include <algorithm> #include <cstdio> usin ...

  9. 【模板】平衡树——Treap和Splay

    二叉搜索树($BST$):一棵带权二叉树,满足左子树的权值均小于根节点的权值,右子树的权值均大于根节点的权值.且左右子树也分别是二叉搜索树.(如下) $BST$的作用:维护一个有序数列,支持插入$x$ ...

  10. BZOJ1218（线段树+扫描线）

    1.扫描线扫描x轴,线段树维护y轴. 2.坐标+1,线段树是从1开始维护.然后让边长--,这样就能包含边上的点了. 3.为了保证点在正方形内:在x轴上利用差分的思想,在x出Add(val),在x+r( ...