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
  id
  innerHTML
  lang
  offsetHeight,offsetWidth
  offsetLeft,offsetTop
  offsetParent
  scrollHeight, scrollWidth
  scrollTop, scrollLeft
  style:返回为当前元素设置内联 CSS 样式的 style 属性的值,类型CSS2Properties
  title
 
   方法:
  scrollIntoView()
 
 事件:参考具体元素

 

 

 Element 对象

 属性:

属性描述IEFOW3C
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

方法:

方法描述IEFOW3C
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 对象

属性:

属性描述IEFOW3C
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

方法:

方法描述IEFOW3C
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
 

 

 

 

 

posted @ 2014-02-17 00:27  HolyGrail  阅读(12263)  评论(1编辑  收藏  举报
设计良好的程序将用户的注意力视为有限的宝贵资源,只有在必要时才要求使用。 ——《Unix编程艺术》