详谈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 相关文章推荐
[Web]防止用户复制页面内容和另存页面的方法
Feb 06 Javascript
javascript下对于事件、事件流、事件触发的顺序随便说说
Jul 17 Javascript
关于UTF-8的客户端用AJAX方式获取GB2312的服务器端乱码问题的解决办法
Nov 30 Javascript
js中文逗号转英文实现
Feb 11 Javascript
js关于命名空间的函数实例
Feb 05 Javascript
60行js代码实现俄罗斯方块
Mar 31 Javascript
纯JS实现本地图片预览的方法
Jul 31 Javascript
js实现仿Discuz文本框弹出层效果
Aug 13 Javascript
关于不同页面之间实现参数传递的几种方式讨论
Feb 13 Javascript
vue.js如何更改默认端口号8080为指定端口的方法
Jul 14 Javascript
简单了解微信小程序的目录结构
Jul 01 Javascript
在vue中给后台接口传的值为数组的格式代码
Nov 12 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
针对初学PHP者的疑难问答(1)
2006/10/09 PHP
php include的妙用,实现路径加密
2008/07/29 PHP
PHP中使用crypt()实现用户身份验证的代码
2012/09/05 PHP
PHP中使用break跳出多重循环代码实例
2015/01/21 PHP
PHP实现权限管理功能示例
2017/09/22 PHP
许愿墙中用到的函数
2006/10/07 Javascript
jquery学习笔记 用jquery实现无刷新登录
2011/08/08 Javascript
js相册效果代码(点击创建即可)
2013/04/16 Javascript
js+css 实现遮罩居中弹出层(随浏览器窗口滚动条滚动)
2013/12/11 Javascript
JS将数字转换成三位逗号分隔的样式(示例代码)
2014/02/19 Javascript
前端必备神器 Snap.svg 弹动效果
2014/11/10 Javascript
jQuery类选择器用法实例
2014/12/23 Javascript
利用Javascript实现BMI计算器
2016/08/16 Javascript
javascript之IE版本检测超简单方法
2016/08/20 Javascript
微信小程序 vidao实现视频播放和弹幕的功能
2016/11/02 Javascript
bootstrap PrintThis打印插件使用详解
2017/02/20 Javascript
jQuery 添加样式属性的优先级别方法(推荐)
2017/06/08 jQuery
js获取对象,数组所有属性键值(key)和对应值(value)的方法示例
2019/06/19 Javascript
vue-router的钩子函数用法实例分析
2019/10/26 Javascript
JS数组方法concat()用法实例分析
2020/01/18 Javascript
vue中父子组件传值,解决钩子函数mounted只运行一次的操作
2020/07/27 Javascript
Express 配置HTML页面访问的实现
2020/11/01 Javascript
[48:44]2014 DOTA2国际邀请赛中国区预选赛5.21 TongFu VS HGT
2014/05/22 DOTA
[01:29]2017 DOTA2国际邀请赛官方英雄手办展示
2017/03/18 DOTA
简明 Python 基础学习教程
2007/02/08 Python
Python2.7+pytesser实现简单验证码的识别方法
2017/12/29 Python
python smtplib模块自动收发邮件功能(二)
2018/05/22 Python
Python3 执行Linux Bash命令的方法
2019/07/12 Python
Python基于xlrd模块处理合并单元格
2020/07/28 Python
eDreams巴西:廉价机票,酒店优惠和度假套餐
2017/04/14 全球购物
加拿大女包品牌:Matt & Nat
2017/05/12 全球购物
匈牙利超级网上商店和优惠:Alza.hu
2019/12/17 全球购物
三好学生个人先进事迹材料
2014/05/17 职场文书
仲裁协议书
2014/09/26 职场文书
2015年国税春训心得体会
2015/03/09 职场文书
python 对图片进行简单的处理
2021/06/23 Python