详谈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 相关文章推荐
JavaScript 新手24条实用建议[TUTS+]
Jun 21 Javascript
JavaScript 变量基础知识
Nov 07 Javascript
jQuery jqgrid 对含特殊字符json 数据的 Java 处理方法
Jan 01 Javascript
在浏览器窗口上添加遮罩层的方法
Nov 12 Javascript
jquery插件珍藏(图片局部放大/信息提示框)
Jan 08 Javascript
加载远程图片时,经常因为缓存而得不到更新的解决方法(分享)
Jun 26 Javascript
JQuery中使文本框获得焦点的方法实例分析
Feb 28 Javascript
Bootstrap每天必学之前端开发框架
Nov 19 Javascript
微信小程序 image组件binderror使用例子与js中的onerror区别
Feb 15 Javascript
js每隔两秒输出数组中的一项(实例)
May 28 Javascript
vue-cli单页应用改成多页应用配置详解
Jul 14 Javascript
解决layui 表单元素radio不显示渲染的问题
Sep 04 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
php4的彩蛋
2006/10/09 PHP
PHP的FTP学习(二)
2006/10/09 PHP
PHP数组 为文章加关键字连接 文章内容自动加链接
2011/12/29 PHP
解析smarty模板中类似for的功能实现
2013/06/18 PHP
php图片合成方法(多张图片合成一张)
2017/11/25 PHP
PHP fopen函数用法实例讲解
2019/02/15 PHP
yii 框架实现按天,月,年,自定义时间段统计数据的方法分析
2020/04/04 PHP
Apply an AutoFormat to an Excel Spreadsheet
2007/06/12 Javascript
jquery 将disabled的元素置为enabled的三种方法
2009/07/25 Javascript
Javascript 判断Flash是否加载完成的代码
2010/04/12 Javascript
iframe异步加载实现点击左边菜单加载右边内容实例讲解
2013/03/04 Javascript
Javascript中的五种数据类型详解
2014/12/26 Javascript
使用RequireJS优化JavaScript引用代码的方法
2015/07/01 Javascript
将html页面保存成图片,图片写入pdf的实现方法(推荐)
2016/09/17 Javascript
微信小程序手势操作之单触摸点与多触摸点
2017/03/10 Javascript
前端防止用户重复提交js实现代码示例
2018/09/07 Javascript
JavaScript简单实现的仿微博留言功能示例
2019/01/17 Javascript
JS几个常用的函数和对象定义与用法示例
2020/01/15 Javascript
[05:10]2014DOTA2国际邀请赛 通往胜利之匙赛场探秘之旅
2014/07/18 DOTA
Python学习笔记_数据排序方法
2014/05/22 Python
Ubuntu 14.04+Django 1.7.1+Nginx+uwsgi部署教程
2014/11/18 Python
python+opencv实现动态物体追踪
2018/01/09 Python
Python网络编程之TCP套接字简单用法示例
2018/04/09 Python
django 微信网页授权认证api的步骤详解
2019/07/30 Python
如何定义TensorFlow输入节点
2020/01/23 Python
在tensorflow中设置使用某一块GPU、多GPU、CPU的操作
2020/02/07 Python
python实时监控logstash日志代码
2020/04/27 Python
美国排名第一的在线葡萄酒商店:Wine.com
2016/09/07 全球购物
Meli Melo官网:名媛们钟爱的英国奢侈手包品牌
2017/04/17 全球购物
公司周年庆典标语
2014/10/07 职场文书
工程技术员岗位职责
2015/04/11 职场文书
餐饮店长岗位职责
2015/04/14 职场文书
户外拓展训练感想
2015/08/07 职场文书
写作技巧:如何撰写一份优秀的营销策划书
2019/08/13 职场文书
关于python3 opencv 图像二值化的问题(cv2.adaptiveThreshold函数)
2022/04/04 Python
HTML5页面打开微信小程序功能实现
2022/09/23 HTML / CSS