javascript高级程序设计---Element对象
Element对象对应网页的HTML标签元素。每一个HTML标签元素,在DOM树上都会转化成一个Element节点对象(以下简称元素节点)。元素节点的nodeType属性都是1,但是不同HTML标签生成的元素节点是不一样的。JavaScript内部使用不同的构造函数,生成不同的Element节点,比如a标签的节点对象由HTMLAnchorElement()构造函数生成,button标签的节点对象由HTMLButtonElement()构造函数生成。因此,元素节点不是一种对象,而是一组对象。
属性
attributes属性返回一个类似数组的对象,成员是当前元素节点的所有属性节点,每个数字索引对应一个属性节点(Attribute)对象。返回值中,所有成员都是动态的,即属性的变化会实时反映在结果集。
- <p id="para">Hello World</p>
- var para = document.getElementById('para');
- var attr = para.attributes[0];
- attr.name // id
- attr.value // para
属性节点的name属性和value属性,等同于nodeName属性和nodeValue属性。
- var para = document.getElementsByTagName("p")[0];
- if (para.hasAttributes()) {
- var attrs = para.attributes;
- var output = "";
- for(var i = attrs.length - 1; i >= 0; i--) {
- output += attrs[i].name + "->" + attrs[i].value;
- }
- result.value = output;
- } else {
- result.value = "No attributes to show";
- }
id属性返回指定元素的id标识。该属性可读写。
tagName属性返回指定元素的大写的标签名,与nodeName属性的值相等。
innerHTML属性返回该元素包含的HTML代码。该属性可读写,常用来设置某个节点的内容。
如果将该属性设为空,等于删除所有它包含的所有节点。
- el.innerHTML = '';
outerHTML属性返回一个字符串,内容为指定元素的所有HTML代码,包括它自身和包含的所有子元素。
- // 假定HTML代码如下
- // <div id="d"><p>Hello</p></div>
- d = document.getElementById("d");
- dump(d.outerHTML);
- // '<div id="d"><p>Hello</p></div>'
以下属性与元素节点的子元素相关。
children属性返回一个类似数组的动态对象(实时反映变化),包括当前元素节点的所有子元素。如果当前元素没有子元素,则返回的对象包含零个成员。
childElementCount属性返回当前元素节点包含的子元素节点的个数。
firstElementChild属性返回第一个子元素,如果没有,则返回null。
lastElementChild属性返回最后一个子元素,如果没有,则返回null。
以下属性与元素节点的同级元素相关。
nextElementSibling属性返回指定元素的后一个同级元素,如果没有则返回null。
- // 假定HTML代码如下
- // <div id="div-01">Here is div-01</div>
- // <div id="div-02">Here is div-02</div>
- var el = document.getElementById('div-01');
- el.nextElementSibling
- // <div id="div-02">Here is div-02</div>
previousElementSibling属性返回指定元素的前一个同级元素,如果没有则返回null。
className属性用来读取和设置当前元素的class属性。它的值是一个字符串,每个class之间用空格分割。
classList属性则返回一个类似数组的对象,当前元素节点的每个class就是这个对象的一个成员。
- <div class="one two three" id="myDiv"></div>
- document.getElementById('myDiv').className
- // "one two three"
- document.getElementById('myDiv').classList
- // {
- // 0: "one"
- // 1: "two"
- // 2: "three"
- // length: 3
- // }
className属性返回一个空格分隔的字符串,而classList属性指向一个类似数组的对象,该对象的length属性(只读)返回当前元素的class数量。
classList对象有下列方法。
- add():增加一个class。
- remove():移除一个class。
- contains():检查当前元素是否包含某个class。
- toggle():将某个class移入或移出当前元素。
- item():返回指定索引位置的class。
- toString():将class的列表转为字符串。
- myDiv.classList.add('myCssClass');
- myDiv.classList.add('foo', 'bar');
- myDiv.classList.remove('myCssClass');
- myDiv.classList.toggle('myCssClass'); // 如果myCssClass不存在就加入,否则移除
- myDiv.classList.contains('myCssClass'); // 返回 true 或者 false
- myDiv.classList.item(0); // 返回第一个Class
- myDiv.classList.toString();
className和classList在添加和删除某个类时的写法。
- // 添加class
- document.getElementById('foo').className += 'bold';
- document.getElementById('foo').classList.add('bold');
- // 删除class
- document.getElementById('foo').classList.remove('bold');
- document.getElementById('foo').className =
- document.getElementById('foo').className.replace(/^bold$/, '');
以下属性与元素节点的可见区域的坐标相关。
clientHeight属性返回元素节点的可见高度,包括padding、但不包括水平滚动条、边框和margin的高度,单位为像素。该属性可以计算得到,等于元素的CSS高度,加上CSS的padding高度,减去水平滚动条的高度(如果存在水平滚动条)。
如果一个元素是可以滚动的,则clientHeight只计算它的可见部分的高度。
clientLeft属性等于元素节点左边框(border)的宽度,单位为像素,包括垂直滚动条的宽度,不包括左侧的margin和padding。但是,除非排版方向是从右到左,且发生元素宽度溢出,否则是不可能存在左侧滚动条。如果该元素的显示设为display: inline
,clientLeft一律为0,不管是否存在左边框。
clientTop属性等于网页元素顶部边框的宽度,不包括顶部的margin和padding。
clientWidth属性等于网页元素的可见宽度,即包括padding、但不包括垂直滚动条(如果有的话)、边框和margin的宽度,单位为像素。
如果一个元素是可以滚动的,则clientWidth只计算它的可见部分的宽度。
以下属性与元素节点占据的总区域的坐标相关。
scrollHeight属性返回指定元素的总高度,包括由于溢出而无法展示在网页的不可见部分。如果一个元素是可以滚动的,则scrollHeight包括整个元素的高度,不管是否存在垂直滚动条。scrollHeight属性包括padding,但不包括border和margin。该属性为只读属性。
如果不存在垂直滚动条,scrollHeight属性与clientHeight属性是相等的。如果存在滚动条,scrollHeight属性总是大于clientHeight属性。当滚动条滚动到内容底部时,下面的表达式为true。
- element.scrollHeight - element.scrollTop === element.clientHeight
如果滚动条没有滚动到内容底部,上面的表达式为false。这个特性结合onscroll
事件,可以判断用户是否滚动到了指定元素的底部,
- var rules = document.getElementById("rules");
- rules.onscroll = checking;
- function checking(){
- if (this.scrollHeight - this.scrollTop === this.clientHeight) {
- console.log('谢谢阅读');
- } else {
- console.log('您还未读完');
- }
- }
scrollWidth属性返回元素的总宽度,包括由于溢出容器而无法显示在网页上的那部分宽度,不管是否存在水平滚动条。该属性是只读属性。
scrollLeft属性设置或返回水平滚动条向右侧滚动的像素数量。它的值等于元素的最左边与其可见的最左侧之间的距离。对于那些没有滚动条或不需要滚动的元素,该属性等于0。该属性是可读写属性,设置该属性的值,会导致浏览器将指定元素自动滚动到相应的位置。
scrollTop属性设置或返回垂直滚动条向下滚动的像素数量。它的值等于元素的顶部与其可见的最高位置之间的距离。对于那些没有滚动条或不需要滚动的元素,该属性等于0。该属性是可读写属性,设置该属性的值,会导致浏览器将指定元素自动滚动到相应位置。
- document.querySelector('div').scrollTop = 150;
以下方法与元素节点的属性相关
hasAttribute方法返回一个布尔值,表示当前元素节点是否包含指定的HTML属性。
- var d = document.getElementById("div1");
- if (d.hasAttribute("align")) {
- d.setAttribute("align", "center");
- }
getAttribute方法返回当前元素节点的指定属性。如果指定属性不存在,则返回null。
- var div = document.getElementById("div1");
- div.getAttribute("align") // "left"
removeAttribute方法用于从当前元素节点移除属性。
- // 原来的HTML代码
- // <div id="div1" align="left" width="200px">
- document.getElementById("div1").removeAttribute("align");
- // 现在的HTML代码
- // <div id="div1" width="200px">
setAttribute方法用于为当前元素节点新增属性,或编辑已存在的属性。
- var d = document.getElementById("d1");
- d.setAttribute("align", "center");
以下方法与获取当前元素节点的子元素相关。
querySelector方法接受CSS选择器作为参数,返回父元素的第一个匹配的子元素。
- var content = document.getElementById('content');
- var el = content.querySelector('p');
querySelectorAll方法接受CSS选择器作为参数,返回一个NodeList对象,包含所有匹配的子元素。
- var el = document.querySelector('#test');
- var matches = el.querySelectorAll('div.highlighted > p');
还是以上面的HTML代码为例,下面代码会同时选中两个p元素。
- var outer = document.getElementById('outer');
- var el = outer.querySelectorAll('div p');
getElementsByClassName方法返回一个HTMLCollection对象,成员是当前元素节点的所有匹配指定class的子元素。该方法与document.getElementsByClassName方法的用法类似,只是搜索范围不是整个文档,而是当前元素节点。
getElementsByTagName方法返回一个HTMLCollection对象,成员是当前元素节点的所有匹配指定标签名的子元素。该方法与document.getElementsByClassName方法的用法类似,只是搜索范围不是整个文档,而是当前元素节点。此外,该方法搜索之前,会统一将标签名转为小写。
以下方法返回元素节点的CSS盒状模型信息。
getBoundingClientRect方法返回一个对象,该对象提供当前元素节点的大小、它相对于视口(viewport)的位置等信息,基本上就是CSS盒状模型的内容。
- var rect = obj.getBoundingClientRect();
上面代码中,getBoundingClientRect方法返回的对象,具有以下属性(全部为只读)。
- bottom:元素底部相对于视口的纵坐标。
- height:元素高度(等于bottom减去top)。
- left:元素左上角相对于视口的坐标。
- right:元素右边界相对于视口的横坐标。
- top:元素顶部相对于视口的纵坐标。
- width:元素宽度(等于right减去left)。
由于元素相对于视口(viewport)的位置,会随着页面滚动变化,因此表示位置的四个属性值,都不是固定不变的。getBoundingClientRect方法的所有属性,都把边框(border属性)算作元素的一部分。也就是说,都是从边框外缘的各个点来计算。因此,width和height包括了元素本身 + padding + border。
以下方法操作元素节点的DOM树
insertAdjacentHTML方法解析字符串,然后将生成的节点插入DOM树的指定位置。
- element.insertAdjacentHTML(position, text);
- beforebegin:在当前元素节点的前面。
- afterbegin:在当前元素节点的里面,插在它的第一个子元素之前。
- beforeend:在当前元素节点的里面,插在它的最后一个子元素之后。
- afterend:在当前元素节点的后面。
- // 原来的HTML代码:<div id="one">one</div>
- var d1 = document.getElementById('one');
- d1.insertAdjacentHTML('afterend', '<div id="two">two</div>');
- // 现在的HTML代码:
- // <div id="one">one</div><div id="two">two</div>
该方法不是彻底置换现有的DOM结构,这使得它的执行速度比innerHTML操作快得多。所有浏览器都支持这个方法
remove方法用于将当前元素节点从DOM树删除。
- var el = document.getElementById('div-01');
- el.remove();
scrollIntoView方法滚动当前元素,进入浏览器的可见区域。
- el.scrollIntoView(); // 等同于el.scrollIntoView(true)
- el.scrollIntoView(false);
该方法可以接受一个布尔值作为参数。如果为true,表示元素的顶部与当前区域的可见部分的顶部对齐(前提是当前区域可滚动);如果为false,表示元素的底部与当前区域的可见部分的尾部对齐(前提是当前区域可滚动)。如果没有提供该参数,默认为true。
javascript高级程序设计---Element对象的更多相关文章
- javascript高级程序设计---Event对象
事件是一种异步编程的实现方式,本质上是程序各个组成部分之间传递的特定消息. DOM的事件操作(监听和触发),都定义在EventTarget接口 该接口就是三个方法,addEventListener和r ...
- javascript高级程序设计---Event对象三
进度事件 进度事件用来描述一个事件进展的过程,比如XMLHttpRequest对象发出的HTTP请求的过程.<img>.<audio>.<video>.<st ...
- javascript高级程序设计---Event对象二
鼠标事件 事件种类 鼠标事件指与鼠标相关的事件,主要有以下一些. (1)click事件 click事件当用户在Element节点.document节点.window对象上,单击鼠标(或者按下回车键)时 ...
- Javascript高级程序设计-对象
学习Javascript,最难的地方是什么? Object(对象)最难,初学者不容易掌握. Javascript是一种基于对象(object-based)的语言,它的语法中没有class(类). C# ...
- 《Javascript高级程序设计》读书笔记之对象创建
<javascript高级程序设计>读过有两遍了,有些重要内容总是会忘记,写一下读书笔记备忘 创建对象 工厂模式 工厂模式优点:有了封装的概念,解决了创建多个相似对象的问题 缺点:没有解决 ...
- 【javascript学习——《javascript高级程序设计》笔记】DOM操作
DOM(文档对象模型)是针对HTML和XML文档的一个API(应用程序编程接口).DOM描绘了一个层次节点树,允许开发人员添加.移除和修改. 1.节点层次 <html> <head& ...
- JavaScript高级程序设计(第三版)学习,第一次总结
Array类型 var arr = []; arr.length; //返回数组元素个数 改变length可以动态改变数组大小 检测数组 instanceof可以检测某个对象是否是数组,限制:只能是一 ...
- 《Javascript高级程序设计》阅读记录(七):第七章
<Javascript高级程序设计>中,2-7章中已经涵盖了大部分精华内容,所以摘录到博客中,方便随时回忆.本系列基本完成,之后的章节,可能看情况进行摘录. 这个系列以往文字地址: < ...
- 《Javascript高级程序设计》阅读记录(二):第四章
这个系列之前文字地址:http://www.cnblogs.com/qixinbo/p/6984374.html 这个系列,我会把阅读<Javascript高级程序设计>之后,感觉讲的比较 ...
随机推荐
- 我的WCF Data Service 系列 (一、为什么要有WCF Data Service)
开篇先说两名题外话, 在博问上,经常看到有个问性能问题,比如Entity Framework的性能行不行啊之类的. 其实这个行不行,关键还是看对象,一夜家族的老七可能勉强吃点蓝片片,也就行了,可真要让 ...
- chrome使用技巧
chrome使用技巧 chrome对于开发人员来说,绝对是一个神器.下面,介绍关于它的一些小技巧: 1.利用chrome快速定位source中的资源. 我之前一般如果查找每个文件,都是打开控制台,在s ...
- 转:在VS2010下编译、调试和生成mex文件
最近帮人调了一个程序,是网上公开的代码,利用matlab与c++混合编程做三维模型关键点检测,发现他们可以用VS2010编译.调试.生成mexw32文件,因此觉得之前在Matlab上利用mex命令真是 ...
- 在JavaScript中,arguments是对象的一个特殊属性。
arguments对象 function函数的内置参数的"数组"/"集合":同时arguments对象就像数组,但是它却不是数组. 常用属性: 1.length ...
- 第四章 电商云化,4.1 17.5W秒级交易峰值下的混合云弹性架构之路(作者:唐三 乐竹 锐晟 潇谦)
4.1 17.5W秒级交易峰值下的混合云弹性架构之路 前言 每年的双11都是一个全球狂欢的节日,随着每年交易逐年创造奇迹的背后,按照传统的方式,我们的成本也在逐年上升.双11当天的秒级交易峰值平时的近 ...
- 使用Newtonsoft JsonConvert反序列化Json数据到DataTable
//JsonStr为Json字符串 JArray array = JsonConvert.DeserializeObject(JsonStr) as JArray;//反序列化为数组 ) { Stri ...
- Java同步synchronized与死锁
多个线程要操作同一资源时就有可能出现资源的同步问题. 同步就是指多个操作在同一个时间段内只能有一个线程进行,其他线程要等待此线程完成之后才可以继续执行. 解决资源共享的同步操作,可以使用同步代码块和同 ...
- 面向对象编程OOP-1
在下面的例子中, 我们定义了 Student类作为 Person类的子类. 之后我们重定义了sayHello() 方法并添加了 sayGoodBye() 方法 // 定义Person构造器 funct ...
- 浅谈T-SQL中的派生表和CTE
引言 表表达式是一种命名的查询表达式,代表一个有效的关系表.MSSQL支持4种类型的表表达式,它们分别是:派生表.公用表表达式(CTE).视图以及内联表值函数.表表达式并不是物理上真实存在的对象,它们 ...
- XMLHttpRequestUtil
//XMLHttpRequest类 function XMLHTTPRequestUtil() { this.Instance = null; this.GetXMLHttpRequest = fun ...