走进javascript——被忽视的DOM方法和属性
isEqualNode()
isEqualNode方法可以用来判断两个DOM节点是否相同,给我的第一感觉是没用,因为两个DOM的比较很容易让人想成是字符串的比较,心想直接用两个等号不就可以了吗,但马上感觉不对,因为DOM是对象!两个不同的对象是不可能相等的,比如这段
var obj = {};
var obj2 = {};
console.log(obj==obj2);//false
可以看到两个对象是不等的,就算是长得一模一样,那么DOM是不是对象呢?我们打印一下
<div id="div1">11111</div>
<div id="div2">22222</div>
<script>
var div1 = document.getElementById("div1");
console.log(typeof div1); //object
</script>
也就是说DOM确实是对象,因此是不能直接比较两个DOM是否相同的,下面用isEqualNode函数来比较一下
<div>11111</div>
<div>11111</div>
<script>
var divs = document.getElementsByTagName("div");
console.log(divs[0].isEqualNode(divs[1])); //true
</script>
这个函数和一般的比较还有所不同,它比较智能,元素的属性顺序可以不同,如下
<div data-a="a" data-b="b">11111</div>
<div data-b="b" data-a="a">11111</div>
<script>
var divs = document.getElementsByTagName("div");
console.log(divs[0].isEqualNode(divs[1])); //true
</script>
尽管元素的属性位置不一样,但isEqualNode函数依然返回true
要说这个isEqualNode没用呢,还真有用的地方,我们知道DOM渲染是比较消耗性能的,如果我们用这个属性事先判断一下这两个DOM是否相同,如果相同就不更新DOM,代码如下
<input type="text" id="text">
<div>111</div>
<script>
var oDiv = document.getElementsByTagName("div");
var text = document.getElementById("text");
text.addEventListener("blur",function(){
var div = document.createElement("div");
div.innerHTML = this.value;
if(!(oDiv[0].isEqualNode(div))){
document.body.appendChild(div);
}
},false);
</script>
React中的虚拟DOM,就可以用这个函数来判断,通过这个函数,我们可以做到只更新需要更新的DOM,而不必去把所有的DOM都给更新。
matches()
matches方法可以用来判断当前元素是否能被指定的css选择器查找到,也就是我们写的css选择器是否能够找到当前这个元素,举个例子
<div id="box">
<p>
<em></em>
</p>
</div>
<script>
var em = document.querySelector("em");
console.log(em.matches("#box p > em")); //true;
console.log(em.matches("#box div em")); //false;
</script>
在事件委托中,我们经常需要去过滤某些元素,而这时这个方法就可以派上用场,比如下面这个例子
<div id="box">
<div class="left">left</div>
<div class="right">right</div>
</div>
<script>
var box = document.querySelector("#box");
box.addEventListener("click",function(event){
if(event.target.matches("#box .left")){
console.log(event.target);
}
});
</script>
虽然通过判断标签名,class等等也可以实现同样的效果,但有了这个方法,实现起来就简单的多了,如果你觉得这个例子不感冒,那么下面这段代码,你应该用过吧?
$(document).on("click","#box a",function(){
});
其中第二个参数就是用来过滤元素的,如果要实现这个方法,我们就可以用matches。
normalize()
normalize() 方法移除空的文本节点,并连接相邻的文本节点。
这个方法将遍历当前节点的所有子孙节点,通过删除空的 Text 节点,已经合并所有相邻的 Text 节点来规范化文档。该方法在进行节点的插入或删除操作后,对于简化文档树的结构很有用。
lastModified
document.lastModified可以返回文档最后修改的日期,不过你很快会发现它并不准,因为对于动态网站来说,这个属性返回的是当前时间,也正是因为这个原因,我们可以用它来判断一个页面是静态的还是动态的,以下是在本地页面测试的结果
而如果是一个动态的网站,则会出现下面这种情况
因此我们可以用这个属性来判断一个网站是静态的还是动态的,但这个属性获取到的值也并不是特别准确,如果要求不是特别高的话,可以用这个方法试试。
scrollIntoView()
Element.scrollIntoView()方法让当前的元素滚动到浏览器窗口的可视区域内,使用请看MDN上的教程
https://developer.mozilla.org/zh-CN/docs/Web/API/Element/scrollIntoView
走进javascript——被忽视的DOM方法和属性的更多相关文章
- javascript中数组常用的方法和属性
前言 在javascript中,数组是一种非常重要的数据类型,我们时常会和它打交道,最近在开发项目中频繁的使用到数组,但是自己对数组的众多方法已经是非常模糊了,为了方便自己以后能够更好的使用数组中的属 ...
- JavaScript面向对象:类、方法、属性
JavaScript是一种基于对象的语言,与传统面向对象语言(C#.C++)相比,JavaScript中没有类的概念,其继承有两种基本形式:基于对象的继承和基于类型的继承(原型链继承).无论哪种形式的 ...
- javascript学习 真正理解DOM脚本编程技术背后的思路和原则
本文学习来源于<javascriptDOM编程艺术>仅作笔记 学会怎样才能利用DOM脚本编程技术以一种既方便自己更体贴用户的方式去充实和完善你们的网页. 循序渐进:从最核心的内容开始,逐步 ...
- 走进javascript——DOM事件
DOM事件模型 在0级DOM事件模型中,它只是简单的执行你为它绑定的事件,比如你为某个元素添加了一个onclick事件,当事件触发时,它只是去调用我们绑定的那个方法,不再做其他的操作. 在2级DOM事 ...
- javascript插入before(),after()新DOM方法
随着web的技术突飞猛进的发展.HTML5 ES6等新技术的发展,与此同时DOM等标准也在悄悄的进步,各大浏览器也在悄悄的发展适配新的属性和方法,今天我们来看看Javascript新的DOM的方法 二 ...
- JavaScript之旅(DOM)
JavaScript之旅(DOM) [TOC] 一.认识DOM 什么是 DOM? DOM 是 Document Object Model(文档对象模型)的缩写. DOM 是 W3C(万维网联盟)的标准 ...
- DOM – (w3school)1.DOM 方法 + 2.DOM属性 + 3.DOM 元素
1.DOM 方法 一些 DOM 对象方法 这里提供一些您将在本教程中学到的常用方法: 方法 描述 getElementById() 返回带有指定 ID 的元素. getElementsByTa ...
- Jquery中$(document).ready()与传统JavaScript中的window.onload方法的区别(2016/8/3)
Jquery中$(document).ready()的作用类似于传统JavaScript中的window.onload方法,不过与window.onload方法还是有区别的. 1.执行时间 ...
- JavaScript中事件绑定的方法总结
最近收集了一些关于JavaScript绑定事件的方法,汇总了一下,不全面,但是,希望便于以后自己查看. JavaScript中绑定事件的方法主要有三种: 1 在DOM元素中直接绑定 2 JavaScr ...
随机推荐
- 关于windows10的使用
关于windows10的使用 个人习惯设置 打开我的电脑之后,不是定位到此电脑,而是定位到快速访问. [解决办法] 用win + 箭头 快捷键将窗口靠边之后,另一边出现多个窗口 [解决办法] win ...
- python使用数据库的一些操作
学py感觉还是用linux操作系统比较好,下载安装mysql很简单,linux里面都有自带的,但是要用python去用mysql我们就得安装一下他的模块,因为python里面没有自带他的模块,用yum ...
- Alpha冲刺 - (10/10)
Part.1 开篇 队名:彳艮彳亍团队 组长博客:戳我进入 作业博客:班级博客本次作业的链接 Part.2 成员汇报 组员1(组长)柯奇豪 过去两天完成了哪些任务 本人负责的模块(共享编辑)的前端代码 ...
- HDU 3078 LCA转RMQ
题意: n个点 m个询问 下面n个数字表示点权值 n-1行给定一棵树 m个询问 k u v k为0时把u点权值改为v 或者问 u-v的路径上 第k大的数 思路: LCA转RMQ求出 LCA(u,v) ...
- 分形之谢尔宾斯基(Sierpinski)四面体
前面讲了谢尔宾斯基三角形,这一节的将对二维三角形扩展到三维,变成四面体.即将一个正四面体不停地拆分,每个正四面体可以拆分成四个小号的正四面体.由二维转变到三维实现起来麻烦了许多.三维的谢尔宾斯基四面体 ...
- 程序bug导致了天大的损失,要枪毙程序猿吗?[ZZ]
来自猫扑:程序bug导致了天大的损失,要枪毙程序猿吗? 0 引言 年会上Review 源代码算什么? 法庭上 Review code 才带劲..... 2015年9月3日,随着东京最高法院驳回瑞穗证券 ...
- PICT用户手册 [转]
PICT 3.3 User's Guide Jacek Czerwonka, Test Lead, Microsoft Corporation Overview Using PICT to Combi ...
- 背水一战 Windows 10 (51) - 控件(集合类): ItemsControl - 项模板选择器, 数据分组
[源码下载] 背水一战 Windows 10 (51) - 控件(集合类): ItemsControl - 项模板选择器, 数据分组 作者:webabcd 介绍背水一战 Windows 10 之 控件 ...
- ionic3.x angular4.x ng4.x 自定义组件component双向绑定之自定义计数器
本文主要示例在ionic3.x环境下实现一个自定义计数器,实现后最终效果如图: 1.使用命令创建一个component ionic g component CounterInput 类似的命令还有: ...
- 转---写一个网页进度loading
作者:jack_lo www.jianshu.com/p/4c93f5bd9861 如有好文章投稿,请点击 → 这里了解详情 loading随处可见,比如一个app经常会有下拉刷新,上拉加载的功能,在 ...