Tag: DOM

Javascript的querySelector与getElementById

我听说querySelector ＆ querySelectorAll是selectDOM元素的新的更好的方法。 这是真的？ querySelector ＆ querySelectorAll比getElementById ＆ getElementsByClassName更好吗？ 我应该一般使用哪个？ 我是networking编程新手！ 谢谢！！！

使用jQuery添加DOM元素的最佳方法

所以我已经看到了三种添加html / DOM元素到页面的方法。 我很好奇他们每个人的优点和缺点。 1 – 传统的JavaScript 我相信直接的JS方法是通过构造每个元素，设置属性，然后附加它们。 例： var myRow = document.createElement("tr"); myRow.class = "myClass"; var firstTD = document.createElement("td"); firstTD.innerHTML = "first"; myRow.appendChild(firstTD); var secondTD = document.createElement("td"); secondTD.innerHTML = "second"; myRow.appendChild(secondTD); document.getElementById("myContainer").appendChild(myRow); 2 – 通过jQuery添加一个htmlstring 我注意到，我看到的大多数jQuery示例通常只是追加一个htmlstring。 例： $("#myContainer").append('<tr class="myClass"><td>first</td><td>second</td></tr>'); 3 – jQuery的.clone（） 我也在jQuery中看到了很多用法和对.clone（）的引用。 例： $("#myContainer").append($(".myClass").Clone()); 我很想听听别人对此的评论。 （此外，这似乎是一个'社区wiki'的好候选人，但我不太熟悉他们。有人评论，让我知道是否应该是？谢谢）

SYNTAX_ERR：DOMexception12 – 嗯

我一直在为使用HTML5 Rock的幻灯片代码的客户端devise一个小型幻灯片/公共显示器。 我遇到了一个DOM Exception 12 – 一个与CSSselect器有关的语法错误 – 当我用它来瞎猜…但我无法追溯到我在代码中做出的任何更改。 我想这可能是因为我添加了function而被发现的东西。 我已经追溯到这个对象（现场版本）： var SlideShow = function(slides) { this._slides = (slides || []).map(function(el, idx) { return new Slide(el, idx); }); var h = window.location.hash; try { this.current = h; } catch (e) { /* squeltch */ } this.current = (!this.current) ? "landing-slide" : this.current.replace('#', ''); if (!query('#' […]

从一个子元素获取文档对象

假设我有一个body元素中的DIV元素的jQuery对象。 我想通过遍历来获取文档对象。 可以吗？ 注意：在我的情况下，window.document不是一个选项。 谢谢。

我如何testing两个jQuery包装的DOM元素是否相同？

我在jQuery中编写了一个可sorting的列表实现（臭名昭着的scroll-in-div问题的b / c，任何新的解决scheme？）。 但是，我不知道如何比较jQuery中的元素（在mousedown / mouseup上触发）。 在原型中，它总是ele.domNode。 这是我正在努力实现的… <div id="cheese"></div> <div id="burger"></div> <script> // Some dom nodes wrapped in jquery var ele1 = $('#cheese'); var ele2 = $('#burger'); var ele3 = $('#burger'); // Is the dom node wrapped in ele1 (#cheese) the same as in ele2 (#burger)? if (ele1 == ele2) { // Should never […]

检查元素是否在jQuery中的另一个元素之前或之后

让我们假设我有这个标记 <h3 id="first">First</h3> <p>Hi</p> <p>Hello</p> <h3 id="second">Second</h3> <p>Bye</p> <p>Goodbye</p> 我如何以编程方式检查一个元素，如p是否在第一个h3之后，第二个h3之前，使用jQuery？ 我正在尝试做这样的事情： $(p).each(function(){ if($(this).isAfter("#first") && $(this).isBefore("#second")) { // do stuff } });

如何replaceAngularJS指令链接函数中的元素？

我创build了一个需要用一个可以包含任何HTML代码的dynamic模板replace自己的<row> AngularJS指令（ <row>标记不能在DOM中出现）。 使用replace: true的问题是，它不能与表的<tr>标签一起工作，而且模板是dynamicselect的。 所以我试图find一种方法来replace链接函数中的元素，但没有成功。 使用jQuery的.replaceWith()打破ngRepeat为未知的原因。 任何提示？ 这是小提琴

注意DOM的变化，优雅的方式

我需要注意特定DOM元素的任何子元素的属性更改。 到目前为止，我一直在使用突变事件 。 问题是 – 他们是越野车：例如在铬， DOMAttrModified没有被解雇，但DOMSubtreeModified是。 这个问题很容易解决：因为根据规范，如果任何其他事件被触发， DOMSubtreeModified被触发，所以我只是听取了DOMSubtreeModified 。 无论如何，在最近的版本中，如果一个属性被修改，Chromium会停止发射任何东西。 然而，新的Mutation Observer API完美地工作。 到目前为止，我只需要对某个特定元素的子树进行任何修改就发起一个callback – 仅仅因为没有别的东西会被改变 – 所以我通过使用突变事件和变异观察者（当可用时）来解决我的问题一段代码。 然而，现在我需要对事件进行更强大的过滤（例如，在新节点上，在已删除的节点上） – 那么是否有一个库，可能是一个jQuery插件 ，这将允许我优雅地使用这两个 API – MutationObserver如果可用，则将突变事件作为回退，并具有针对特定事件types（例如添加的元素，属性更改）进行筛选的function。 例如 $("#test").watch({onNewElement: 1}, function(newElement){}) $("#test").watch({onNewAttribute: 1}, function(modifiedElement) {}) 或者没有jQuery watchChanges("#test", {onNewElement: 1}, function(newElement){}) watchChanges("#test", {onNewAttribute: 1}, function(modifiedElement){})

构造函数在哪里，例如`new Image（）`和`new Option（）`是否logging在案？

不是在Mozilla，而是： 对于image ： 感谢Rickard的鉴定 http://www.w3.org/html/wg/drafts/html/CR/embedded-content-0.html#dom-image 它提供了DOM接口的构造函数细节。 可供option ： http://www.w3.org/html/wg/drafts/html/CR/forms.html#dom-option 也给出了DOM接口的构造函数的细节。 （使用： http://www.google.com/search?client=ubuntu&channel=fs&q=constructor+site%3Adev.w3.org%2Fhtml5&ie=utf-8&oe=utf-8 ） 鉴于这些参考文献， mozilla.org是否如下文所述是相同的。 具体来说，在mozilla.org是像在当代背景下logging的new Image()和new Option()构造函数？ 古代文献 ， Image()在http://devedge-temp.mozilla.org/library/manuals/2000/javascript/1.3/reference/image.html中定义 Option()定义在http://devedge-temp.mozilla.org/library/manuals/2000/javascript/1.3/reference/option.html 描述了这些构造函数的存在，暗示它们是内在的JavaScript语言组件，这是不正确的。 javascript: alert([new Image(), '\n\n', new Option()]) 通过展示清楚地表明他们的显性存在 [object HTMLImageElement]， ，[object HTMLOptionElement] 修辞，怎么样： javascript:alert([new Anchor(), new Preserve(), new Form(),,, ]) 还有什么其他的原始元素DOM构造函数？ 或者，没有更多？ 对Mozilla使用的DOM范式是否是讽刺的，是否与new Image()和new Option()等的编程定义合并，解释了它们的缺失？ 然而，这些构造函数显然不是JavaScript的语言规范的内在，当然也不是HTML。 那么，究竟在哪里有一个正确的当前范式（来源于mozilla.org ）来描述它们，包括参数types和顺序？ 引用： HTMLImageElement Mozilla文档 当前在Mozilla中使用Image()构造函数的先例 堆栈溢出相关的问题 […]

如何在jQuery中获得屏幕上的可见元素对象？

我有一个DOM对象的列表，它比屏幕高度区域长。 我只需要检测屏幕上的可见对象就可以制作类似于时间线树视图的东西。 （ 如下图所示 ）： 我的DOM看起来像这样： <!– elements visibility on screen to be DETECTED –> <div id="elements"> <div id="elem-1">Lorem ipsum</div> <div id="elem-2">Lorem ipsum</div> <div id="elem-3">Lorem ipsum</div> <div id="elem-4">Lorem ipsum</div> <div id="elem-5">Lorem ipsum</div> <div id="elem-6">Lorem ipsum</div> <div id="elem-7">Lorem ipsum</div> <div id="elem-8">Lorem ipsum</div> </div> <!–elements visibility on screen to be AFFECTED –> <ul id="timeline"> <li view-id="elem-1">Elem-1</li> <li […]