大家好，又见面了，我是你们的朋友全栈君。
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返回的是什么？串讲HTML DOM[通俗易懂]](http://images0.cnblogs.com/blog/259214/201402/162335436702271.jpg)
![getElementById返回的是什么？串讲HTML DOM[通俗易懂]](https://javaforall.net/wp-content/uploads/2020/11/2020110817443450.jpg)
这些由 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 对象
属性：
scrollHeight, scrollWidth
方法：
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 |
事件：参考具体元素
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/154617.html原文链接：https://javaforall.net
