Tag: DOM

获取子节点索引: 在直接的JavaScript（即没有扩展，如jQuery等），有没有一种方法来确定其父节点内的子节点的索引，而不需要迭代和比较所有的子节点？例如， var child = document.getElementById('my_element'); var parent = child.parentNode; var childNodes = parent.childNodes; var count = childNodes.length; var child_index; for (var i = 0; i < count; ++i) { if (child === childNodes[i]) { child_index = i; break; } } 有没有更好的方法来确定孩子的指数？

我怎样才能得到一个对象的JavaScript页面上的绝对位置？: 我想要获得一个对象的绝对的X，Y在JavaScript页面上的位置。我该怎么做？我试过obj.offsetTop和obj.offsetLeft ，但这些只给出了相对于父元素的位置。我想我可以循环，并添加父母的偏移量，及其父母的偏移，等等，直到我没有父母的对象，但似乎应该有一个更好的办法。谷歌search没有太多，甚至SO网站search没有find任何东西。另外，我不能使用jQuery。

检查HTML元素是否有滚动条: 检查元素是否有滚动条的最快方法是什么？有一件事情当然是检查元素是否大于其视口，这可以通过检查这两个值来轻松完成： el.scrollHeight > el.offsetHeight || el.scrollWidth > el.offsetWidth 但这并不意味着它也具有滚动条（所以它实际上可以被人类滚动）。题如何检查在一个跨浏览器和2个 JavaScript的滚动条（如在没有jQuery ）的方式？只有Javascript，因为我需要尽可能小的开销，因为我想写一个非常快速的jQueryselect器筛选器 // check for specific scrollbars $(":scrollable(x/y/both)") // check for ANY scrollbar $(":scrollable") 我想我将不得不检查overflow风格设置，但我如何以跨浏览器的方式做到这一点？额外编辑不仅overflow风格设置。检查一个元素是否有滚动条并不像看起来那么微不足道。上面写的第一个公式在元素没有边框的时候工作的很好，但是当它的确如此（特别是当边框宽度相当的时候）， offset尺寸可以大于scroll尺寸，但是元素仍然可以滚动。实际上，我们必须从offset减去边界以获得元素的实际可滚动视口，并将其与scroll维度进行比较。备查 :scrollable jQueryselect器filter包含在我的.scrollintoview() jQuery插件中。如果有人需要，可以在我的博客文章中find完整的代码。即使它没有提供实际的解决schemeSoumya的代码相当大地帮助我解决了这个问题。它指出了我正确的方向。

如何删除没有内存泄漏的DOM元素？: 我的JavaSript代码构build了LI元素的列表。当我更新列表时，内存使用量增长，永远不会下降。我在sIEve中进行了testing，结果表明浏览器保留了所有被$.remove()或$.empty jQuery命令删除的元素。我应该怎么做，没有内存泄漏删除DOM节点？看到我的其他问题的具体代码。

React.js – 访问组件方法: 为什么我不能从ReactJS的“外部”访问组件方法？为什么这是不可能的，有什么办法可以解决吗？考虑下面的代码： var Parent = React.createClass({ render: function() { var child = <Child />; return ( <div> {child.someMethod()} // expect "bar", got a "not a function" error. </div> ); } }); var Child = React.createClass({ render: function() { return ( <div> foo </div> ); }, someMethod: function() { return 'bar'; } }); React.renderComponent(<Parent />, […]

我可以定位一个相对于父项的固定元素吗？: 我发现，当我定位一个元素固定，父母是否定位是否相对并不重要，它将位置固定，相对于窗口？ CSS #wrapper { width: 300px; background: orange; margin: 0 auto; position: relative; } #feedback { position: fixed; right: 0; top: 120px; } HTML <div id="wrapper"> … <a id="feedback" href="#">Feedback</a> </div>

React.js：contentEditable的onChange事件: 如何聆听基于contentEditable的控件的更改事件？ var Number = React.createClass({ render: function() { return <div> <span contentEditable={true} onChange={this.onChange}> {this.state.value} </span> = {this.state.value} </div>; }, onChange: function(v) { // Doesn't fire 🙁 console.log('changed', v); }, getInitialState: function() { return {value: '123'} } }); React.renderComponent(<Number />, document.body); http://jsfiddle.net/NV/kb3gN/1621/

不变冲突：_registerComponent（…）：目标容器不是DOM元素: 我做了一个微不足道的反应示例页面后，我得到这个错误：未捕获错误：不变冲突：_registerComponent（…）：目标容器不是DOM元素。这是我的代码： /** @jsx React.DOM */ 'use strict'; var React = require('react'); var App = React.createClass({ render() { return <h1>Yo</h1>; } }); React.renderComponent(<App />, document.body); HTML： <html> <head> <script src="/bundle.js"></script> </head> <body> </body> </html> 这是什么意思？

什么是offsetHeight，clientHeight，scrollHeight？: 想解释什么是offsetHeight ， clientHeight和scrollHeight或offsetWidth ， clientWidth和scrollWidth ？在客户端工作之前，必须知道这个差异。否则，他们的一生将花在修复UI上。小提琴或以下内联： function whatis(propType) { var mainDiv = document.getElementById("MainDIV"); if (window.sampleDiv == null) { var div = document.createElement("div"); window.sampleDiv = div; } div = window.sampleDiv; var propTypeWidth = propType.toLowerCase() + "Width"; var propTypeHeight = propType + "Height"; var computedStyle = window.getComputedStyle(mainDiv, null); var borderLeftWidth = computedStyle.getPropertyValue("border-left-width"); var borderTopWidth […]

为什么一个杂散的结束标记会生成一个空的段落？: 显然，如果在body元素中有一个没有匹配开始标记的</p>结束标记，大多数（如果不是所有的话）浏览器都会在它的位置生成一个空的段落： <!DOCTYPE html> <title></title> <body> </p> </body> 即使在结束标记周围存在任何文本，也不会将其作为此p元素的一部分 – 它将始终为空，并且文本节点将始终独立存在： <!DOCTYPE html> <title></title> <body> some text</p>more text </body> 如果body的上述内容被包裹在<p>和</p>标记中，我会留给你猜测会发生什么： <!DOCTYPE html> <title></title> <body> <p>some text</p>more text</p> </body> 有趣的是，如果</p>标签前面没有<body>或</body>标签，除了IE9和更老版本的浏览器都不会生成空白段落（IE≤9则始终创build一个） IE10和更高版本的行为与所有其他浏览器相同）： <!DOCTYPE html> <title></title> </p> <!DOCTYPE html> <title></title> </p><body> <!DOCTYPE html> <title></title> </p></body> 我找不到任何引用规定，没有相应的开始标签的结束标签应该生成一个空的元素，但不应该让人感到意外，因为它甚至不是有效的HTML。事实上，我只find浏览器用p元素（以及某种程度上也是br元素）来做到这一点，但是为什么没有任何解释。在使用传统的HTMLparsing器和HTML5parsing器的浏览器中，它是相当一致的，不过，在怪癖模式和标准模式下都适用。所以，这可能是公平的，这是为了向后兼容早期规范或传统行为。事实上，我的确发现了这个评论的答案，这个问题基本上证实了这个问题：为什么<p>标签有效的原因是原来的<p>被定义为“新的段落”标记，而不是p是一个容器元素。相当于成为“新线”的标志。你可以从1992年的这个文档中看到： http：//www.w3.org/History/19921103-hypertext/hypertext/WWW/MarkUp/Tags.html和1993年的这个： http：//www.w3。 org / MarkUp […]