DOM模型（三）—— Element节点

Element对象对应网页的HTML标签元素。每一个HTML标签元素，在DOM树上都会转化成一个Element节点对象（以下简称元素节点）。

元素节点的nodeType属性都是1，但是不同HTML标签生成的元素节点时不一样的。JS内部使用不同的构造函数，生成不同的Element节点，比如<a>标签的节点对象由HTMLAnchorElement()构造函数生成，<button>标签的节点对象由HTMLButtonElement()构造函数生成。因此，元素节点不是一种对象，而是一组对象。

一、与元素本身特征相关的属性

以下属性与元素本身的特征相关。

1.1、Element.attributes

Element.attributes属性返回一个类似数组的对象，成员是当前元素节点的所有属性节点。下一节将详细介绍。

1.2、Element.id，Element.tagName

Element.id属性返回指定元素的id属性，该属性可读写。

Element.tagName属性返回指定元素的大写标签名，与nodeName属性的值相等。

// HTML代码为
// <span id="myspan">Hello</span>
var span = document.getElementById('span');
span.id // "myspan"
span.tagName // "SPAN"

验证

1.3、Element.innerHTML

Element.innerHTML属性返回该元素包含的HTML代码。该属性可读写，常用来设置某个节点的内容。

如果将该属性设为空，等于删除它包含的所有节点。

el.innerHTML = '';

上面代码等于将el节点变成了一个空节点，el原来包含的节点被全部删除。

注意，如果文本节点中包含&、小于号和大于号，innerHTML属性会将它们转为实体形式&、<、>。

// HTML代码如下 <p id="para"> 5 > 3 </p>
document.getElementById('para').innerHTML
// 5 > 3

由于上面这个原因，导致用innerHTML插入<script>标签，不会被执行。

var name = "<script>alert('haha')</script>";
el.innerHTML = name;

上面代码将脚本插入内容，脚本并不会执行。但是，innerHTML还是有安全风险的。

var name = "<img src=x onerror=alert(1)>";
el.innerHTML = name;

上面代码中，alert方法是会执行的。因此为了安全考虑，如果插入的事文本，最好用textContent属性代替innerHTML。

1.4、Element.outerHTML

Element.outerHTML属性返回一个字符串，内容为指定元素节点的所有HTML代码，包括它自身和包含的所有子元素。

// HTML代码如下
// <div id="d"><p>Hello</p></div>

d = document.getElementById('d');
d.outerHTML
// '<div id="d"><p>Hello</p></div>'

outerHTML属性是可读写的，对它进行赋值，等于替换掉当前元素。

// HTML代码如下
// <div id="container"><div id="d">Hello</div></div>

container = document.getElementById('container');
d = document.getElementById("d");
container.firstChild.nodeName // "DIV"
d.nodeName // "DIV"

d.outerHTML = '<p>Hello</p>';
container.firstChild.nodeName // "P"
d.nodeName // "DIV"

上面代码中，outerHTML属性重新赋值以后，内层的div元素就不存在了，被p元素替换了。但是，变量d依然指向原来的div元素，这表示被替换的DIV元素还存在于内存中。

1.5、Element.className，Element.classList

className属性用来读写当前元素节点的class属性。它的值是一个字符串，每个class之间用空格分割。

classList属性则返回一个类似数组的对象，当前元素节点的每个class就是这个对象的一个成员。

<div class="one two three" id="myDiv"></div>

上面这个div元素节点对象的className属性和classList属性，分别如下。

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$/, '');

toggle方法可以接受一个布尔值，作为第二个参数。如果为true，则添加该属性；如果为false，则去除该属性。

el.classList.toggle('abc', boolValue);

// 等同于

if (boolValue){
  el.classList.add('abc');
} else {
  el.classList.remove('abc');
}

二、盒状模型相关属性

2.1、Element.clientHeight，Element.clientWidth

Element.clientHeight属性返回元素节点可见部分的高度，Element.clientWidth属性返回元素节点可见部分的宽度。所谓可见部分，指的是不包括溢出的大小，只返回该元素在容器中占据的大小，对于有滚动条的元素来说，它们等于滚动条围起来的区域大小。这两个属性的值包括Padding、但不包括滚动条、边框和Margin，单位为像素。这两个属性可以计算得到，等于元素的CSS高度（或宽度）加上CSS的padding，减去滚动条（如果存在）。

对于整张网页来说，当前可见高度（即视口高度）要从document.documentElement对象（即<html>节点）上获取，等同于window.innerHeight属性减去水平滚动条的高度。没有滚动条时，这两个值是相等的；有滚动条时，前者小于后者。

2.2、Element.clientLeft，Element.clientTop

2.3、Element.scrollHeight，Element.scrollWidth

2.4、Element.scrollLeft，Element.scrollTop

2.5、Element.offsetHeight，Element.offsetWidth

2.6、Element.offsetLeft，Element.offsetTop

2.7、Element.style

每个元素节点都有style用来读写该元素的行内样式信息。

2.8、总结

三、返回元素节点相关节点的属性

以下属性返回元素节点的相关节点。

3.1、Element.children，Element.childElementCount

Element.children属性返回一个HTMLCollection对象，包括当前元素节点的所有子节点。它是一个类似数组的动态对象（实时反映网页元素的变化）。如果当前元素没有子元素，则返回的对象包含零个成员。

// para是一个p元素节点
if (para.children.length) {
  var children = para.children;
    for (var i = 0; i < children.length; i++) {
      // ...
    }
}

这个属性与Node.childNodes属性的区别是，它只包括HTML元素类型的子节点，不包括其他类型的子节点。

Element.childElementCount属性返回当前元素节点包含的子HTML元素节点的个数，与Element.children.length的值相同。注意，该属性只计算HTML元素类型的子节点。

3.2、Element.firstElementChild，Element.lastElementChild

Element.firstElementChild属性返回第一个HTML元素类型的子节点，Element.lastElementChild返回最后一个HTML元素类型的子节点。

如果没有HTML类型的子节点，这两个属性返回null。

3.3、Element.nextElementSibling，Element.previousElementSibling

Element.nextElementSibling属性返回当前HTML元素节点的后一个同级HTML元素节点，如果没有则返回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>

Element.previousElementSibling属性返回当前HTML元素节点的前一个同级HTML元素节点，如果没有则返回null。

3.4、Element.offsetParent

Element.offsetParent属性返回当前HTML元素的最靠近的、并且CSS的position属性不等于static的父元素。如果某个元素的所有上层节点都将position属性设为static，则Element.offsetParent属性指向<body>元素。

该属性主要用于确定子元素的位置偏移，是Element.offsetTop和Element.offsetLeft的计算基准。

四、操作元素属性相关的方法

元素节点提供以下四个方法，用来操作HTML标签的属性。

Element.getAttribute()：读取指定属性

Element.setAttribute()：设置指定属性
Element.hasAttribute()：返回一个布尔值，表示当前元素节点是否有指定的属性
Element.removeAttribute()：移除指定属性

五、查找相关的方法

以下四个方法用来查找与当前元素节点相关的节点。这四个方法也部署在document对象上，用法完全一致。

Element.querySelector()

Element.querySelectorAll()
Element.getElementByTagName()
Element.getElementByClassName()

上面四个方法只返回Element子节点，因此可以采用链式写法。

document
  .getElementById('header')
  .getElementsByClassName('a')

5.1、Element.querySelector()

Element.querySelector方法接受CSS选择器作为参数，返回父元素的第一个匹配的子元素。

var content = document.getElementById('content');
var el = content.querySelector('p');

上面代码返回content节点的第一个p元素。

需要注意的是，浏览器执行querySelector方法时，是先在全局范围内搜索给定的CSS选择器，然后过滤出哪些属于当前元素的子元素。因此，会有一些违反直觉的结果。

<div>
<blockquote id="outer">
  <p>Hello</p>
  <div id="inner">
    <p>World</p>
  </div>
</blockquote>
</div>

那么，下面代码实际上会返回第一个p元素，而不是第二个。

var outer = document.getElementById('outer');
outer.querySelector('div p')
// <p>Hello</p>

选择器最好够明确

5.2、Element.querySelectorAll()

Element.querySelectorAll方法接受CSS选择器作为参数，返回一个NodeList对象，包含所有匹配的子元素。

该方法的执行机制与querySelector相同，也是先在全局范围内查找，再过滤出当前元素的子元素。因此，选择器实际上针对整个文档的。

5.3、Element.getElementsByTagName()

Element.getElementsByTagName方法返回一个HTMLCollection对象，成员是当前元素节点的所有匹配指定标签名的子元素。该方法与document.getElementsByTagName方法的用法类似，只是搜索范围不是整个文档，而是当前元素节点。

同样的，该方法的参数大小写不敏感。

5.4、Element.getElementsByClassName()

Element.getElementsByClassName方法返回一个HTMLCollection对象，成员是当前元素节点的所有匹配指定class的子元素。该方法与document.getElementsByClassName方法的用法类似，只是搜索范围不是整个文档，而是当前元素节点。

该方法的参数大小写敏感。

5.5、Element.closest()

Element.closest方法返回当前元素节点的最接近的父元素（或者当前节点本身），条件是必须匹配给定的CSS选择器。如果不满足匹配，则返回null。

//HTML代码
<article>
  <div id="div-01">Here is div-01
    <div id="div-02">Here is div-02
      <div id="div-03">Here is div-03</div>
    </div>
  </div>
</article>

//JS代码
var el = document.getElementById('div-03');
el.closest("#div-02") // div-02
el.closest("div div") // div-03
el.closest("article > div") //div-01
el.closest(":not(div)") // article

上面代码中，由于closet方法将当前元素节点也考虑在内，所以第二个closet方法返回div-03。

5.6、Element.match()

Element.match方法返回一个布尔值，表示当前元素是否匹配给定的CSS选择器。

六、事件相关的方法

以下三个方法与Element节点的事件相关。这些方法都继承自EventTarget接口。

Element.addEventListener()：添加事件的回调函数

Element.removeEventListener()：移除事件监听函数
Element.dispatchEvent()：触发事件

element.addEventListener('click', listener, false);
element.removeEventListener('click', listener, false);

var event = new Event('click');
element.dispatchEvent(event);

七、其他方法

7.1、Element.scrollIntoView()

7.2、Element.getBoundingClientRect()

7.3、Element.getClientRects()

7.4、Element.insertAdjacentHTML()

7.5、Element.remove()

Element.remove方法用于将当前元素节点从DOM树删除。

var el = document.getElementById('div-01');
el.remove();

7.6、Element.focus()

Element.focus方法用于将当前页面的焦点，转移到指定元素上。

document.getElementById('my-span').focus();

最后编辑于：2017.12.05 06:16:32

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 194,390评论 5赞 459
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 81,821评论 2赞 371
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 141,632评论 0赞 319
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 52,170评论 1赞 263
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 61,033评论 4赞 355
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 46,098评论 1赞 272
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 36,511评论 3赞 381
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 35,204评论 0赞 253
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 39,479评论 1赞 290
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 34,572评论 2赞 309
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 36,341评论 1赞 326
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 32,213评论 3赞 312
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 37,576评论 3赞 298
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 28,893评论 0赞 17
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 30,171评论 1赞 250
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 41,486评论 2赞 341
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 40,676评论 2赞 335