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. C# 获取汉字的拼音首字母和全拼（含源码）

    C# 获取汉字的拼音首字母 一种是把所有中文字符集合起来组成一个对照表:另一种是依照汉字在Unicode编码表中的排序来确定拼音的首字母.碰到多音字时就以常用的为准(第一种方法中可以自行更改,方法为手 ...

  2. [翻译] 正式宣布 .NET 5

    原文: Introducing .NET 5 今天,我们宣布 .NET Core 3.0 之后的下一个版本将是 .NET 5 .这将是 .NET 系列的下一个重要版本. 将来只会有一个 .NET ,您 ...

  3. HDU3478 【判奇环/二分图的性质】

    题意: 给你一幅图,给你一个起点,然后问你存不存在一个时刻,所有点可以在那个时刻到达. 思路: 这幅图首先是联通的: 如果出现奇数环,则满足在某一时刻都可能到达: 然后判断奇数环用二分图性质搞也是神奇 ...

  4. 简单实现TabBar的自定义

    StackoverFlow上看到的,通过继承UITabBarController创建自定义TabBarController.在原有TabBar的基础上添加一个背景层,在其基础上增加三个自定义按钮,通过 ...

  5. SpringMVC注解校验

    spring注解式参数校验     版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/jinzhencs/article/details/5168283 ...

  6. extern用法详解(转)

    1 基本解释 extern可以置于变量或者函数前,以标示变量或者函数的定义在别的文件中,提示编译器遇到此变量和函数时在其他模块中寻找其定义. 另外,extern也可用来进行链接指定. 2 问题:ext ...

  7. Qt 2D绘图之四：绘图中的其他问题

    一.重绘事件 前面讲到的所有绘制操作都是在重绘事件处理函数paintEvent()中完成的,是QWidget类中定义的函数.一个重绘事件用来重绘一个部件的全部或者部分区域,下面几个原因中的任意一个都会 ...

  8. Jmeter（二十三）稳定性测试后的波形图

    jmeter-plugins.org 这个网站为 JMeter 提供了一些增强型功能的插件,使用起来就像 Eclipse 装插件一样,完全做到了插件的可插拔特性.本文简要介绍如何使用这些插件让你的 J ...

  9. php中socket的使用（重点参考）

    一.开启socket phpinfo();查看是否开启了socket扩展,否则在php.ini中开启. 二.服务器端代码的写法 <?php error_reporting(E_ALL); set ...

  10. WebForm随笔

    一般处理程序中获取页面所传的值:int id = Convert.ToInt32(context.Request["id"]); 后台获取页面所传的值:int id = Conve ...