除了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 都适用。
- 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
这里列出的每种类型都有关联的属性和方法。本书会涉及其中的很多类型。