Element类型

Element表示XML或HTML元素，对外暴露出访问元素标签名、子节点和属性的能力。
Element类型的节点具有以下特征：
- nodeType等于1；
- nodeName值为元素的标签名；
- nodevalue值为null；
- parentNode值为Document或Element对象；
- 子节点可以是 Element、Text、Comment、ProcessingInstruction、CDATASection、EntityReference类型。
可以通过nodeName或tagName属性来获取元素的标签名。这两个属性返回同样的值（添加后一个属性明显是为了不让人误会)。
1
<div id="myDiv"></div>
1
2
3
let div = document.getElementById("myDiv");
alert(div.tagName); // "DIV"
alert(div.tagName == div.nodeName); // true
在 HTML 中，元素标签名始终以全大写表示；
在 XML(包括XHTML) 中，标签名始终与源代码中的大小写一致。
如果不确定脚本是在 HTML 文档还是 XML 文档中运行，最好将标签名转换为小写形式，以便于比较

if (element.tagName == "div"){ // 不要这样做，可能出错！
    // do something here 
} 
if (element.tagName.toLowerCase() == "div"){ // 推荐，适用于所有文档
    // 做点什么
}

1、HTML元素

所有HTML元素都通过HTMLElement类型表示，包括其直接实例和间接实例。
HTMLElement直接继承Element并增加了一些属性。

每个属性都对应下列属性之一，它们是所有HTML元素上都有的标准属性：

id：元素在文档中的唯一标识符；
title：包含元素的额外信息，通常以提示条形式展示；
lang：元素内容的语言代码(很少用)；
dir：语言的书写方向(“ltr”表示从左到右，”rtl”表示从右到左，同样很少用)；

className：相当于class属性，用于指定元素的CSS类(因为class是 ECMAScript关键字所以不能直接用这个名字)。

1	<div id="myDiv" class="bd" title="Body text" lang="en" dir="ltr"></div>

//这个元素中的所有属性都可以使用下列JavaScript代码读取
let div = document.getElementById("myDiv"); 
alert(div.id); // "myDiv" 
alert(div.className); // "bd" 
alert(div.title); // "Body text" 
alert(div.lang); // "en" 
alert(div.dir); // "ltr" 
//可以使用下列代码修改元素的属性:
div.id = "someOtherId"; 
div.className = "ft"; 
div.title = "Some other text"; 
div.lang = "fr"; 
div.dir ="rtl";

把id或lang改成其他值对用户是不可见的(假设没有基于这两个属性应用CSS样式)；
修改title属性则只会在鼠标移到这个元素上时才会反映出来；
修改dir会导致页面文本立即向左或向右对齐；
修改className 会立即反映应用到新类名的CSS样式（如果宗义了不同的样式)。

2、取得属性

与属性相关的DOM方法主要有3个：getAttribute()、setAttribute()和 removeAttribute()。
如果给定的属性不存在，则getAttribute()返回null。

1	<div id="myDiv" class="bd" title="Body text" lang="en" dir="ltr"></div>

let div = document.getElementById("myDiv"); 
alert(div.getAttribute("id")); // "myDiv" 
alert(div.getAttribute("class")); // "bd" 
alert(div.getAttribute("title")); // "Body text" 
alert(div.getAttribute("lang")); // "en" 
alert(div.getAttribute("dir")); // "ltr"

getAttribute()方法也能取得不是HTML语言正式属性的自定义属性的值。

1	<div id="myDiv" my_special_attribute="hello!"></div>

1	let value = div.getAttribute("my_special_attribute");

属性名不区分大小写，因此”ID”和”id”被认为是同一个属性。
根据 HTML5 规范的要求，自定义属性名应该前缀data-以方便验证。
元素的所有属性也可以通过相应DOM元素对象的属性来取得。
通过 DOM对象访问的属性中有两个返回的值跟使用getAttribute()取得的值不一样：
- 首先是style属性，这个属性用于为元素设定CSS样式。在使用getAttribute()访问style属性时，返回的是CSS字符串。而在通过DOM对象的属性访问时，style属性返回的是一个(cssstyleDeclaration)对象。
- 第二个属性其实是一类，即事件处理程序（或者事件属性)，比如 onclick。如果使用getAttribute()访问事件属性，则返回的是字符串形式的源代码。而通过DOM对象的属性访问事件属性时返回的则是一个JavaScript函数（未指定该属性则返回null)。

3、设置属性

setAttribute()：
- 方法接收两个参数：要设置的属性名和属性的值。
- 如果属性已经存在，则setAttribute()会以指定的值替换原来的值；如果不存在，则会创建该属性。
- 适用于HTML属性和自定义属性。
- 设置的属性名会规范为小写形式。
因为元素属性也是DOM对象属性，所以直接给DOM对象的属性赋值也可以设置元素属性的值。

在DOM对象上添加自定义属性不会让它变成元素的属性。

1	<div id="myDiv" class="bd" title="Body text" lang="en" dir="ltr"></div>

let div = document.getElementById("myDiv"); 
div.setAttribute("id"， "someOtherId"); 
div.setAttribute("class"， "ft"); 
div.setAttribute("title"， "Some other text"); 
div.setAttribute("lang"，"fr"); 
div.setAttribute("dir"， "rtl"); 
//==================
div.id = "someOtherId"; 
div.align = "left";
//==================
div.mycolor = "red"; 
alert(div.getAttribute("mycolor")); // null

removeAttribute()用于从元素中完全删除对应属性。
- 在序列化DOM元素时可以通过它控制要包含的属性。

1	div.removeAttribute("class");

4、attributes属性

Element类型是唯一使用attributes属性的 DOM节点类型。
attributes属性包含一个NamedNodeMap实例，是一个类似NodeList 的“实时”集合。
元素的每个属性都表示为一个Attr节点，并保存在这个NamedNodeMap对象中。
NamedNodeMap对象包含下列方法:
- getNamedItem(name)，返回nodeName属性等于name的节点;
- removeNamedItem(name)，删除nodeName属性等于name 的节点;
- setNamedItem(node)，向列表中添加node节点，以其nodeName为索引;
- item(pos)，返回索引位置pos处的节点。

attributes属性中的每个节点的nodeName是对应属性的名字，nodeValue 是属性的值。

// 要取得元素 id 属性的值，可以使用以下代码：
let id = element.attributes.getNamedItem("id").nodeValue;
// =============等价于=================
let id = element.attributes["id"].nodeValue; 
// 设置属性的值，即先取得属性节点，再将其 nodeValue 设置为新值，
element.attributes["id"].nodeValue = "someOtherId";

emoveNamedItem()方法与元素上的removeAttribute()方法类似，也是删除指定名字的属性。
- 两个方法唯一的不同之处，就是removeNamedItem()返回表示被删除属性的Attr节点

1	let oldAttr = element.attributes.removeNamedItem("id");

attributes属性最有用的场景是需要迭代元素上所有属性的时候。这时候往往是要把DOM结构序列化为XML或HTML字符串。

5、创建元素

document.createElement()方法创建新元素。
- 方法接收一个参数：需要创建元素的标签名。
同时使用appendChild()、insertBefore()或 replaceChild()将元素添加到文档树中，浏览器就会立即将其渲染出来。

1 2	let div = document.createElement("div"); document.body.appendChild(div);

6、元素后代

元素可以拥有任意多个子元素和后代元素，因为元素本身也可以是其他元素的子元素。