原生js操作dom的方法
今天学习了原生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的方法的更多相关文章
- 框架操作DOM和原生js操作DOM比较
问题引出 对于Angular和React操作DOM的速度,和原生js操作DOM的速度进行了一个比较: 一个同学做的demo 代码如下: <!DOCTYPE html> <html n ...
- 原生js操作Dom节点:CRUD
知识点,依然会遗忘.我在思考到底是什么原因.想到研究生考试准备的那段岁月,想到知识体系的建立,知识体系分为正向知识体系和逆向知识体系:正向知识体系可以理解为教科书目录,逆向知识体系可以理解考试真题. ...
- 原生js操作DOM基础-笔记
原文参考http://mp.weixin.qq.com/s?__biz=MzU3MDA0NTMzMA==&mid=2247485490&idx=1&sn=15197b4b53e ...
- 原生Js操作DOM
查找DOM .querySelectorAll(),它接受包含一个CSS选择器的字符串参数,返回一个表示文档中匹配选择器的所有元素的NodeList元素. .querySelector(),返回第一个 ...
- 原生js 操作dom
1.一些常用的方法 obj.getElementById() 返回带有指定 ID 的元素. obj.getElementsByTagName() 返回包含带有指定标签名称的所有元素的节点列表(集合/节 ...
- 原生js操作Dom命令总结
常用的dom方法 document.getElementById(“box”);//通过id获取标签 document.getElementsByTagName(“div”);根据标签名获取页面 ...
- 原生js操作dom备忘
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8& ...
- 原生JS取代一些JQuery方法的简单实现
原生JS取代一些JQuery方法的简单实现 下面小编就为大家带来一篇原生JS取代一些JQuery方法的简单实现.小编觉得挺不错的,现在就分享给大家,也给大家做个参考.一起跟随小编过来看看吧 1.选 ...
- 原生js获取鼠标坐标方法全面讲解-zmq
原生js获取鼠标坐标方法全面讲解:clientX/Y,pageX/Y,offsetX/Y,layerX/Y,screenX/Y 一.关于js鼠标事件综合各大浏览器能获取到坐标的属性总共以下五种:eve ...
随机推荐
- PHP CLI应用的调试原理
我们在Eclipse里选中一个PHP文件,右键选择Debug As->PHP CLI Application. 所谓CLI应用,是指这种脚本文件不需要任何Web服务器即可运行,当然, PHP运行 ...
- sqlit3事务
事务定义了一组SQL命令的边界,这组命令或者作为一个整体被全部执行,或者都不执行.事务的典型实例是转帐. 事务的范围 事务由3个命令控制:BEGIN.COMMIT和ROLLBACK.BEGIN开始一个 ...
- 多线程中 CountDownLatch CyclicBarrier Semaphore的使用
CountDownLatch 调用await()方法的线程会被挂起,它会等待直到count值为0才继续执行.也可以传入时间,表示时间到之后,count还没有为0的时候,就会继续执行. package ...
- Native.js示例汇总
Native.js虽然强大和开放,但很多web开发者因为不熟悉原生API而难以独立完成.这篇帖子的目的就是汇总各种写好的NJS代码,方便web开发者.众人拾柴火焰高,有能力的开发者多多提交NJS代码, ...
- VW结合rem进行移动端布局
---恢复内容开始--- html { font-size:10vw: } div { width: 1rem; height: 1rem; } VW这个单位适合用来适应不同设备的 一个设备的宽度就为 ...
- OI Journal
佛系更新,哪天想起来就写点. 10.11 班主任硬灌的鸡汤真香 qtmd,简直就是硬扯,说怎么怎么着说不定就能多拿一分两分,一分两分就能割掉好多人 ......螺旋懵圈状,我表示硬憋着不笑 HIAHI ...
- AT2663 Namori Grundy
题目描述: luogu 题解: 好多细节,比如说每个点有且仅有一条入边. 所以说这个图一定是一个基环外向树. 考虑只是一个环的情况,我们可以发现,当环长为偶数时我们可以$01$交替染色,但环长为奇数时 ...
- 360 Atlas中间件安装及使用
1.下载Atlas wget https://github.com/Qihoo360/Atlas/releases/download/2.2.1/Atlas-2.2.1.el6.x86_64.rpm ...
- qt 窗体间通信
利用qt的信号和槽,可以完成窗体间的通信,下面列出父子窗口利用信号和槽的相关代码. parent窗口: //parent.h #ifndef PARENT_H #define PARENT_H #in ...
- 让自己习惯C++
条款1.C++是一个语言联邦 过程形式(procedural) 面向对象形式(object-oriented) 函数形式(function) 泛型形式(generic) 元编程形式(metaprogr ...