如何获取没有id的div元素中的span元素

Question

我在2个div元素中有2个span元素。 两个span元素都没有id，两个div元素也都没有id。

第一个div具有带有id（id_name）的第一个输入元素，然后在其后具有第一个span元素。

第二个div具有带有id（id_password）的第二个输入元素，然后在其后有第二个span元素。

我有一个javascript函数，可以在表单提交时调用。 内部的功能，我可以得到一个变量element_id_name第一输入元素和可变element_id_password第二个输入元素。 现在，如何获得第一个输入元素之后的第一个span元素？ 以及如何获得第二输入元素之后的第二跨度元素？ 由于我没有跨度元素的ID，因此无法使用document.getElementById() 。 有没有一种方法可以通过引用第一输入元素来获取第一跨度元素？

这是我的代码：

<html>

<head>
<meta charset="ISO-8859-1">
<title>test</title>
<style type="text/css">
.error_noshow{
    display: none;
}

.error_show{
    color: red;
}
</style>
<script type="text/javascript">
function validate() {
    var element_id_name = document.getElementById("id_name");
    var element_id_password = document.getElementById("id_password");

    return false;
}    
</script>
</head>

<body>
<form id="form_login" method="post" action="" onsubmit="validate();">
    <div>
        <label for="id_name">User Name:</label>
        <input type="text" id="id_name" name="txt_user_name">
        <span class="error_noshow">Required field</span>
    </div>

    <div>
        <label for="id_password">Password:</label>
        <input type="password" id="id_password" name="txt_password">
        <span class="error_noshow">Required field</span>
    </div>

    <button type="submit">Submit</button>
</form>
</body>

</html>

感谢您阅读我的问题。

Answer 1

var spans = document.getElementsByTagName('span');

span[0]是第一个跨度， span[1]是第二个跨度。 但是，这不是首选的方法。 使用jQuery使其更容易，或者添加ID或类名

Answer 2

要访问下一个span元素，可以使用nextElementSibling属性。

 <script type="text/javascript">
    function validate() {
        var element_id_name = document.getElementById("id_name");
        var element_id_password = document.getElementById("id_password");
        var firstSpan=element_id_name.nextElementSibling;
        return false;
    }
</script>

但是请记住，nextElementSibling不能在所有版本的浏览器中使用，因此您可以使用nextSibling http://www.w3schools.com/dom/prop_node_nextsibling.asp进行模拟。

Answer 3

您可以使用querySelector通过元素的属性查找元素。

 function validate() { var element_id_name = document.querySelector("[name=txt_user_name]"); var element_id_password = document.querySelector("[name=txt_password]"); console.log(element_id_name, element_id_password); return false; }

 .error_noshow{ display: none; } .error_show{ color: red; }

 <form id="form_login" method="post" action="" onsubmit="validate();"> <div> <label for="id_name">User Name:</label> <input type="text" id="id_name" name="txt_user_name"> <span class="error_noshow">Required field</span> </div> <div> <label for="id_password">Password:</label> <input type="password" id="id_password" name="txt_password"> <span class="error_noshow">Required field</span> </div> <button type="submit">Submit</button> </form>

Answer 4

我没有回答这个问题，因为有人已经这样做了，但是似乎您想检查用户是否在两个字段中都输入了内容，因此可以跳过javascript并使用HTML5标签“ required”，如下所示

<input type="text" require /> 。

如果用户尝试提交，将收到一条错误消息。 但是请记住，旧版本的IE会跳过此检查。

如何获取没有id的div元素中的span元素

问题描述

4 个解决方案

解决方案1
1 2015-03-04 23:34:23

解决方案2
1 已采纳 2015-03-05 00:10:17

解决方案3
0 2015-03-04 23:33:29

解决方案4
0 2015-03-04 23:43:05

如何获取没有id的div元素中的span元素

问题描述

4 个解决方案

解决方案1 1 2015-03-04 23:34:23

解决方案2 1 已采纳 2015-03-05 00:10:17

解决方案3 0 2015-03-04 23:33:29

解决方案4 0 2015-03-04 23:43:05

解决方案1
1 2015-03-04 23:34:23

解决方案2
1 已采纳 2015-03-05 00:10:17

解决方案3
0 2015-03-04 23:33:29

解决方案4
0 2015-03-04 23:43:05