JS操作HTML元素-优快云博客

本文介绍如何使用JavaScript操作HTML页面中的元素，包括通过name属性获取对象数组及读取每个对象的ID，点击事件改变元素的class属性，以及父节点获取所有子节点的方法。

HTML代码

<div class="divClass" name="myClass">
        <input type="password" name="aa" id="1" value="1" class="a">
        <input type="password" name="aa" id="2" value="2" class="a">
        <input type="password" name="aa" id="3" value="3" class="a">
        <input type="password" name="aa" id="4" value="4" class="a">
</div>

1、通过name拿到对象数组，js如何拿到每一个对象的ID的内容?

答案：var aa = document.getElementsByName("aa");
for(var i=0;i<aa.length;i++){
　　var id = aa[i].id;
}

2、当分别点击这四个input时，js想要改变他们的class

var aa = document.getElementsByName("aa");
    for(var i=0;i<aa.length;i++){
        $("#"+aa[i].id).click(function(){
        $(this).attr("class","active");
    });
}
备注：attr中一个参数代表取值，2个参数代表设值。

3、父节点获取子节点

        <script type="text/javascript">
            var myClass = document.getElementsByName("myClass");
            var b = myClass[0].childNodes;
            for(var i=0;i<b.length;i++){
               alert(b[i].nodeName);
            }
        </script>

转载于:https://www.cnblogs.com/pecool/p/9069012.html