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

【问题标题】：How to get span element with no id which is inside a div with no id如何在没有id的div中获取没有id的span元素
【发布时间】：2015-03-04 23:27:08
【问题描述】：

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

第一个 div 有第一个带有 id (id_name) 的输入元素，然后是第一个 span 元素。

第二个 div 有第二个带有 id (id_password) 的输入元素，然后是第二个跨度元素。

我有一个 javascript 函数，我在提交表单时调用它。在该函数中，我可以获得变量 element_id_name 中的第一个输入元素和变量 element_id_password 中的第二个输入元素。现在如何获得第一个输入元素之后的第一个跨度元素？以及如何获得第二个输入元素之后的第二个跨度元素？因为我没有跨度元素的 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>

感谢您阅读我的问题。

【问题讨论】：

你可以给它们添加类名吗？
看看developer.mozilla.org/en-US/docs/Web/API/Node/nextSibling

标签： javascript html css

【解决方案1】：

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

span[0] 是第一个跨度，span[1] 是第二个跨度。但是，这不是执行此操作的首选方式。使用 jQuery 使其更容易或添加 id 或类名

【讨论】：

【解决方案2】：

要访问下一个跨度元素，您可以使用 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 进行模拟；

【讨论】：

【解决方案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>

【讨论】：

【解决方案4】：

我没有回答这个问题，因为有人已经回答了，但您似乎想检查用户是否在两个字段中都输入了某些内容，您可以跳过 javascript 并像这样使用HTML5 tag "required"

<input type="text" require />.

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

【讨论】：