脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → 详谈javascript中DOM的基本属性

详谈javascript中DOM的基本属性

 更新时间：2015年02月26日 09:45:44   投稿：hebedich  
DOM节点是一个对象，它有着一些属性。其中有些是只读的，有些可以直接进行更改（updated on-the-fly）。今天我们就来具体探讨下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等等。

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

您可能感兴趣的文章:

相关文章

  • javascript css styleFloat和cssFloat

    javascript css styleFloat和cssFloat

    在写js操作css的过程中发现float属性在IE和firefox下对应的js脚本是不一样的，IE下对应得是 styleFloat，firefox,chorme,safari下对应的是cssFloat，可用in运算符去检测style是否包含此属性。
    2010-03-03
  • js打造数组转json函数

    js打造数组转json函数

    这里给大家分享的是一段使用js实现数组转换成json的函数代码，代码简洁易懂，并附上了使用方法，小伙伴们拿去试试。
    2015-01-01
  • webpack优化之代码分割与公共代码提取详解

    webpack优化之代码分割与公共代码提取详解

    这篇文章主要给大家介绍了关于webpack优化之代码分割与公共代码提取的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用webpack具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
    2019-11-11
  • javascript实现鼠标拖动改变层大小的方法

    javascript实现鼠标拖动改变层大小的方法

    这篇文章主要介绍了javascript实现鼠标拖动改变层大小的方法,涉及javascript操作鼠标事件及样式的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-04-04
  • JavaScript变量提升和严格模式实例分析

    JavaScript变量提升和严格模式实例分析

    这篇文章主要介绍了JavaScript变量提升和严格模式,结合实例形式分析了javascript变量提升和严格模式的原理及相关操作注意事项,需要的朋友可以参考下
    2019-01-01
  • IE下JS保存图片的简单实例

    IE下JS保存图片的简单实例

    下面小编就为大家带来一篇IE下JS保存图片的简单实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-07-07
  • javascript/jquery获取地址栏url参数的方法

    javascript/jquery获取地址栏url参数的方法

    本篇文章主要是对javascript/jquery获取地址栏url参数的方法进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助
    2014-03-03
  • 前端强制刷新、清空缓存各种方法总结

    前端强制刷新、清空缓存各种方法总结

    这篇文章主要介绍了在遇到数据或逻辑未成功更新问题时,如何通过刷新页面、设置、清除缓存等方法进行解决,文中通过图文将各种情况下清空缓存的方案介绍的非常详细,需要的朋友可以参考下
    2025-02-02
  • js+html5实现页面可刷新的倒计时效果

    js+html5实现页面可刷新的倒计时效果

    这篇文章主要为大家详细介绍了js+html5实现页面可刷新的倒计时效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-07-07
  • 浅谈让你的代码更简短，更整洁，更易读的ES6小技巧

    浅谈让你的代码更简短，更整洁，更易读的ES6小技巧

    这篇文章主要介绍了浅谈让你的代码更简短，更整洁，更易读的ES6小技巧，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-10-10

最新评论