Tag: DOM

但为什么浏览器DOM经过十年的努力仍然如此缓慢呢？: 网页浏览器DOM自90年代后期就已经出现，但它仍然是性能/速度方面最大的限制之一。我们有来自谷歌，Mozilla，微软，Opera，W3C以及其他各种从事networking技术的机构的世界上最聪明的人，所以显然这不是一个简单的“哦，我们没有优化它“ 问题。我的问题是，如果我正在处理专门处理这个问题的networking浏览器的一部分，为什么我会这么难以使其运行得更快？我的问题不是问是什么让它变慢，而是问为什么它变得更快？这似乎与其他地方正在发生的事情背道而驰，比如性能接近C ++代码的JS引擎。快速脚本示例： for (var i=0;i<=10000;i++){ someString = "foo"; } 由于DOM缓慢的示例： for (var i=0;i<=10000;i++){ element.innerHTML = "foo"; } 根据要求提供一些细节：在基准testing之后，看起来这不是一个无法解决的缓慢问题，但是通常使用了错误的工具，而使用的工具取决于您在跨浏览器上进行的操作。看起来浏览器之间的DOM效率差别很大，但是我原来推测dom很慢并且无法解决似乎是错误的。我对Chrome，FF4和IE 5-9进行了testing，您可以在此图表中看到每秒的操作： Chrome在使用DOM API时闪电般快，但使用.innerHTML运算符的速度要慢得多（速度要慢1000倍），但FF在某些领域比Chrome要糟糕（例如，追加testing比Chrome），但是InnerHTMLtesting运行得比chrome快得多。 IE浏览器似乎实际上在使用DOM append时变得越来越糟糕，并且在5.5版本（即IE9中的73ops /秒，现在在IE9中为51 ops / sec）上进展时，在innerHTML上更好。我在这里有testing页面： http://jsperf.com/browser-dom-speed-tests2 有趣的是，看起来不同的浏览器在生成DOM时似乎都面临着不同的挑战。为什么这里有这样的差距？

如何将所有的HTML元素的孩子使用JavaScript的另一个家长？: 想像： <div id="old-parent"> <span>Foo</span> <b>Bar</b> Hello World </div> <div id="new-parent"></div> 可以编写什么JavaScript来将所有子节点（包括元素和文本节点）从old-parent到没有jQuery的new-parent ？我不关心节点之间的空白，虽然我希望能够赶上stream浪的Hello World ，但他们也需要按原样迁移。编辑要清楚，我想最终： <div id="old-parent"></div> <div id="new-parent"> <span>Foo</span> <b>Bar</b> Hello World </div> 从这是一个拟议的副本的问题的答案将导致： <div id="new-parent"> <div id="old-parent"> <span>Foo</span> <b>Bar</b> Hello World </div> </div>

jQueryfind类的下一个元素: 我试图find一个类的“错误”，并打墙的下一个元素。在jQuery的网站上看演示，这应该工作，但不。 $("button[disabled]").next().text("this button is disabled"); <div> <button disabled="disabled">First</button> <span>no overwrite</span> <span class="error"></span> </div> <div> <button>Second</button> <span></span> </div> <div> <button disabled="disabled">Third</button> <span>no overwrite</span> <span class="error"></span> </div> 我试图find问题的元素，如上面的button后的跨度或div或任何东西。所以禁用的button行应该阅读，'不覆盖这个button是不明确的' 我试过了 $("button[disabled]").next(".error").text("this button is disabled"); 无济于事。

获取特定types的第一个子节点 – JavaScript: 是否有可能获得一个孩子DOM元素，这将是一个特定types的第一个孩子。例如，在这两个例子中，我想获得img元素： <a id="mylink" href="#"><img src="myimage.jpg" /></a> 与 <a id="mylink" href="#"><span></span><img src="myimage.jpg" /></a>

在JavaScript中将em转换为px（并获取默认字体大小）: 在某些情况下，可以获得实时测量的精确像素宽度。例如，假设您有一个带有CSS属性的元素（如边框或填充），这是以ems度量的，您需要获取边框或填充的精确像素宽度。有一个涉及这个话题的现有问题：如何通过使用JavaScript或JQuery获取像素的默认字体大小？这个问题是关于获取默认字体大小 – 这是必要的，以便将相对em值转换为确切的px值。这个答案有一个很好的解释如何得到一个元素的默认字体大小：由于ems可以测量宽度，所以你可以通过创build一个1000 ems长的div，然后将它的client-width属性除以1000来计算确切的像素字体大小。我似乎记得ems被截断到最接近的千分之一，所以你需要1000埃姆避免像素结果的错误截断。所以，使用这个答案作为指导，我写了下面的函数来获取默认字体大小： function getDefaultFontSize(parentElement) { parentElement = parentElement || document.body; var div = document.createElement('div'); div.style.width = "1000em"; parentElement.appendChild(div); var pixels = div.offsetWidth / 1000; parentElement.removeChild(div); return pixels; } 一旦你有了默认的字体大小，你可以通过将ems乘以元素的默认字体大小并舍入结果来将任意宽度转换为px宽度： Math.round(ems * getDefaultFontSize(element.parentNode)) 问题： getDefaultFontSize理论上应该是一个简单的副作用自由函数，它返回默认的字体大小。但它有一个不幸的副作用：它修改DOM！它附加一个孩子，然后移除孩子。追加孩子是必要的，以获得一个有效的offsetWidth属性。如果不将子div追加到DOM，则offsetWidth属性保持为0，因为该元素从不呈现。尽pipe我们立即删除了子元素，但这个函数仍然可能会产生意想不到的副作用，比如触发父元素的事件（如Internet Explorer的onpropertychange或W3C的DOMSubtreeModified事件）。问：是否有任何方法可以写一个真正的副作用免费getDefaultFontSize()函数，不会意外触发事件处理程序或导致其他意想不到的副作用？

如何创build一个空的，非空的jQuery对象准备好追加？: 我想附加一些HTML到一个空的非空的jQuery对象只在循环中，但它不工作，除非我创build一个对象，并在创build过程中添加一个HTML标记。我怎样才能创build一个空的jQuery对象，并能够稍后添加HTML？ //var $new = $().add(""); //can't use this object in the loop //var $new = $([]); //can't use this object in the loop //var $new = $(); //can't use this object in the loop //var $new = $("#nonexistingelement"); //can't use this object in the loop var $new = $().add("<tr>"); //works but I don't want […]

什么是DOM级别？: 我听说过以前的文章中提到的DOM级别2和DOM级别3。这些抽象结构是否像ISO OSI模型那样具有1-7层，但只是被松散地遵循？

我无法用“！重要”规则注入样式: 我试图用这个代码注入一个样式： document.body.style.color='green!important'; 根据CSS级联引用，通过应用!important规则，我可以胜过起源和特异性。我试图用Firefox Firebug注入到www.google.com，但是没有运气。如何用!important规则注入前景色？

JQuery在淡出之后删除DOM元素: 我想在淡出之后立即删除一个DOM元素。我到目前为止所做的是 $(element).click(function() { $(this).fadeOut(500, function() { $().remove(this); }); }); 但现在我总是在Firebug中得到这个错误： http : //dl.getdropbox.com/u/5912/Jing/2009-02-04_1109.png 我想这是因为调用callback函数时，fadeOut函数并不是真的完成。而且我不能把$.remove()部分放在fadeOut调用之后，否则它会立即被删除。那么你知道我能做得更好吗？

有没有一个jQuery的select器/方法来find一个特定的父级元素水平了？: 考虑下面的HTML。如果我有对<button>元素的JSON引用，在两种情况下如何获得对外部<tr>元素的引用 <table id="my-table"> <tr> <td> <button>Foo</button> </td> <td> <div> <button>Bar</button> </div> </td> </tr> </table> <script type="text/js"> $('#table button').click(function(){ //$(this).parent().parent() will work for the first row //$(this).parent().parent().parent() will work for the second row //is there a selector or some magic json one liner that will climb //the DOM tree until it hits a TR, or […]