在IE浏览器及其它浏览器下对于HTML DOM的识别并非任何情况下都是一致的,主要是IE和非IE两个阵营的表现异同。
如有以下这样一段代码:
<div id="test">
<p>文字</p>
<p>文字</p>
<p>文字</p>
</div>
单从HTML结构表象来看,ID test 一共有3个P元素子节点。其实,在IE下,这种表象就是实质,而在非IE下,表象的外衣将顷刻被撕开。
为了看出这种区别,我们可以遍历test的子节点,并将其节点个数及节点类型都打印出来:
<script type="text/javascript">
var x = document.getElementById("test");
var xc = x.childNodes;
var xcl = xc.length;
for(var i=0;i<xcl;i++){
document.write("nodeName = " + xc[i].nodeName + "; nodeType = " + xc[i].nodeType + "<br />");
</script>
IE的打印结果为:
nodeName = P; nodeType = 1
nodeName = P; nodeType = 1
nodeName = P; nodeType = 1
非IE的打印结果为:
nodeName = #text; nodeType = 3
nodeName = P; nodeType = 1
nodeName = #text; nodeType = 3
nodeName = P; nodeType = 1
nodeName = #text; nodeType = 3
nodeName = P; nodeType = 1
nodeName = #text; nodeType = 3
显而易见,IE的打印结果和我们所说的表象一样:有3个子节点,并且都为P元素;而非IE则表现出极大的差异:居然打印出了7个子节点,当然也包括3个P元素子节点在内,除此之外还多了4个nodeType=3的子节点,我们都知道节点类型为3的节点属于文本节点,但从那段HTML中可以看P与P之间并无其它的内容出现,那这4个文本节点是怎样凭空出现的呢?
在这种情况下,唯一有可能的原因就是在HTML的书写上,因为这段HTML并不是连续的书写,而是每个节点间都用回车换行了,并且正好出现了4次换行,也许非IE把换行也当成了一个节点。
为了测试,我们可以将那段HTML改写为:
<div id="test"><p>文字</p><p>文字</p><p>文字</p></div>
IE的打印结果为:
nodeName = P; nodeType = 1
nodeName = P; nodeType = 1
nodeName = P; nodeType = 1
非IE的打印结果为:
nodeName = P; nodeType = 1
nodeName = P; nodeType = 1
nodeName = P; nodeType = 1
预想中的情况出现了,这回不论什么浏览器打印出来的都只是3个P子节点。
原因是找到了,但正是这个原因才让人郁闷。因为这个差异,那要写一段可读性强的HTML也不那么简单了。想想看,不换行的代码那将是多么恐怖的东西啊- -!
分享到:
相关推荐
删除DOM节点删除DOM节点删除DOM节点删除DOM节点删除DOM节点删除DOM节点删除DOM节点删除DOM节点删除DOM节点删除DOM节点删除DOM节点删除DOM节点删除DOM节点删除DOM节点删除DOM节点删除DOM节点删除DOM节点删除DOM节点...
vdom-to-html, 将虚拟DOM节点转换为 HTML vdom-to-html 将虚拟dom节点转换为 HTML安装npm install --save vdom-to-html用法var VNode = require('virtual-dom
html DOM 节点的各种高度属性,避免开发理解上的误区
JS原生判断DOM节点是否存在页面中 JavaScript原生函数没有提供判断DOM节点是否存在方法,我们通常获取DOM节点几乎都是document.getElement..方法,会返回一个object数组合集,我们可以通过object[0],object[1]这样...
JavaScript获取HTML DOM节点元素的方法的总结
使用Jsoup库解析HTML、XML或URL链接中的DOM节点 Jsoup进行Html的Dom解析
dom节点的添加与删除适合初级阅读,有解说
这是js的HTML DOM节点API,自己整理的,希望对大家有所帮助!
dom-to-image:使用HTML5 canvas从DOM节点生成图像
HTML DOM DOM 首页 DOM 简介 DOM 节点 DOM 节点树 DOM 节点访问 DOM 节点信息 DOM How To DOM 参考 DOM 总结 DOM 实例 DOM 实例 DOM 对象 DOM Window DOM Navigator DOM Screen DOM History DOM ...
DOM节点中元素节点与文本节点操作方法
谷歌获取dom插件 ,只要能分析页面dom ,就能爬取你想要的信息,包括简历等 , js编写
在Web应用程序特别是Web2.0程序开发中,经常要获取页面中某个元素,然后更新该元素的样式、内容等。如何获取要更新的元素,是首先要解决的问题。令人欣慰的是,使用JavaScript获取节点的方法有很多种,这里简单做...
注意:换行在浏览器中作为text节点,需要进行过滤 element.firstChild:该元素的第一个子节点。 element.lastChild:该元素最后一个子节点。 3、父节点 element[removed] 4、兄弟节点 element.previousSibling:返回...
• DOM 浏览器 • DOM 定位节点 节点操作 • DOM 获取节点 • DOM 改变节点 • DOM 删除节点 • DOM 替换节点 • DOM 创建节点 • DOM 添加节点 • DOM 克隆节点 • DOM HttpRequest • Next Page XML 文档对象模型...
01_dom节点关系
在 HTML DOM 中,所有事物都是节点。DOM 是被视为节点树的 HTML。 根据 W3C 的 HTML DOM 标准,HTML 文档中的所有内容都是节点: 整个文档是一个文档节点 每个 HTML 元素是元素节点 HTML 元素内的文本是文本节点 每...
jQuery DOM节点操作源码,适合初学者哦,可以下载下来作为参考资料的。
NULL 博文链接:https://onestopweb.iteye.com/blog/2224155