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

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的答案以获得更好的答案!