javascript - js怎麼用nextElementSibling找出下個節點

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.用nextElementSibling找出id為dialogArea的下個節點並修改它的值。
2.只用原生js不用jquery。
3.目的是為了在一些特殊情況下不能取得到input的ID以及class的情況下，用隱藏的input作為定位座標向下查找指定input。

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;
}