javascript - Comment utiliser nextElementSibling pour trouver le nœud suivant dans js

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. Utilisez nextElementSibling pour trouver le nœud suivant avec l'identifiant de dialogArea et modifier sa valeur.
2. Utilisez uniquement du js natif sans jquery.
3. Le but est d'utiliser l'entrée cachée comme coordonnée de positionnement pour trouver l'entrée spécifiée vers le bas lorsque l'ID et la classe de l'entrée ne peuvent pas être obtenus dans certains cas particuliers.

Answer 1

Puis-je obtenir dom en plaçant le script devant dom...

J'ai mal lu la question, mais il semble qu'il n'y ait rien de mal à cela. Pouvez-vous publier une capture d'écran de l'erreur ? De plus, il est préférable d’ajouter un jugement existentiel à un tel jugement continu, sinon des problèmes surgiront facilement. Similaire à :

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

Answer 2

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

Answer 3

Ensuite, votre code HTML ne peut pas être renvoyé à la ligne. S'il est renvoyé à la ligne, il y aura un nextSibling de type texte derrière chaque entrée. Le caractère vide est également équivalent à un nœud de texte

.

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" />

Il est préférable d'utiliser jquery. Si vous devez utiliser js, vous pouvez l'écrire comme ceci.

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