DocumentFragment 不支持 innerHTML

在需要多次使用 innerHTML 的地方,一般是推荐用 DocumentFragment 来缓存,最后一次性插入 body,从而减少浏览器的渲染,提高性能,不过最近也发现一个 bug: DocumentFragment 不支持 innerHTML 这是个什么意思呢?考虑下面代码: let fragment=document.createDocumentFragment(); fragment.innerHTML='<p>test</p>'; console.log(fragmen…

火狐不支持innerText属性，只支持innerHTML属性

做的一个js的小程序放到火狐上用不了了,原因是innerText不是标准属性,换成innerHTML属性就好,但是可能需要把html标签给去掉…

火狐对innerHtml的支持问题

最新的Firefox是支持innerHTML的,但是不支持innerText.解决办法是将innerText换成textContent. $.getJSON("/api/Articles", { page: page.PageValue, _class: "联合动态" }, function (data) { var i = 0; $("#divID")[0].innerHTML = ""; $.each(data.Artic…

Js之Dom学习-三种获取页面元素的方式、事件、innerText和innerHTML的异同

一.三种获取页面元素的方式: getElementById:通过id来获取 <body> <input type="text" value="请输入一个值:" id="txt"/> <input type="button" value="按钮" id="btn"/> <script> var txt=document.getElementB…

解决 innerHTML 在 IE6-IE9中不能赋值的bug

在MSDN可以了解跟多,关于innerHTML的介绍,但是在这里只要是解决表格部分问题 MSDN上有这样的记录: When using innerHTML to insert script, you must include the defer attribute in the script element. The innerHTML property is read-only on the col, colGroup, frameSet, html, head, style, table, …

全栈JavaScript之路（十九）HTML5 插入 html标记（一）innerHTML 与outerHTML

在须要给文档插入大量的html 标记下.通过DOM操作非常麻烦,你不仅要创建一系列的节点,并且还要小心地依照顺序把它们接结起来. 利用html 标签插入技术,能够直接插入html代码字符串,简单.高效! 下面插入html标签相关的扩展已经纳入html5 规范. 1.innerHTML 属性 2.outerHTML 属性 3.insertAdjacentHTML 方法 innerHTML 属性有两种模式.写模式与读模式. 在读模式下,返回的是html 代码字符串. 比如: <div id=&quo…

innerHTML、outerHTML、innerText、outerText的区别及兼容性问题

今天看了很多文章关于innerHTML.outerHTML.innerText.outerText的区别,都是很模糊的一个介绍,所以自己总结下这些区别以及一些重点内容.很多文章在描述这些区别的时候,都是只针对一点进行描述,所以很难完全理解这些的字面含义以及区别点. 一.区别描述如下:(书上形式的说法) innerHTML设置或获取位于对象起始和结束标签内的 HTML outerHTML设置或获取对象及其内容的 HTML 形式 innerText 设置或获取位于对象起始和结束标签内的文本 out…

DocumentFragment批量操作dom

DocumentFragment,文档片段,不属于文档树,其parentNode为null.当把一个DocumentFragment节点插入文档树时,插入的不是DocumentFragment自身,而是它的所有子孙节点.这使得DocumentFragment成了有用的占位符,暂时存放那些一次插入文档的节点.它还有利于实现文档的剪切.复制和粘贴操作. DocumentFragment批量插入节点示例 <ul id="list"></ul> // Create th…

innerHTML 和 innertext 以及 outerHTML

今天在制作firefox下支持复制的js代码的时候,用到了innerText,测试发现原来firefox支持innerHTML但不支持innerText. test.innerHTML: 也就是从对象的起始位置到终止位置的全部内容,包括Html标签. 上例中的test.innerHTML的值也就是"<span style="color:red">test1</span> test2 ". test.innerText: 从起始位置到终止位置的…

读书笔记：JavaScript DOM 编程艺术（第二版）

读完还是能学到很多的基础知识,这里记录下,方便回顾与及时查阅. 内容也有自己的一些补充. JavaScript DOM 编程艺术(第二版) 1.JavaScript简史 JavaScript由Netscape公司与Sun公司合作开发,在JavaScript之前,web浏览器只是显示文本文档的软件,JavaScript之后,网页内容不再局限于枯燥的文本,交互性显著改善.在JavaScript的第一个版本,即JavaScript 1.0版本,出现在1995年推出的Netscape Navigator…

jquery 源码解析节点遍历

jquery遍历,用于根据其相对于其他元素的关系来查找或选取html元素,以某项选择开始,并沿着这个选择移动,知道移动被称为对dom进行遍历 ☑ <div> 元素是 <ul> 的父元素,同时是其中所有内容的祖先. ☑ <ul> 元素是 <li> 元素的父元素,同时是 <div> 的子元素 ☑ 左边的 <li> 元素是 <span> 的父元素,<ul> 的子元素,同时是 <div> 的后代. ☑ &l…

DOM扩展札记

Selector API HTML5 DOM扩展 Element Traversal规范 Selector API 众多JavaScript库中,最常用的一个功能就是根据css选择符选择与某个模式匹配的DOM元素 Selector API Level1的核心是两个方法: querySelector.querySelectorAll 可以通过Document及Element的实例来调用他们.当使用Element调用时,首先会在整个文章中查询,然后取出在Element子节点中的元素返回.如果传入…

createDocumentFragment()用法总结

1.createDocumentFragment()方法,是用来创建一个虚拟的节点对象,或者说,是用来创建文档碎片节点.它可以包含各种类型的节点,在创建之初是空的. 2.DocumentFragment节点不属于文档树,继承的parentNode属性总是null.它有一个很实用的特点,当请求把一个DocumentFragment节点插入文档树时,插入的不是DocumentFragment自身,而是它的所有子孙节点,即插入的是括号里的节点.这个特性使得DocumentFragment成了占位符,暂…

JavaScript权威指南--脚本化文档

知识要点脚本化web页面内容是javascript的核心目标. 第13章和14章解释了每一个web浏览器窗口.标签也和框架由一个window对象所示.每个window对象有一个document对象,document对象表示窗口的内容,它就是本章的主题.尽管如此,Document对象并非独立的,它是一个巨大的API的核心对象,叫做文档对象模型(Document Object Model ,DOM),它代表和操作文档的内容. 本章开始部分解释DOM的基本框架,然后进一步解释以下内容: 如何在文档中…

Js极客之路 - 优化操作（性能优化）

1．因为每次For循环都会计算一次arr.length,所以有必要存储数组长度以减少计算.针对这篇文章(http://www.crimx.com/2015/04/21/should-array-length-be-cached-or-not/),V8引擎好像已经帮我们做了不变数据的缓存,不过个人认为还是很有必要的,像他说的,假若只有V8引擎做了此事(V8开发者有这样说吗?),我们做缓存,对于V8就当帮它咯,对于其他就是优化咯. //bad var arr=[1,2,3,...]; for(var…

Vue源码详细解析:transclude,compile,link,依赖,批处理...一网打尽，全解析!

用了Vue很久了,最近决定系统性的看看Vue的源码,相信看源码的同学不在少数,但是看的时候却发现挺有难度,Vue虽然足够精简,但是怎么说现在也有10k行的代码量了,深入进去逐行查看的时候感觉内容庞杂并且搞不懂代码的目的,同时网上的深入去仔细阐述Vue的compile/link/ expression parse/依赖订阅和收集/batcher的文章却不多,我自己读源码时,深感在这些环节可供参考的资料稀缺.网上较多的文章都在讲getter/setter.Mutation Observer和LRU缓…

javascript中一些常见的兼容性问题

下面是一些Javascript的IE和Firefox(火狐)兼容性的常用例子 1. document.formName.item("itemName") 问题说明:IE下,可以使用document.formName.item("itemName")或document.formName.elements["elementName"]; Firefox下,只能使用document.formName.elements["elementNam…

《JS修炼之道》—— 读后总结

本篇是基于<JS修炼之道>的记录性与总结性的文章,这本书从多种框架的角度,讲述了JS开发中的一些实用技巧. 比如Prototype,JQuery,Mootools,YUI,Dojo,Ext,不过我个人仅仅会点JQuery而已,因此也就专门只看JQuery的部分了. 任务1 动态选择方法及属性由于方法在js中也是一种属性,因此可以使用属性的方法来调用方法: var test = {a:func,b:20}; test.a(); test.b; 或者 test[a](); test[b]; 使用…

深入理解javascript描述元素内容的5个属性

× 目录 [1]innerHTML [2]outerHTML [3]innerText[4]outerText[5]textContent 前面的话 <p>This is a <i>simple</i> document</p> 上面这行代码中,<p>元素的内容是什么呢?答案一:内容是HTML字符串"This is a <i>simple</i> document":答案二:内容是纯文本字符串"…

createElement与createDocumentFragment的点点区别

在DOM操作里,createElement是创建一个新的节点,createDocumentFragment是创建一个文档片段. 网上可以搜到的大部分都是说使用createDocumentFragment主要是因为避免因createElement多次添加到document.body引起的效率问题,比如: var arrText=["1","2","3","4","5","6","…

DOM扩展之HTML5 插入标记

11.3.6 插入标记当需要在文档中插入大量的HTML标记时,通过DOM操作就会是非常麻烦的,相对而言,使用插入标记的技术,直接插入HTML字符串不仅简单而且更快.以下插入标记相关的DOM操作已经纳入了HTML5规范. 1. innerHTML 属性在读模式下,innerHTML属性返回调用元素所有的子节点对应的HTML标记,包括元素,注释和文本节点.在写模式下,innerHTML会根据指定的值创建新的DOM树,然后用该DOM树完全替换调用元素的所有的子节点. 不是所有的元素都支持inner…

上层建筑——DOM元素的特性与属性（dojo/dom-prop）

上一篇讲解dojo/dom-attr的文章中我们知道在某些情况下,attr模块中会交给prop模块来处理.比如: textContent.innerHTML.className.htmlFor.value disabled.checked等无状态特性对应于属性中的布尔变量事件的处理那这一节,我们便来看看prop对于属性的处理. 首先是一个标准名称字典,将要设置的属性名重新命名,避免与保留字的冲突: exports.names = { // properties renamed to avoi…

IE和firefox火狐在JS、css兼容区别

1.firefox不能对innerText支持. firefox支持innerHTML但却不支持innerText,它支持textContent来实现innerText,不过默认把多余的空格也保留了.如果不用textContent,如果字符串里面不包含HTML代码也可以用innerHTML代替. 2.禁止选取网页内容: 在IE中一般用js:obj.onselectstart=function(){return false;} 而firefox用CSS:-moz-user-select:none…

js-DOM，DOM扩展

DOM: 1. 了解节点的信息:nodeName(属性的标签名),nodeValue两个属性在取得信息之前要进行判断是不是节点,节点类型由12个数值常量进行表示 2.每个节点都有一个childNodes属性,其中保存着一个NodeList对象,它是一种类数据对象,用于保存一组有序的节点,可以通过位置来访问这些节点在访问NodeList中的节点,可以通过方括号,也可以通过item()方法: var firstChild=someNode.childNodes[0]; var firstChil…

JS学习笔记12_优化

一.可维护性优化 1.添加注释注释能够增强代码的可读性以及可维护性,当然,理想情况是满满的注释,但这不太现实.所以我们只需要在一些关键的地方添上注释: 函数和方法:尤其是返回值,因为直接看不出来大段代码(功能模块):说明模块功能复杂算法:写出关键点,方便理解 Hack:说明为了修复什么问题,当前方案是否完善,能否改进 2.“暗示”变量类型通过初始值来暗示,例如: var found = false; var count = 1; var name = ''; var student =…

JavaScript DOM 编程艺术（第2版）读书笔记 (7)

动态创建标记一些传统方法 document.write document.write()方法可以方便快捷的把字符串插入到文档里. 请把以下标记代码保存为一个文件,文件名就用test.html 好了. <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Test</title> </head>…

FF与IE对JavaScript和CSS的区别

一.FF与IE对JavaScript的区别 1. document.formName.item("itemName") 问题说明:IE下,可以使用document.formName.item("itemName")或document.formName.elements["elementName"]; Firefox下,只能使用document.formName.elements["elementName"]. 解决方法:统一…

高性能的JavaScript -- 读书笔记

高性能的JavaScript 一. 加载和运行将脚本放在底部脚本下载解析执行时,页面已经加载完成并显示在用户面前成组脚本减少外部脚本文件数量,整合成一个文件延迟脚本动态脚本元素非阻塞方式 XMLHttpRequest var xhr = new XMLHttpRequest(); xhr.open("get", "file.js", true); xhr.onreadystatechange = function() { if(xhr.rea…

《JavaScript高级程序设计》心得笔记-----第三篇章

第十章 1. DOM1级定义了一个Node接口,以Node类型实现(除IE以外),为了确保跨浏览器兼容,最好用nodeType属性与数字数值进行比较(someNode. nodeType==1),来检查节点的类型.检查节点类型,如果是一个元素,保存NodeName的值,对元素节点来说,NodeName保存的是元素的标签名,NodeValue的值始终为null. 2. 每个节点都有一个childNodes属性,其中保存着一个NodeList对象[类数组,有length属性[someNo…

Firefox 与 IE 对Javascript和CSS的区别

1. document.formName.item("itemName") 问题说明:IE下,可以使用document.formName.item("itemName")或document.formName.elements["elementName"]; Firefox下,只能使用document.formName.elements["elementName"]. 解决方法:统一使用document.formName.el…

【DocumentFragment 不支持 innerHTML】的更多相关文章