JS DOM(2017.12.28)
一.获得元素节点的方法
document.getElementById() 根据Id获取元素节点
document.getElementsByName() 根据name获取元素节点 遍历出来的是一个数字
document.getElementsByTagName() 根据HTML标签名获取元素节点,注意选择器返回的是一个NodeList对象,能根据索引号选择其中1个,可以遍历输出。
document.getElementsByClassName() 根据class获取元素节点
二、节点关系
(1)作为节点数的文档
1、parentNode 获取该节点的父节点
2、childNodes 获取该节点的子节点数组
3、firstChild 获取该节点的第一个子节点
4、lastChild 获取该节点的最后一个子节点
5、nextSibling 获取该节点的下一个兄弟元素
6、previoursSibling 获取该节点的上一个兄弟元素
7、nodeType 节点的类型,9代表Document节点,1代表Element节点,3代表Text节点,8代表Comment节点,11代表DocumentFragment节点
8、nodeVlue Text节点或Comment节点的文本内容
9、nodeName 元素的标签名(如P,SPAN,#text(文本节点),DIV),以大写形式表示
(2)作为元素树的文档
1、firstElementChild 第一个子元素节点
2、lastElementChild 最后一个子元素节点
3、nextElementSibling 下一个兄弟元素节点
4、previousElementSibling 前一个兄弟元素节点
5、childElementCount 子元素节点个数量
注意,此5个方法文本节点不算进去
三、节点操作:创建,插入,删除节点
1、document.createTextNode() 创建一个文本节点
2、document.createElement() 创建一个元素节点,这个方法只接受一个参数,即要创建元素的标签名。这个标签名在HTML
文档中不区分大小写,在XHTML
中区分大小写。
3、插入节点
appendChild() //将一个节点插入到调用节点的最后面
insertBefore() //接受两个参数,第一个为待插入的节点,第二个指明在哪个节点前面,如果不传入第二个参数,则跟appendChild一样,放在最后。
insertAfter() //可以自己创建一个在指定节点后面插入节点的函数,代码如下:
function insertAfter(newElement,targetElement){
var parent = targetElement.parentNode;
if(parentNode.lastChild == targetElement){
parent.appendChild(newElement);
}
else{parent.insertBefore(newElement,targetElement.nextSibling)
}
}
4、删除和替换节点。
1、removeChild(); 由父元素调用,删除一个子节点。注意是直接父元素调用,删除直接子元素才有效,删除孙子元素就没有效果了。该方法移除节点,接受一个参数,即要移除的节点,同时该方法返回被移除的节点。只能是一个节点,不能是一组节点。
2、replaceChild() //删除一个子节点,并用一个新节点代替它,第一个参数为新建的节点,第二个节点为被替换的节点
5、document.write()可以方便快捷的把字符串插入到文档中。
四、属性操作
1.
setAttribute()
添加一个新属性(attribute
)到元素上,或改变元素上已经存在的属性的值。注意:在IE7
下,修改了元素的class
,如果已有class
,则会出现两个class
,通过setAttribute()
添加的不生效;如果没有class
,则添加上class
,但这个添加上去的class
的样式不会生效。
2.
removeAttribute()
该方法用于移除元素的属性。
3.
getAttribute()
该方法返回元素上指定属性(attribute
)的值。如果指定的属性不存在,则返回 null
或 ""
(空字符串)(IE5+
都返回null
)。注意:IE7
下不能正确返回class
,返回的是null
,其他正常。
4.
hasAttribute()
hasAttribute()
返回一个布尔值,指示该元素是否包含有指定的属性(attribute
)。注意:IE7
不支持该方法。
5.
自定义属性
data-*
html5
里有一个data-*
去设置获取元素的自定义属性值。
<div id="div1" data-aa="11">
利用div1.dataset
可以获得一个DOMStringMap
,包含了元素的所有data-*
。
使用div1.dataset.aa
就可以获取11
的值。
同样,通过设置div1.dataset.bb = "22"
就可以设置一个自定义属性值。
在不兼容的浏览器里,就使用getAttribute
和setAttribute
五、事件
四、共享onload事件
function addLoadevent(func) {
var oldonload = window.onload;
if(typeof window.onload !=' function'){
window.onload = func;
}else{
window.onload = function(){
func;
oldonload;
}
}
}
addEventListener()
addEventListener()
将指定的事件监听器注册到目标对象上,当目标对象触发制定的事件时,指定的回调函数就会触发。目标对象可以是 文档上的元素、 document、 window
或者XMLHttpRequest
(比如onreadystatechange
事件)。
IE8
及以下不支持此方法且只有事件冒泡没有事件捕获。IE9
开始支持此方法,也就有了事件捕获。
var div1 = document.getElementById("div1");
div1.addEventListener("click", listener, false);
function listener() {
console.log('test');
}
var cloneHtml = div1.cloneNode(true);
document.body.appendChild(cloneHtml);
第一个参数是事件名,第二个是回调函数,第三个参数为true
表示捕获,false
表示冒泡。
var div1 = document.getElementById("div1");
div1.addEventListener("click", listener1, true/fasle);
function listener1() {
console.log('test1');
}
var div2 = document.getElementById("div2");
div2.addEventListener("click", listener2, true/fasle);
function listener2() {
console.log('test2');
}
有一点要注意的是,当对某一个元素1
既绑定了捕获事件,又绑定了冒泡事件时:
当这个元素1
并不是触发事件的那个元素2
时,则触发顺序会按照先 捕获 后 冒泡 的顺序触发;
当这个元素1
就是最底层的触发事件的元素时,则这个元素没有捕获和冒泡的区别,谁先绑定就先触发谁。
var div2 = document.getElementById("div2");
div2.addEventListener("click", listener2, true);
function listener2() {
console.log('test2');
}
div2.addEventListener("click", listener1, false);
function listener1() {
console.log('test1');
}
// 按绑定顺序执行,两个`addEventLister()`颠倒过来则执行顺序也变化
// 如果再对`div1`绑定一个捕获、一个冒泡,则会先触发捕获 再 触发冒泡,与绑定顺序无关
removeEventListener()
与addEventListener()
绑定事件对应的就是移除已绑定的事件。第三个参数的布尔值代表解绑的是捕获事件还是冒泡事件。两个事件互不相关。
var div2 = document.getElementById("div2");
div2.addEventListener("click", listener2, true);
function listener2() {
console.log('test2');
}
div2.removeEventListener("click", listener2, true);
注意:只能通过removeEventListener()
解绑有名字的函数,对于绑定的匿名函数无法解除绑定。
div2.addEventListener("click", function(){
console.log('test');
console.log(this);
}, true);
div2.removeEventListener("click", function() {
console.log("test");
}, true);
div2.onclick = null;
// 点击div2依然打印出test
注意:这里this
指向触发事件的元素自身。
attachEvent()、detachEvent()
IE8
及以下使用这两个方法绑定和解绑事件,当然,IE9+
也支持这个事件。但这个方法绑定的事件默认为冒泡也只有冒泡。
// 这里需要在事件前加 on
div2.attachEvent("onclick", listener1);
function listener1() {
console.log('test');
console.log(this);
}
div2.detachEvent("onclick", listener1);
和addEventListener()
一样,也不能解绑匿名函数。
注意:这里this
指向 window
。
阻止默认事件和冒泡
标准事件和IE
事件中的阻止默认事件和冒泡事件也有很大区别。
var div2 = document.getElementById("div2");
if (div2.addEventListener) {
div2.addEventListener("click", function(e) {
e.preventDefault(); // 阻止默认事件
e.stopPropagation(); // 阻止冒泡
console.log(e.target.innerHTML);
}, false);
} else {
div2.attachEvent("onclick", function() {
var e = window.event;
e.returnValue = false; // 阻止默认事件
e.cancelBubble = true; // 阻止冒泡
console.log(e.srcElement.innerHTML);
});
}
IE8
及以下的event
是绑定在window
上的。(我的IE11
里,仿真到IE7
、IE8
也可以取到标准事件里的 e
对象,估计是升级到IE11
的原因)。
自定义事件:
createEvent()
createEvent()
用于创建一个新的 event
,而后这个 event
必须调用它的 init()
方法进行初始化。最后就可以在目标元素上使用dispatchEvent()
调用新创建的event
事件了。
createEvent()
的参数一般有:UIEvents、MouseEvents、MutationEvents、HTMLEvents、Event(s)
等等,分别有对应的init()
方法。HTMLEvents、Event(s)
对应的都是initEvent()
方法。
initEvent(type, bubbles, cancelable)
type
表示自定义的事件类型,bubbles
表示是否冒泡,cancelable
表示是否阻止默认事件。
target.dispatchEvent(ev)
target
就是要触发自定义事件的DOM
元素
var div1 = document.getElementById("div1");
div1.addEventListener("message", function(){
console.log('test');
}, false);
var div2 = document.getElementById("div2");
div2.addEventListener("message", function(e){
console.log(this);
console.log(e);
}, false);
var ev = document.createEvent("Event");
ev.initEvent("message", false, true); // 起泡参数变为true,div1的事件就会触发
div2.dispatchEvent(ev);
六.获取元素相关计算后的值
getComputedStyle()、currentStyle()
当我们想获取元素计算后实际呈现在页面上的各个值,就用这两个方法。IE8
及以下用currentStyle()
,IE9+
及其他标准浏览器用getComputedStyle()
。
var div2 = document.getElementById("div2");
var result = "";
if (window.getComputedStyle) {
result = (window || document.defaultView).getComputedStyle(div2, null)['cssFloat'];
} else {
result = div2.currentStyle["styleFloat"];
}
console.log(result);
// document.defaultView返回document对象所关联的window
这两个方法在不同的浏览器里差距也很大。
比如float
属性:getComputedStyle
: IE9
以上需要用cssFloat
,其他标准的用float
currentStyle
: IE8
及以下可用styleFloat
或者float
。
比如height
属性:
假如未设置height
值,标准浏览器里能计算出高度值,而currentStyle
计算出来是auto
。
上面的例子getComputedStyle
是用键值去访问的,也可用getPropertyValue()
去访问。(IE8
、IE7
不支持)
result = (window || document.defaultView).getComputedStyle(div2, null).getPropertyValue("float");
getBoundingClientRect()、getClientRects()
getBoundingClientRect
()该方法获得页面中某个元素的上、右、下、左分别相对浏览器视窗的位置。getBoundingClientRect
是DOM
元素到浏览器可视范围的距离(到浏览器顶部而不是文档顶部)。该函数返回一个Object
对象,该对象有6
个属性:top,lef,right,bottom,width,height
;这里的top、left
和css
中的理解很相似,width、height
是元素自身的宽高,但是right
,bottom
和css
中的理解有点不一样。right
是指元素右边界距窗口最左边的距离,bottom
是指元素下边界距窗口最上面的距离。
getClientRects()
是返回一个ClientRectList
集合。
var div1 = document.getElementById("div1");
var rects1 = div1.getClientRects();
var rects2 = div1.getBoundingClientRect();
console.log(rects1[0].top);
console.log(rects2.top);
JS DOM(2017.12.28)的更多相关文章
- 2017.12.21-JQuery
作业:密码加强验证 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> & ...
- JS DOM 来控制HTML元素
JS DOM 来控制HTML元素 (ps:这个有很多方法,挑一些详解,嘻嘻) 1.getElementsByName():获取name. ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ...
- js去除空格12种方法
注:本文非本人原著:原文作者: 黄卉 <js去除空格12种方法> //JS去除空格的方法目前共有12种: //实现1 String.prototype.trim = function() ...
- 货架工程项目之js dom实现项目工程进度图
笔者最近要负责有个项目工程网站的安装进度过程,实现的效果要求大概如下图所示 由于笔者没有参与到数据库的制作,得知他们这个项目设计工序的时候就一个开始日期的和完成日期,连整个项目的安装结束时间都没有简直 ...
- js DOM优化相关探索
我在这尝试两个方面:-->DOM与js -->DOM与浏览器 (最近在秒味视频上学到不少,哈哈哈) 一.DOM与js 1.js与dom的交互问题 频繁的与dom交互,是一件浪费时间与金钱的 ...
- js 日期2015/12/22/16/45替换2015-12-22 16:45格式
js 日期2015/12/22/16/45替换2015-12-22 16:45格式 利用正则分组: function toChange(date) { var reg = /(\d+)\/(\d+)\ ...
- js DOM的几个常用方法
<div id="div1">这是个测试</div> <p </p> <p </p> //js DOM的几个常用方法 / ...
- JS Dom节点操作demo!
通过黑马课程的学习,在这里分享一个js Dom中节点操作的小练习 需求:使用js创建一个4*3的表格table. onload = function(){ function c(tagName){ r ...
- 团队作业4——第一次项目冲刺(Alpha版本)2017.4.28
2017.04.28 天气晴朗 东风3级. 时间:上午 9:35 ---10:10分 地点:陆大二楼 会议内容:实验室报修系统项目冲刺Alpha版的的最后一天,大家对现在项目的进程进行了讨论,阐述了各 ...
随机推荐
- 部署zabbix,自动发现lnmp环境,监控主机状态,实现 邮件及微信报警(配置server端)
二.配置server端监控 1.监控apache 首先在本机下载模板:https://github.com/rdvn/zabbix-templates/archive/master.zip 该 zi ...
- e+\e-
aE-0b aE+0b 分别是 a*10的负b次方 和a*10的b次方 不能省略 + - 号和十位
- [POJ1014]Dividing(二进制优化多重背包)
#include <cstdio> #include <algorithm> #include <cstring> using namespace std; int ...
- 利用主成分分析(PCA)简化数据
一.PCA基础 线性映射(或线性变换),简单的来说就是将高维空间数据投影到低维空间上,那么在数据分析上,我们是将数据的主成分(包含信息量大的维度)保留下来,忽略掉对数据描述不重要的成分.即将主成分维度 ...
- 日志工具——slf4j
一.概述 简单日记门面(simple logging Facade for java)SLF4J是为各种loging APIs提供一个简单统一的接口,从而使得最终用户能够在部署的时候配置自己希望的lo ...
- Hough变换-理解篇
Hough变换-理解篇 霍夫变换(Hough Transform)是图像处理中的一种特征提取技术,它通过一种投票算法检测具有特定形状的物体.该过程在一个参数空间中通过计算累计结果的局部最大值得到一个符 ...
- 怎么判断ThreadPool线程池里的任务都执行完毕
在下面 链接中做方便的应该是第三种方法(他也推荐了),但是第三种方法有个小问题,就是 : WaitHandle.WaitAll(_ManualEvents); 中的_ManualEvents最大为64 ...
- Git学习系列 (二)
#克隆目录并重命名为newname,默认目录名是使用.git前的grit git clone git://github.com/schacon/grit.git newname #将所有已经跟踪过的文 ...
- yarn 原理
产生背景 直接源于MRv1在几个方面的缺陷 扩展性受限(NameNode,JobTracker设计为单一节点,内存容量有限) 单点故障 难以支持MR之外的计算 slot数目无法动态修改,Map slo ...
- Appium Inspector定位元素与录制简单脚本
本次以微信为例, 使用Appium自带的Inspector定位工具定位元素, 以及进行最最最简单脚本的录制: capabilities = { "platformName": &q ...