详谈javascript中DOM的基本属性


Posted in Javascript onFebruary 26, 2015

结构和内容属性

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 相关文章推荐
jQuery实现类似淘宝购物车全选状态示例
Jun 26 Javascript
JavaScript小技巧整理
Dec 30 Javascript
利用CSS、JavaScript及Ajax实现图片预加载的方法
Nov 29 Javascript
jQuery实现在新增加的元素上添加事件方法案例分析
Feb 09 Javascript
JS使用面向对象技术实现的tab选项卡效果示例
Feb 28 Javascript
JS实现模糊查询带下拉匹配效果
Jun 21 Javascript
详解Vue CLI3配置解析之css.extract
Sep 14 Javascript
详解React 的几种条件渲染以及选择
Oct 23 Javascript
JavaScript内置对象math,global功能与用法实例分析
Jun 10 Javascript
微信小程序如何利用getCurrentPages进行页面传值
Jul 01 Javascript
微信小程序点击保存图片到本机功能
Dec 13 Javascript
Vue 使用iframe引用html页面实现vue和html页面方法的调用操作
Nov 16 Javascript
jqueryUI里拖拽排序示例分析
Feb 26 #Javascript
Jquery的基本对象转换和文档加载用法实例
Feb 25 #Javascript
jQuery操作JSON的CRUD用法实例
Feb 25 #Javascript
javascript实现复选框超过限制即弹出警告框的方法
Feb 25 #Javascript
javascript获得当前的信息的一些常用命令
Feb 25 #Javascript
javascript实现图像循环明暗变化的方法
Feb 25 #Javascript
JS往数组中添加项性能分析
Feb 25 #Javascript
You might like
AMFPHP php远程调用(RPC, Remote Procedure Call)工具 快速入门教程
2010/05/10 PHP
PDO::lastInsertId讲解
2019/01/29 PHP
老鱼 浅谈javascript面向对象编程
2010/03/04 Javascript
工作中常用到的JS表单验证代码(包括例子)
2010/11/11 Javascript
映彩衣的js随笔(js图片切换效果)
2011/07/31 Javascript
JS 有趣的eval优化输入验证实例代码
2013/09/22 Javascript
原生js ActiveXObject获取execl里面的值
2013/11/01 Javascript
js实现幻灯片播放图片示例代码
2013/11/07 Javascript
js函数定时器实现定时读取系统实时连接数
2014/04/30 Javascript
用JavaScript实现页面重定向功能的教程
2015/06/04 Javascript
辨析JavaScript中的Undefined类型与null类型
2016/05/26 Javascript
JavaScript实现广告弹窗效果
2016/08/09 Javascript
WEB前端实现裁剪上传图片功能
2016/10/17 Javascript
Node学习记录之cluster模块
2017/05/31 Javascript
详解vue-router传参的两种方式
2018/09/10 Javascript
JS通过识别id、value值对checkbox设置选中状态
2020/02/19 Javascript
vue 单页应用和多页应用的优劣
2020/10/22 Javascript
Python利用ansible分发处理任务
2015/08/04 Python
python 创建一个空dataframe 然后添加行数据的实例
2018/06/07 Python
详解Python 调用C# dll库最简方法
2019/06/20 Python
解决python 文本过滤和清理问题
2019/08/28 Python
pygame实现俄罗斯方块游戏(基础篇1)
2019/10/29 Python
python如何基于redis实现ip代理池
2020/01/17 Python
Python插入Elasticsearch操作方法解析
2020/01/19 Python
几款好用的python工具库(小结)
2020/10/20 Python
美国玛丽莎收藏奢华时尚商店:Marissa Collections
2016/11/21 全球购物
马来西亚网上购物:Youbeli
2018/03/30 全球购物
荷兰领先的百货商店:De Bijenkorf
2018/10/17 全球购物
行政专员岗位职责
2014/01/02 职场文书
电大毕业自我鉴定
2014/02/03 职场文书
餐饮采购员岗位职责
2014/03/15 职场文书
班子成员四风问题自我剖析材料
2014/09/29 职场文书
大学生入党积极分子党校学习思想汇报
2014/10/25 职场文书
党员自评材料范文
2014/12/17 职场文书
安装工程师岗位职责
2015/02/13 职场文书
军事理论课感想
2015/08/11 职场文书