原生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 ...
随机推荐
- centos7环境搭建Eureka-Server注册中心集群
目的:测试和线上使用这套独立的Eureka-Server注册中心集群,目前3台虚拟机集群,后续可直接修改配置文件进行新增或减少集群机器. 系统环境: Centos7x64 java8+(JDK1.8+ ...
- Zotero文献管理神器使用
为什么使用Zotero管理论文? 1.可以从网上剪藏 2.可以查询 3.有作者 标题 期刊 索引 4.word自动生成论文索引 把pdf文件导入Zotero 按住ctrl+shift拖动pdf文件,就 ...
- Python基础2 列表 元祖 字符串 字典 集合 文件操作 -DAY2
本节内容 列表.元组操作 字符串操作 字典操作 集合操作 文件操作 字符编码与转码 1. 列表.元组操作 列表是我们最以后最常用的数据类型之一,通过列表可以对数据实现最方便的存储.修改等操作 定义列表 ...
- Redux 和 mobx的区别
Redux: Redux将数据保存在单一store中,Mobx将数据保存在分散的多个store中 Redux需要手动处理变化后的操作,Mobx使用observable保存数据,数据变化后自动处理响应的 ...
- C++虚析构函数的使用
如果,你设计的程序里,释放对象实例的时候,有“使用某个基类的指针,来释放它指向的派生类的实例”这种用法出现的话,那么,这个基类的destructor就应该设计成virtual的. 如果,基类不是vir ...
- Perl 安装 JSON 包
$tar xvfz JSON.tar.gz $cd JSON $perl Makefile.PL $make $make install
- Spring上传报错413
SpringMVC上传文件报错413 笔者今天工作时,运维的同事反馈我们上线不久的项目上传文件过大时,总是提示上传失败. 场景重现一下,发现报错信息显示413:Request entity too l ...
- ZooKeeper运行原理和基本编程接口
什么是ZooKeeper ZooKeeper作为一个分布式的服务框架(与Google Chubby类似),主要用于解决分布式集群中应用系统的一致性问题,它能提供基于类似于文件系统的目录节点树方式的数 ...
- MYSQL数据库攻防与加固
这是“官方”原本的模样搬过来的..写的很粗略啊.还有篇详细的请查看:MySQL安全加固题目及答案参考解析 启动xserver-mysql,进入xserver-mysql,开始实验,实验步骤如下: 1. ...
- Cisco路由器交换机基础配置
交换机配置 交换机基本状态: switch: # ROM状态, 路由器是rommon> hostname> # 用户模式 hostname# # 特权模式 hostname(config) ...