详谈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不像看起来那么简单。它有一些陷阱在正等待着菜鸟们,甚至有些时候经验丰富的程序员也无法避免。

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wgfjdd.html