Question

我坚持使用原生DOM方法（我知道，对吧？）我有这样的结构：

<div>
    <input>
    <a>
</div>

我在<a>标记上使用onClick，并希望从输入中检索值。在Chrome / OS X上，类似

this.previousSibling.previousSibling.value

会运作良好。我加倍，因为第一个.previousSibling返回<div>的Textnode，还有一个返回之前得到我想要的输入。

我的问题是：.previousSibling是否总是返回父文本节点（如果存在）？

谢谢！

编辑/解决方案

我的hacky解决方案是（跨浏览器），以确保我得到正确的元素：

var el = this; 
while(el.nodeType == 3 || el.tagName && el.tagName !== 'INPUT') {
    el = el.previousSibling
}; 
console.log(el.value);

具体位置，但跨浏览器工作，并且足够轻，可以根据我的需要投入onClick。感谢您帮助找出问题所在（特别是HTML之间的换行符）

Answer 1

它返回上一个兄弟节点，它可能是text node，可能是element node，可能是null

您可以使用.previousElementSibling检索以前的元素节点，这些节点在旧版浏览器中不受支持，但您可以使用以下函数：

function previousElementSibling( elem ) {

    do {

        elem = elem.previousSibling;

    } while ( elem && elem.nodeType !== 1 );

    return elem;
}

previousElementSibling(this)将导致输入元素。

Answer 2

.previousSibling是否总是返回父文本节点存在？

没有。它返回前一个兄弟。在您的情况下，紧跟在a元素之前的文本节点（新行），因此它返回。

如果删除空格，它应该按预期工作：

<div>
    <input><a></a> <!-- input is immediately preceding anchor -->
</div>

但是，这不是一个特别好的解决方案。请参阅@ Esailija的答案以获得更好的答案！

Answer 3

根据http://www.w3schools.com/dom/prop_element_previoussibling.asp

previousSibling属性返回上一个兄弟节点（   所选元素的同一树级别中的上一个节点

如果没有这样的节点，则此属性返回null。

从技术上讲，你在那里展示的是

<div><textnode><input><textnode><a><textnode></div>

...所以如果浏览器遵循规则，它应该继续正常工作。如果您在询问是否有不符合此规则的浏览器，我无法帮助您，但我会注意到IE有习惯将dom对象添加到页面（特别是作为包装器）无论如何都可能证明是危险的。

编辑：http://www.w3schools.com/dom/dom_nodes_navigate.asp可以就此主题发表意见。

Firefox和其他一些浏览器会处理空的空格或新的空格作为文本节点的行，Internet Explorer不会。

.previousSibling是否始终首先返回父级的Text节点？

编辑/解决方案

3 个答案: