javascript – So verwenden Sie nextElementSibling, um den nächsten Knoten in js zu finden

Question

<script type="text/javascript">
    function getElements(){
    var x=document.getElementById("dialogArea");
    x.nextElementSibling.nextElementSibling.value="30";//该方法错误
    }
</script>

<input type="hidden" name="dinwei" class="dinwei" id="dialogArea" value="" />
<input name="myInput" type="text" size="20" value="How1 many input elements?"/>
<input name="myInput" type="text" size="20" value="How2 many input elements?"/>
<input name="myInput" type="text" size="20" value="How3 many input elements?"/>
<input type="button"  onclick="getElements()"value="button" />

1. Verwenden Sie nextElementSibling, um den nächsten Knoten mit der ID von dialogArea zu finden und seinen Wert zu ändern.
2. Verwenden Sie nur native JS ohne JQuery.
3. Der Zweck besteht darin, die versteckte Eingabe als Positionierungskoordinate für die Suche nach der angegebenen Eingabe zu verwenden, wenn die ID und Klasse der Eingabe in einigen Sonderfällen nicht ermittelt werden kann.

Answer 1

script 放在 dom 前面能获取到 dom 么...

题目看错了，不过看起来好像没什么问题，能不能贴一下报错的截图。再者说，这样的连续判断最好加一个存在判断，否则很容易出现问题。类似于：

if (dom.next) {
    dom.next.next
}

Answer 2

var test1 = document.getElementById('dialogArea');
var test2= test.nextElementSibling.nextElementSibling;

Answer 3

然后你的html不能换行，换行了会每个input后面有个text类型的nextSibling,空白字符也相当于一个文本节点

var x=document.getElementById("dialogArea");
x.nextElementSibling.nextElementSibling.value = "30";

<input type="hidden" name="dinwei" class="dinwei" id="dialogArea" value="" /><input name="myInput" type="text" size="20" value="How1 many input elements?"/><input name="myInput" type="text" size="20" value="How2 many input elements?"/><input name="myInput" type="text" size="20" value="How3 many input elements?"/><input type="button"  onclick="getElements()"value="button" />

最好用jquery,非要用js也可以这样写。

var x=document.getElementById("dialogArea");
next(next(x)).value="30";

function next(e){
        e = e.nextSibling;
        if(e.nodeType == 3){ // 3是指text类型
            e = e.nextSibling;
        }
        return e;
}