如何獲取沒有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