详谈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来进行检测。

  下面是实现代码:

  

复制代码 代码如下:

  <body>

  <div>Allowed readers:</div>

  <ul>

  <li>John</li>

  <li>Bob</li>

  </ul>

  <!-- a comment node -->

  <script>

  var childNodes = document.body.childNodes

  for(var i=0; i<childNodes.length; i++) {

  if (childNodes[i].nodeType != 1) continue

  alert(childNodes[i])

  }

  </script>

  </body>

  *思考

  下面这段代码将提示什么内容:

  

复制代码 代码如下:

  <!DOCTYPE HTML>

  <html>

  <body>

  <script>

  alert(document.body.lastChild.nodeType)

  </script>

  </body>

  </html>

  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的所有的内容并且用新的内容进行替换。

  

复制代码 代码如下:

  <body>

  <p>The paragraph</p>

  <div>And a div</div>

  <script>

  alert( document.body.innerHTML ) // read current contents

  document.body.innerHTML = 'Yaaahooo!' // replace contents

  </script>

  </body>

  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 += "<div>Hi <img src='smile.gif'/> !</div>"

  chatDiv.innerHTML += "How you doing?"

  但是实际上都做了些什么:

  1. 旧的内容被清空

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

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

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

  nodeValue

  innerHTML只对元素节点有效。

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

  

复制代码 代码如下:

  <body>

  The text

  <!-- A comment -->

  <script>

  for(var i=0; i<document.body.childNodes.length; i++) {

  alert(document.body.childNodes[i].nodeValue)

  }

  </script>

  </body>

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

  总结

  nodeType

    节点类型。最重要的是元素节点为1,文本节点为3,只读。

  nodeName/tagName

    大写的标签名。非元素节点来说nodeName还会有特殊的值,只读。

  innerHTML

    元素节点的内容,可写。

  nodeValue

    文本节点的内容,可写。

  DOM节点根据类型,还有其他的一些属性。例如,INPUT标签有value和__checked__属性。A属性有href等等。

  以上就是本文的全部内容了,希望大家能够喜欢。