javascript - js怎么用nextElementSibling查找下下个节点
天蓬老师
天蓬老师 2017-05-19 10:12:12
0
3
684
<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。

天蓬老师
天蓬老师

欢迎选择我的课程,让我们一起见证您的进步~~

全部回复(3)
迷茫

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

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

if (dom.next) {
    dom.next.next
}
给我你的怀抱

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

淡淡烟草味

然后你的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;
}
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板