getElementById返回的是什么？串讲HTML DOM

1. getElementById()返回的是什么？

　　这个函数使用的最普遍，但是你有没有深入探究下，这个函数究竟返回的是什么么？我们来一起看看。

var mydivEle = document.getElementById("mydiv");   //<div id="mydiv"></div>

alert(mydivEle);

//输出：object HTMLDivElement【IE8只显示Object,Chrome显示object HTMLDivElement】

　　从弹出的alert框中，我们看到 mydivEle 其实是 “object HTMLDivElement”，即 HTMLDivElement 对象，而这个对象是哪里来的呢？查阅《JavaScript权威指南》中文第六版363页，我们可以知道： HTMLDivElement 是 HTMLElement 的一个子对象，而 HTMLElement 又是 Element 的子对象。

　　这些由 getElementById() 得到的具体对象就是图中最右一列对象，它们其实就是 DOM 将具体的每个 HTML标签/元素封装之后的一个个HTMLElement 子对象。

　　知道了它是HTMLxxxElement是不是感觉还是摸不着头脑，没有什么用？那么看下面这个问题。

2. alert(getElementById("mydiv").tagName) 语句会报错吗？ HTMLDivElement 有tagName这个属性么，它都有哪些属性？

　　为了防止误导，没有举错误的例子。上面的 alert(getElementById("mydiv").tagName) 是正确的，它会显示该元素的标签名：DIV（注意：返回的tagName都是大写）。那这个 HTMLDivElement 还有什么其它的属性呢？

　　仔细看上图，我们会看到，这些 HTMLxxxElement 是 HTMLElement 的子对象，所以它会自动继承 HTMLElement的所有属性和方法，依据上图，它还会继承 Element 、 Node 的属性和方法。所以，综合起来，getElementById() 返回的对象，会有以下这些属性、方法、事件（内容整理自 w3cschool.com.cn）。

　　由于继承的属性、方法内容较多，就列放在文章的最后了。（通过查看这些继承的属性，我们会发现，这个 tagName 属性其实是继承自 Element 对象的一个属性。）

3. 如何修改getElementById()得到的div的样式呢？这个样式又是通过 HTMLDivElement 的什么属性or方法or子对象访问到的呢？

　　从 w3cschool 里了解到：Style 对象代表一个单独的样式声明。可从应用样式的文档或元素访问 Style 对象。接着它举了个例子：

document.getElementById("id").style.property="值"

　　w3cschool没有细说这个属性从何继承而来，但我们根据上面才讲的内容，很容易就可以从一层层的父对象找到，Style 对象其实是 HTMLElement 对象中一个属性。所以Style 就是每个 HTML 元素的标准配置，每个 HTMLElement 都有一个默认的 style 属性，属性值就是 Style 对象。

　　至于具体如何修改 div 的样式，我想就不用我多说了，这就是 CSS 的基础知识了。

　　若有疑问：点击 DOM HTML HTMLElement对象和 XML DOM CSS2Properties对象了解详细。

4. 注意

　　只有使用内联样式，即直接把CSS写在HTML元素的style属性中

<div id="d1" style="width:100px;height:200px;"></div>

　　才能通过上面所说的方法获取width等属性

alert(document.getElementById('d1').style.width);//100px

　　否则浏览器只会返回空字符串。详细见此。其实，最好还是使用JQuery，简单快捷：$("d1").width()，不用考虑是不是内联样式。

　　然后，这里想抛出个引子：其实JQuery中的 .width() 得到的并不是真正的 CSS 中的 width，想了解看这里。

<正文完>

<下面是整理的继承对象的属性/方法列表>　　

　HTMLElement 对象

　属性：

　　className

　　currentStyle

　　dir

　　innerHTML

　　lang

　　offsetHeight,offsetWidth

　　offsetLeft,offsetTop

　　offsetParent

　　scrollHeight, scrollWidth

　　scrollTop, scrollLeft

　　style：返回为当前元素设置内联 CSS 样式的 style 属性的值，类型CSS2Properties。

　　title

方法：

　　scrollIntoView()

　事件：参考具体元素

　Element 对象

　属性：

属性	描述	IE	F	O	W3C
attributes	返回元素的属性的 NamedNodeMap	5	1	9	Yes
baseURI	返回元素的绝对基准 URI	No	1	No	Yes
childNodes	返回元素的子节点的 NodeList	5	1	9	Yes
firstChild	返回元素的首个子节点	5	1	9	Yes
lastChild	返回元素的最后一个子节点	5	1	9	Yes
localName	返回元素名称的本地部分	No	1	9	Yes
namespaceURI	返回元素的命名空间 URI	No	1	9	Yes
nextSibling	返回元素之后紧跟的节点	5	1	9	Yes
nodeName	返回节点的名称，依据其类型。	5	1	9	Yes
nodeType	返回节点的类型	5	1	9	Yes
ownerDocument	返回元素所属的根元素 (document 对象)	5	1	9	Yes
parentNode	返回元素的父节点	5	1	9	Yes
prefix	设置或返回元素的命名空间前缀	No	1	9	Yes
previousSibling	返回元素之前紧随的节点	5	1	9	Yes
schemaTypeInfo	返回与元素相关联的类型信息			No	Yes
tagName	返回元素的名称	5	1	9	Yes
textContent	设置或返回元素及其后代的文本内容	No	1	No	Yes
text	返回节点及其后代的文本 (IE-only)	5	No	No	No
xml	返回节点及其后代的 XML (IE-only)	5	No	No	No

方法：

方法	描述	IE	F	O	W3C
appendChild()	向节点的子节点列表末尾添加新的子节点。	5	1	9	Yes
cloneNode()	克隆节点。	5	1	9	Yes
compareDocumentPosition()	比较两节点的文档位置。	No	1	No	Yes
dispatchEvent()	给节点分派一个合成事件。	No	1	9	Yes
getAttribute()	返回属性的值。	5	1	9	Yes
getAttributeNS()	返回属性的值。	No	1	9	Yes
getAttributeNode()	以 Attribute 对象返回属性节点。	5	1	9	Yes
getAttributeNodeNS()	以 Attribute 对象返回属性节点。	No		9	Yes
getElementsByTagName()	找到具有指定标签名的子孙元素。	5	1	9	Yes
getElementsByTagNameNS()	找到具有指定标签名和命名空间的元素。	No	1	9	Yes
getFeature(feature,version)	返回 DOM 对象，此对象可执行拥有指定特性和版本的专门的 API。			No	Yes
getUserData(key)	返回关联节点上键的对象。此对象必须首先通过使用相同的键来调用 setUserData 来设置到此节点。			No	Yes
hasAttribute()	返回元素是否拥有指定的属性。	5	1	9	Yes
hasAttributeNS()	返回元素是否拥有指定的属性。	No	1	9	Yes
hasAttributes()	返回元素是否拥有属性。	5	1	9	Yes
hasChildNodes()	返回元素是否拥有子节点。	5	1	9	Yes
insertBefore()	在已有的子节点之前插入一个新的子节点。	5	1	9	Yes
isDefaultNamespace(URI)	返回指定的命名空间 URI 是否为默认。			No	Yes
isEqualNode()	检查两节点是否相等。	No	No	No	Yes
isSameNode()	检查两节点是否为同一节点。	No	1	No	Yes
isSupported(feature,version)	返回指定的特性是否在此元素上得到支持。			9	Yes
lookupNamespaceURI()	返回匹配指定前缀的命名空间 URI。	No	1	No	Yes
lookupPrefix()	返回匹配指定的命名空间 URI 的前缀。	No	1	No	Yes
normalize()		5	1	9	Yes
removeAttribute()	删除指定的属性。	5	1	9	Yes
removeAttributeNS()	删除指定的属性。	No	1	9	Yes
removeAttributeNode()	删除指定的属性节点。	5	1	9	Yes
removeChild()	删除子节点。	5	1	9	Yes
replaceChild()	替换子节点。	5	1	9	Yes
setUserData(key,data,handler)	把对象关联到元素上的键。			No	Yes
setAttribute()	添加新属性。	5	1	9	Yes
setAttributeNS()	添加新属性。		1	9	Yes
setAttributeNode()	添加新的属性节点。	5	1	9	Yes
setAttributeNodeNS(attrnode)	添加新的属性节点。			9	Yes
setIdAttribute(name,isId)	如果 Attribute 对象 isId 属性为 true，那么此方法会把指定的属性声明为一个用户确定 ID 的属性（user-determined ID attribute）。			No	Yes
setIdAttributeNS(uri,name,isId)	如果 Attribute 对象 isId 属性为 true，那么此方法会把指定的属性声明为一个用户确定 ID 的属性（user-determined ID attribute）（带有命名空间）。			No	Yes
setIdAttributeNode(idAttr,isId)	如果 Attribute 对象 isId 属性为 true，那么此方法会把指定的属性声明为一个用户确定 ID 的属性（user-determined ID attribute）。			No	Yes

事件：参考具体元素

　Node 对象

属性：

属性	描述	IE	F	O	W3C
baseURI	返回节点的绝对基准 URI。	No	1	No	Yes
childNodes	返回节点到子节点的节点列表。	5	1	9	Yes
firstChild	返回节点的首个子节点。	5	1	9	Yes
lastChild	返回节点的最后一个子节点。	5	1	9	Yes
localName	返回节点的本地名称。	No	1	9	Yes
namespaceURI	返回节点的命名空间 URI。	No	1	9	Yes
nextSibling	返回节点之后紧跟的同级节点。	5	1	9	Yes
nodeName	返回节点的名称，根据其类型。	5	1	9	Yes
nodeType	返回节点的类型。	5	1	9	Yes
nodeValue	设置或返回节点的值，根据其类型。	5	1	9	Yes
ownerDocument	返回节点的根元素（document 对象）。	5	1	9	Yes
parentNode	返回节点的父节点。	5	1	9	Yes
prefix	设置或返回节点的命名空间前缀。	No	1	9	Yes
previousSibling	返回节点之前紧跟的同级节点。	5	1	9	Yes
textContent	设置或返回节点及其后代的文本内容。	No	1	No	Yes
text	返回节点及其后代的文本（IE 独有的属性）。	5	No	No	No
xml	返回节点及其后代的 XML（IE 独有的属性）。	5	No	No	No

方法：

方法	描述	IE	F	O	W3C
appendChild()	向节点的子节点列表的结尾添加新的子节点。	5	1	9	Yes
cloneNode()	复制节点。	5	1	9	Yes
compareDocumentPosition()	对比两个节点的文档位置。	No	1	No	Yes
getFeature(feature,version)	返回一个 DOM 对象，此对象可执行带有指定特性和版本的专门的 API。			No	Yes
getUserData(key)	返回与此节点上的某个键相关联的对象。此对象必须首先通过使用相同的键来调用 setUserData 被设置到此节点。			No	Yes
hasAttributes()	判断当前节点是否拥有属性。	No	1	9	Yes
hasChildNodes()	判断当前节点是否拥有子节点。	5	1	9	Yes
insertBefore()	在指定的子节点前插入新的子节点。	5	1	9	Yes
isDefaultNamespace(URI)	返回指定的命名空间 URI 是否为默认。			No	Yes
isEqualNode()	检查两个节点是否相等。	No	No	No	Yes
isSameNode()	检查两个节点是否是相同的节点。	No	1	No	Yes
isSupported()	返回当前节点是否支持某个特性。			9	Yes
lookupNamespaceURI()	返回匹配指定前缀的命名空间 URI。	No	1	No	Yes
lookupPrefix()	返回匹配指定命名空间 URI 的前缀。	No	1	No	Yes
normalize()	合并相邻的Text节点并删除空的Text节点。	5	1	9	Yes
removeChild()	删除（并返回）当前节点的指定子节点。	5	1	9	Yes
replaceChild()	用新节点替换一个子节点。	5	1	9	Yes
selectNodes()	用一个 XPath 表达式查询选择节点。	6
selectSingleNode()	查找和 XPath 查询匹配的一个节点。	6
transformNode()	使用 XSLT 把一个节点转换为一个字符串。	6
transformNodeToObject()	使用 XSLT 把一个节点转换为一个文档。	6
setUserData(key,data,handler)	把对象关联到节点上的一个键上。			No	Yes

事件：参考具体元素