详谈javascript中DOM的基本属性_javascript技巧

*思考
下面这段代码将提示什么内容：

代码如下:



输出document.body的所有的内容并且用新的内容进行替换。

代码如下:

The paragraph

innerHTML会包含一个有效地HTML。但浏览器也可以解析畸形的HTML。
innerHTML可以在任意一个元素节点中进行使用。它非常非常有用。

innerHTML pitFalls

innerHTML不像看起来那么简单。它有一些陷阱在正等待着菜鸟们，甚至有些时候经验丰富的程序员也无法避免。

IE中__table__节点的innerHTML为只读的
IE中COL, COLGROUP, FRAMESET, HEAD, HTML, STYLE, TABLE, TBODY, TFOOT, THEAD, TITLE, TR等元素里innerHTML为只读的。
IE中的table标签中除了TD其余的标签innerHTML都是只读的。

innerHTML不能追加
从语句的构成上来看innerHTML可以进行追加操作，比如:

chatDiv.innerHTML += "Hi !"
chatDiv.innerHTML += "How you doing?"
但是实际上都做了些什么:

1. 旧的内容被清空

2. 新的内容被解析，并插入了进去。内容没有被追加，它重新生成了。

因此，所有的图片和其他的资源当进行+=操作后会重新载入，包括smile.gif。

幸运的是，有其他的方式来更新内容，这种方式不使用innerHTML，因此没有上面提到的问题。

nodeValue

innerHTML只对元素节点有效。
对于其他类型的节点来说，他们使用nodeValue属性来获取内容。下例将说明它是如何在文本节点和注释节点工作的。

代码如下:

The text


for(var i=0; i alert(document.body.childNodes[i].nodeValue)
}

上面的例子中，有些警告为空的，那是因为空白节点的缘故。注意到对于SCRIPT节点中nodeValue === null。那是因为SCRIPT为元素节点。元素节点，要使用innerHTML。

总结

nodeType
  节点类型。最重要的是元素节点为1，文本节点为3，只读。
nodeName/tagName
  大写的标签名。非元素节点来说nodeName还会有特殊的值，只读。
innerHTML
  元素节点的内容，可写。
nodeValue
  文本节点的内容，可写。
DOM节点根据类型，还有其他的一些属性。例如，INPUT标签有value和__checked__属性。A属性有href等等。