详谈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精华代码集
Jan 24 Javascript
JSON.stringify转换JSON时日期时间不准确的解决方法
Aug 08 Javascript
JS基于cookie实现来宾统计记录访客信息的方法
Aug 04 Javascript
JS实现的Select三级下拉菜单代码
Aug 20 Javascript
AngularJS 模块详解及简单实例
Jul 28 Javascript
通过BootStrap实现轮播图的实际应用
Sep 26 Javascript
weUI应用之JS常用信息提示弹层的封装
Nov 21 Javascript
JS+html5制作简单音乐播放器
Sep 13 Javascript
详解原生js实现offset方法
Jun 15 Javascript
vue多个元素的样式选择器问题
Nov 29 Javascript
Vue优化:常见会导致内存泄漏问题及优化详解
Aug 04 Javascript
javascript使用canvas实现饼状图效果
Sep 08 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+mysql写的留言本
2006/10/09 PHP
PHP 事件机制(2)
2011/03/23 PHP
php定时删除文件夹下文件(清理缓存文件)
2013/01/23 PHP
PHP array_multisort() 函数的深入解析
2013/06/20 PHP
php二维数组用键名分组相加实例函数
2013/11/06 PHP
smarty学习笔记之常见代码段用法总结
2016/03/19 PHP
PHP简单判断字符串是否包含另一个字符串的方法
2016/03/25 PHP
CI框架(CodeIgniter)实现的数据库增删改查操作总结
2018/05/23 PHP
JS中字符串trim()使用示例
2015/05/26 Javascript
jQuery实现自动切换播放的经典滑动门效果
2015/09/12 Javascript
关于Iframe父页面与子页面之间的相互调用
2016/11/22 Javascript
根据输入邮箱号跳转到相应登录地址的解决方法
2016/12/13 Javascript
微信小程序 免费SSL证书https、TLS版本问题的解决办法
2016/12/14 Javascript
vue侧边栏动态生成下级菜单的方法
2018/09/07 Javascript
如何用原生js写一个弹窗消息提醒插件
2019/05/24 Javascript
Vue 自定义指令实现一键 Copy功能
2019/09/16 Javascript
关于vue3.0中的this.$router.replace({ path: '/'})刷新无效果问题
2020/01/16 Javascript
js实现微信聊天效果
2020/08/09 Javascript
Python深入学习之装饰器
2014/08/31 Python
python中元类用法实例
2014/10/10 Python
python3+pyqt5+itchat微信定时发送消息的方法
2019/02/20 Python
python库matplotlib绘制坐标图
2019/10/18 Python
Tensorflow tf.nn.atrous_conv2d如何实现空洞卷积的
2020/04/20 Python
计算Python Numpy向量之间的欧氏距离实例
2020/05/22 Python
python利用proxybroker构建爬虫免费IP代理池的实现
2021/02/21 Python
VSCode中autopep8无法运行问题解决方案(提示Error: Command failed,usage)
2021/03/02 Python
Lookfantastic德国官网:英国知名美妆购物网站
2017/06/11 全球购物
缓解脚、腿和背部疼痛:Z-CoiL鞋
2019/03/12 全球购物
2014年英语教师工作总结
2014/12/03 职场文书
初中开学典礼新闻稿
2015/07/17 职场文书
2016年圣诞节义工活动总结
2016/04/01 职场文书
2016年小学推普宣传周活动总结
2016/04/06 职场文书
一个成功的互联网创业项目,必须满足这些要求
2019/08/23 职场文书
PyQt5爬取12306车票信息程序的实现
2021/05/14 Python
python基于tkinter实现gif录屏功能
2021/05/19 Python
Python实现学生管理系统并生成exe可执行文件详解流程
2022/01/22 Python