今天学习了原生js的dom节点的操作，就记录下来，仅供自己以后参考。

1)创建节点：除了可以使用createElement创建元素，也可以使用createTextNode创建文本节点.

document.body指向的是<body>元素;document.documentElement则指向<html>元素

    //创建节点

    var createNode = document.createElement("div");

    var createTextNode = document.createTextNode("hello world");

    createNode.appendChild(createTextNode);

    document.body.appendChild(createNode);

    document.documentElement.appendChild(createNode);

2)插入节点：可以使用appendChild，insertBefore，insertBefore接收两个参数，第一个是插入的节点，第二个是参照节点，如insertBefore(a,b)，则a会插入在b的前面

//插入节点

     var createNode = document.createElement("div");

    var createTextNode = document.createTextNode("hello world");

    createNode.appendChild(createTextNode);

    var div1 = document.getElementById("div1");

    document.body.insertBefore(createNode,div1);

3)替换和删除元素，从replaceChild和removeChild的字面意思看，就是删除子节点，因此调用者，需要包含子节点div1，不然调用会报错。返回的节点是替换的或删除的元素，被替换/删除的元素仍然存在，但document中已经没有他们的位置了。

//替换元素

   var replaceChild = document.body.replaceChild(createNode,div1);
//删除元素

    var removeChild = document.body.removeChild(div1);

4)节点的属性：

firstChild:第一个子节点

lastChild:最后一个子节点

childNodes:子节点集合，获取其中子节点可以someNode.childNodes[index]或者someNode.childNodes.item(index)

nextSibling:下一个兄弟节点

previousSibling：上一个兄弟节点

parentNode：父节点

<ul id="ul"><li>sdsssssss</li><li>qqqq</li><li>wwww</li><li>eeee</li></ul>
    //节点属性

    var ul = document.getElementById("ul");

    var firstChild = ul.firstChild;

    console.log(firstChild.innerHTML);

    var lastChild = ul.lastChild;

    console.log(lastChild.innerHTML);

    var length = ul.childNodes.length;

    console.log(length);

    var secondChild = ul.childNodes.item(1);

    console.log(secondChild.innerHTML);

    var forthChild = ul.childNodes.item(2).nextSibling;

    console.log(forthChild.innerHTML);

    var thridChild = forthChild.previousSibling;

    console.log(thridChild.innerHTML);

    var parentNode = forthChild.parentNode;

    console.log(parentNode.innerHTML);

5) 文档片段，好处在于减少dom的渲染次数，可以优化性能。

//文本片段

    var fragment = document.createDocumentFragment();

    var ul = document.getElementById("ul");

    var li = null;

    for (var i = 4; i >= 0; i--) {

        li = document.createElement("li");

        li.appendChild(document.createTextNode("item "+i));

        fragment.appendChild(li);

    }

    ul.appendChild(fragment);

6）克隆元素

someNode.cloneNode(true):深度克隆，会复制节点及整个子节点

someNode.cloneNode(false):浅克隆，会复制节点，但不复制子节点

//克隆

    var clone = ul.cloneNode(true);

    document.body.appendChild(clone);

注意：

1、childNodes.length存在跨浏览器的问题

可以看到有关列表的html片段没有用

<ul id="ul">

<li>sdsssssss</li>

<li>qqqq</li>

<li>wwww</li>

<li>eeee</li>

</ul>

这种书写格式而是使用没有换行的格式书写，是因为在不同的浏览器中，获取ul.childNodes.length的结果有差异：

在ie中，ul.childNodes.length不会计算li之间的换行空格，从而得到数值为4

在ff、chrome,safari中，会有包含li之间的空白符的5个文本节点，因此ul.childNodes.length为9

若要解决跨浏览器问题，可以将li之间的换行去掉，改成一行书写格式。

2、cloneNode存在跨浏览器的问题

在IE中，通过cloneNode方法复制的元素，会复制事件处理程序，比如，var b = a.cloneNode(true).若a存在click,mouseover等事件监听，则b也会拥有这些事件监听。

在ff,chrome,safari中，通过cloneNode方法复制的元素，只会复制特性，其他一切都不会复制

因此，若要解决跨浏览器问题，在复制前，最好先移除事件处理程序。

原生js操作dom的方法的更多相关文章

  1. 框架操作DOM和原生js操作DOM比较

    问题引出 对于Angular和React操作DOM的速度,和原生js操作DOM的速度进行了一个比较: 一个同学做的demo 代码如下: <!DOCTYPE html> <html n ...

  2. 原生js操作Dom节点:CRUD

    知识点,依然会遗忘.我在思考到底是什么原因.想到研究生考试准备的那段岁月,想到知识体系的建立,知识体系分为正向知识体系和逆向知识体系:正向知识体系可以理解为教科书目录,逆向知识体系可以理解考试真题. ...

  3. 原生js操作DOM基础-笔记

    原文参考http://mp.weixin.qq.com/s?__biz=MzU3MDA0NTMzMA==&mid=2247485490&idx=1&sn=15197b4b53e ...

  4. 原生Js操作DOM

    查找DOM .querySelectorAll(),它接受包含一个CSS选择器的字符串参数,返回一个表示文档中匹配选择器的所有元素的NodeList元素. .querySelector(),返回第一个 ...

  5. 原生js 操作dom

    1.一些常用的方法 obj.getElementById() 返回带有指定 ID 的元素. obj.getElementsByTagName() 返回包含带有指定标签名称的所有元素的节点列表(集合/节 ...

  6. 原生js操作Dom命令总结

    常用的dom方法 document.getElementById(“box”);//通过id获取标签    document.getElementsByTagName(“div”);根据标签名获取页面 ...

  7. 原生js操作dom备忘

    <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8& ...

  8. 原生JS取代一些JQuery方法的简单实现

    原生JS取代一些JQuery方法的简单实现 下面小编就为大家带来一篇原生JS取代一些JQuery方法的简单实现.小编觉得挺不错的,现在就分享给大家,也给大家做个参考.一起跟随小编过来看看吧   1.选 ...

  9. 原生js获取鼠标坐标方法全面讲解-zmq

    原生js获取鼠标坐标方法全面讲解:clientX/Y,pageX/Y,offsetX/Y,layerX/Y,screenX/Y 一.关于js鼠标事件综合各大浏览器能获取到坐标的属性总共以下五种:eve ...

随机推荐

  1. Selenium私房菜系列2 -- XPath的使用【ZZ】

    在编写Selenium案例时,少不免是要用到XPath的,现在外面关于XPath使用的参考资料很多,下面我直接转一篇关于XPath使用的文档.如果对XPath不熟悉请参考下文,你不需要去百度/Goog ...

  2. Struts2控制文件的上传与下载

    Struts2控制文件上传与下载的几个注意事项: (1)必须将表单的method设置为post,将enctype设置为multipart/from-data.只有这样,浏览器才会把用户选择文件的二进制 ...

  3. Win10 系统安装Sql Server2008 R2 数据库遇到的问题及解决办法总结！

    1.开始安装时,提示要先安装 “.NET Framework 3.5(包括.NET 2.0和3.0)”,之前已经下载好.NET Framework 3.5 sp1,安装时还是提示要先安装 “.NET  ...

  4. C# 移动开发(Xamarin.Form) Plugin.BLE 蓝牙连接

    随着Xamarin.Form项目接近尾声,仔细一算才发现过来大半年时间了. 期间除了刚开始有闲情写写,现在总算有空来总结一下了. 来先说 Plugin.BLE (https://github.com/ ...

  5. 移动端超级好用的reset.css（只做参考哦具体以你们实际项目需求为准）

    html { color: #333; /*规定主色调,依据业务场景(非必须)*/ background: #F6F6F6; /*规定主背景,依据业务场景(非必须)*/ overflow-y: aut ...

  6. 洛谷 P2788 数学1（math1）- 加减算式

    题目背景 蒟蒻HansBug在数学考场上,挠了无数次的头,可脑子里还是一片空白. 题目描述 好不容易啊,HansBug终于熬到了做到数学最后一题的时刻了,眼前是一堆杂乱的加减算式.显然成功就在眼前了. ...

  7. .net MVC下跨域Ajax请求(JSONP)

    一.JSONP(JSON with Padding) 客户端: <script type="text/javascript"> function TestJsonp() ...

  8. 为什么我的 app:actionViewClass="android.widget.SearchView"和app:showAsAction="ifRoom|collapseActionView"才有

    http://blog.csdn.net/cdnight/article/details/48029911 <item android:id="@+id/action_search&q ...

  9. QT+信号有参数与无参数的实现+QT4和QT5在信号和槽使用上的区别

    在QT5中,信号有参数和无参数 #ifndef SUBWIDGET_H #define SUBWIDGET_H #include <QWidget> #include <QPushB ...

  10. layui使用小记（持续更新）

    关于Select等Form表单元素,在使用的时候部分特性会失效 如select自带的Search功能: 其实在使用Form表单元素的时候,你如果需要layui自带的一些功能(搜索,验证等),请用< ...