详谈javascript中DOM的基本属性

结构和内容属性 nodeType 所有的节点都有类型，节点总共有以下的12种类型。 复制代码 代码如下: interface Node { // NodeType const unsigned short      ELEMENT_NODE       = 1; const unsigned short      ATTRIBUTE_NODE     = 2; const unsigned short      TEXT_NODE          = 3; const unsigned short      CDATA_SECTION_NODE = 4; const unsigned short      ENTITY_REFERENCE_NODE = 5; const unsigned short      ENTITY_NODE        = 6; const unsigned short      PROCESSING_INSTRUCTION_NODE = 7; const unsigned short      COMMENT_NODE       = 8; const unsigned short      DOCUMENT_NODE      = 9; const unsigned short      DOCUMENT_TYPE_NODE = 10; const unsigned short      DOCUMENT_FRAGMENT_NODE = 11; const unsigned short      NOTATION_NODE      = 12; ... } 其中最重要的两个节点为元素节点（1）和文本节点（3）。其余的很少会用到。 例如，列出所有的子元素节点时，我们可以遍历它，并使用childNodes[i].nodeType != 1来进行检测。 下面是实现代码： 复制代码 代码如下:

• John
• Bob

*思考 下面这段代码将提示什么内容： 复制代码 代码如下: nodeName, tagName nodeName 和 tagName 都包含节点的名称。 对于document.body来说 alert( document.body.nodeName )   // BODY 在HTML中所有的nodeName会被大写。 当nodeName没有被大写时 这种情况比较稀有，你如果好奇的话可以阅读以下。 你很可能已经知道，浏览器有两种方式进行解析:HTML模式和__XML模式。通常使用的是HTML模式，但是当使用XMLHttpRequest__技术获取XML文档时，会使用XML模式。 在火狐浏览器中当XHTML文档的Content-Type设置为xmlish时也会使用XML模式。 在__XML模式中节点名将会保留，所以有可能出现body或bOdY。 因此，如果通过XMLHttpRequest__技术从服务器载入XML到HTML文档时，节点名称将会保留。 对于元素来说nodeName和__tagName__是相同的。 但非元素节点也存在着nodeName属性，在这些节点中它有特殊的值： alert(document.nodeName) // #document 大多数节点类型都没有tagName属性，并且在IE中注释节点的tagName为!。 因此，通常来讲nodeName 跟 tagName 比起来更有意义一些。但tagName像是简化版本，因此，当你只处理元素节点时，你可以使用它。 innerHTML innerHTML是HTML5标准的一部分，详细请看链接 它允许以文本的方式访问节点内容。下例将会输出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 += "" chatDiv.innerHTML += "How you doing?" 但是实际上都做了些什么: 1. 旧的内容被清空 2. 新的内容被解析，并插入了进去。内容没有被追加，它重新生成了。 因此，所有的图片和其他的资源当进行+=操作后会重新载入，包括smile.gif。 幸运的是，有其他的方式来更新内容，这种方式不使用innerHTML，因此没有上面提到的问题。 nodeValue innerHTML只对元素节点有效。 对于其他类型的节点来说，他们使用nodeValue属性来获取内容。下例将说明它是如何在文本节点和注释节点工作的。 复制代码 代码如下: The text 上面的例子中，有些警告为空的，那是因为空白节点的缘故。注意到对于SCRIPT节点中nodeValue === null。那是因为SCRIPT为元素节点。元素节点，要使用innerHTML。 总结 nodeType 节点类型。最重要的是元素节点为1，文本节点为3，只读。 nodeName/tagName 大写的标签名。非元素节点来说nodeName还会有特殊的值，只读。 innerHTML 元素节点的内容，可写。 nodeValue 文本节点的内容，可写。 DOM节点根据类型，还有其他的一些属性。例如，INPUT标签有value和__checked__属性。A属性有href等等。 以上就是本文的全部内容了，希望大家能够喜欢。 您可能感兴趣的文章: javascript学习笔记（三）BOM和DOM详解 javascript获取dom的下一个节点方法 javascript 获取HTML DOM父、子、临近节点 JavaScript与DOM组合动态创建表格实例 javascript转换字符串为dom对象（字符串动态创建dom） Javascript入门学习第八篇 js dom节点属性说明 javascript firefox兼容ie的dom方法脚本 JavaScript 节点操作 以及DOMDocument属性和方法 浅析javascript中的DOM