javascript基础学习系列四百零八：Element 类型

除了Document 类型，Element 类型就是Web开发中最常用的类型了。Element 表示XML或HTML元素，对外暴露出访问元素标签名、子节点和属性的能力。Element 类型的节点具有以下特征：

 nodeName 值为元素的标签名；
 nodeValue 值为 null；
 parentNode 值为 Document 或 Element 对象；
 子节点可以是 Element、Text、Comment、ProcessingInstruction、CDATASection、
EntityReference 类型。

可以通过 nodeName 或 tagName 属性来获取元素的标签名。这两个属性返回同样的值（添加后一个属性明显是为了不让人误会）。比如有下面的元素：

可以像这样取得这个元素的标签名：
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 文档中运行，最好将标签名转换为小写形式，以便于比较：

 // do something here 
} 
if (element.tagName.toLowerCase() == "div"){ // 推荐，适用于所有文档
 // 做点什么
} 

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

1. HTML 元素所有 HTML 元素都通过 HTMLElement 类型表示，包括其直接实例和间接实例。另外，HTMLElement直接继承 Element 并增加了一些属性。每个属性都对应下列属性之一，它们是所有 HTML 元素上都有的标准属性：

 title，包含元素的额外信息，通常以提示条形式展示；
 lang，元素内容的语言代码（很少用）；
 dir，语言的书写方向（"ltr"表示从左到右，"rtl"表示从右到左，同样很少用）；
 className，相当于 class 属性，用于指定元素的 CSS 类（因为 class 是 ECMAScript 关键字，
所以不能直接用这个名字）。

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

这个元素中的所有属性都可以使用下列 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.className = "ft"; 
div.title = "Some other text"; 
div.lang = "fr"; 
div.dir ="rtl"; 

并非所有这些属性的修改都会对页面产生影响。比如，把 id 或 lang 改成其他值对用户是不可见的（假设没有基于这两个属性应用 CSS 样式），而修改 title 属性则只会在鼠标移到这个元素上时才会反映出来。修改 dir 会导致页面文本立即向左或向右对齐。修改 className 会立即反映应用到新类名的 CSS 样式（如果定义了不同的样式）。
如前所述，所有 HTML 元素都是 HTMLElement 或其子类型的实例。下表列出了所有 HTML 元素及其对应的类型（斜体表示已经废弃的元素）。

A HTMLAnchorElement COL HTMLTableColElement 
ABBR HTMLElement COLGROUP HTMLTableColElement 
ACRONYM HTMLElement DD HTMLElement 
ADDRESS HTMLElement DEL HTMLModElement 
APPLET HTMLAppletElement DFN HTMLElement 
AREA HTMLAreaElement DIR HTMLDirectoryElement 
B HTMLElement DIV HTMLDivElement 
BASE HTMLBaseElement DL HTMLDListElement 
BASEFONT HTMLBaseFontElement DT HTMLElement 
BDO HTMLElement EM HTMLElement 
BIG HTMLElement FIELDSET HTMLFieldSetElement 
BLOCKQUOTE HTMLQuoteElement FONT HTMLFontElement 
BODY HTMLBodyElement FORM HTMLFormElement 
BR HTMLBRElement FRAME HTMLFrameElement 
BUTTON HTMLButtonElement FRAMESET HTMLFrameSetElement 
CAPTION HTMLTableCaptionElement H1 HTMLHeadingElement 
CENTER HTMLElement H2 HTMLHeadingElement 
CITE HTMLElement H3 HTMLHeadingElement 
CODE HTMLElement H4 HTMLHeadingElement

H5 HTMLHeadingElement PRE HTMLPreElement 
H6 HTMLHeadingElement Q HTMLQuoteElement 
HEAD HTMLHeadElement S HTMLElement 
HR HTMLHRElement SAMP HTMLElement 
HTML HTMLHtmlElement SCRIPT HTMLScriptElement 
I HTMLElement SELECT HTMLSelectElement 
IFRAME HTMLIFrameElement SMALL HTMLElement 
IMG HTMLImageElement SPAN HTMLElement 
INPUT HTMLInputElement STRIKE HTMLElement 
INS HTMLModElement STRONG HTMLElement 
ISINDEX HTMLIsIndexElement STYLE HTMLStyleElement 
KBD HTMLElement SUB HTMLElement 
LABEL HTMLLabelElement SUP HTMLElement 
LEGEND HTMLLegendElement TABLE HTMLTableElement 
LI HTMLLIElement TBODY HTMLTableSectionElement 
LINK HTMLLinkElement TD HTMLTableCellElement 
MAP HTMLMapElement TEXTAREA HTMLTextAreaElement 
MENU HTMLMenuElement TFOOT HTMLTableSectionElement 
META HTMLMetaElement TH HTMLTableCellElement 
NOFRAMES HTMLElement THEAD HTMLTableSectionElement 
NOSCRIPT HTMLElement TITLE HTMLTitleElement 
OBJECT HTMLObjectElement TR HTMLTableRowElement 
OL HTMLOListElement TT HTMLElement 
OPTGROUP HTMLOptGroupElement U HTMLElement 
OPTION HTMLOptionElement UL HTMLUListElement 
P HTMLParagraphElement VAR HTMLElement 
PARAM HTMLParamElement

这里列出的每种类型都有关联的属性和方法。本书会涉及其中的很多类型。