javascript基础学习系列二百一十六：Element类型

除了Document类型，Element类型就是Web开发中最常用的类型了。Element表示XML或HTML 元素，对外暴露出访问元素标签名、子节点和属性的能力。Element 类型的节点具有以下特征:
 nodeType 等于 1;
 nodeName 值为元素的标签名;
 nodeValue 值为 null;
 parentNode 值为 Document 或 Element 对象;
子节点可以是 Element、Text、Comment、ProcessingInstruction、CDATASection、
EntityReference 类型。
可以通过 nodeName 或 tagName 属性来获取元素的标签名。这两个属性返回同样的值(添加后一
个属性明显是为了不让人误会)。比如有下面的元素:

   <div id="myDiv"></div>
  可以像这样取得这个元素的标签名:
    let div = document.getElementById("myDiv");
    alert(div.tagName); // "DIV"
    alert(div.tagName == div.nodeName); // true

例子中的元素标签名为 div，ID 为"myDiv"。注意，div.tagName 实际上返回的是"DIV"而不是 “div”。在 HTML 中，元素标签名始终以全大写表示;在 XML(包括 XHTML)中，标签名始终与源 代码中的大小写一致。如果不确定脚本是在 HTML 文档还是 XML 文档中运行，最好将标签名转换为小 写形式，以便于比较:

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

这个例子演示了比较 tagName 属性的情形。第一个是容易出错的写法，因为 HTML 文档中 tagName 返回大写形式的标签名。第二个先把标签名转换为全部小写后再比较，这是推荐的做法，因为这对 HTML 和 XML 都适用。

1. HTML 元素

所有 HTML 元素都通过 HTMLElement 类型表示，包括其直接实例和间接实例。另外，HTMLElement 直接继承 Element 并增加了一些属性。每个属性都对应下列属性之一，它们是所有 HTML 元素上都有 的标准属性:
 id，元素在文档中的唯一标识符;
 title，包含元素的额外信息，通常以提示条形式展示;
 lang，元素内容的语言代码(很少用);
 dir，语言的书写方向("ltr"表示从左到右，"rtl"表示从右到左，同样很少用);
 className，相当于 class 属性，用于指定元素的 CSS 类(因为 class 是 ECMAScript 关键字，
所以不能直接用这个名字)。

所有这些都可以用来获取对应的属性值，也可以用来修改相应的值。比如有下面的 HTML 元素:

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

这个元素中的所有属性都可以使用下列 JavaScript 代码读取:

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

而且，可以使用下列代码修改元素的属性:

div.id = "someOtherId";
div.className = "ft";
div.title = "Some other text";
div.lang = "fr";
div.dir ="rtl";