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 对象

　Element 对象

　Node 对象