javascript - js怎么定位到上级节点的下一个节点?

Question

<p style="position:relative;display: inline-block;">
            <span style="margin-left:100px;width:18px;overflow:hidden;"> 
                 <select style="width:118px;margin-left:-100px" onchange="this.parentNode.nextSibling.value=this.value">
                    <option value="我的QQ空间">我的QQ空间</option>
                    <option value="我的CSDN博客">我的CSDN博客</option>
                    <option value="我的猫扑博客">我的猫扑博客</option>
                </select>
            </span>
            <input style="width:100px;position:absolute;left:0px;">
        </p>

下拉框里面的onchange="this.parentNode.nextSibling.value=this.value"为什么找不到Input标签?我自己也试了给input赋值后,打印出来确实没值.

Answer 1

因为那个节点是空文本节点。你可以酱紫：

document.getElementsByTagName('select').item(0).onchange = function() {
    var parent = this.parentNode;
    var next = parent.nextSibling;
    while(next) {
        if(Node.ELEMENT_NODE === next.nodeType) {
            return next;
        }
        next = next.nextSibling;
    }
    return null;
};

Answer 2

this.parentNode.nextSibling.nextSibling.value=this.value

你这样试试。