使用classname纯Javascript获取第一个下一个元素

我正在尝试使用classname纯Javascript获得第一个孩子

我正在尝试编写自己的表单验证，并尝试添加并删除错误消息。如果错误消息已经存在，也不要追加

如果你能帮我做第一件事，让孩子有个班名，那就太好了

    function display_error(selector, message) {
    selector.insertAdjacentHTML('afterend', "<h1 class='js-error' >" + message + "</h1>");
}

function validateForm() {
    // Validate Name Field
    // Check if name has les than 3
    var elem = document.getElementById("name")
    if (elem.value.length < 3) {
        display_error(elem, "Less than 3")
        return false;
    } else {
        // here is the error
        error_label = elem.querySelector('.js-error');
        error_label.textContent = "more than 3"

        }

}

功能显示错误（选择器、消息）{
selector.insertAdjacentHTML（'afterend'，“+message+”）；
}
函数validateForm（）{
//验证名称字段
//检查名称是否小于3
var elem=document.getElementById（“名称”）
如果（元素值长度<3）{
显示错误（元素“小于3”）
返回false；
}否则{
//这里是错误
error_label=elem.querySelector（'.js error'）；
错误\u label.textContent=“超过3”
}
}

这是一把小提琴

---

在现代JavaScript中，要获得具有类名的第一个子级，可以使用以下命令：

document.querySelector('element.class:first-child')

这里，您提供实际的元素和实际的类名

---

document.querySelector

在所有现代浏览器中都可用，并且将采用与CSS选择器匹配的任何字符串。它甚至可以在IE8中工作，尽管那里没有

：first child

伪类。

在现代JavaScript中，要获得具有类名的第一个子类，可以使用以下命令：

document.querySelector('element.class:first-child')

这里，您提供实际的元素和实际的类名

---

document.querySelector

在所有现代浏览器中都可用，并且将采用与CSS选择器匹配的任何字符串。它甚至可以在IE8中工作，尽管那里没有

：first child

伪类。

关于的美妙之处在于，您可以使用CSS选择器，而不是通常笨重的DOM API

CSS提供了一个名为的非常简单的选择器，它完全满足您的需要

//查找使用.test类的第一个元素，该类是另一个元素的子元素。
var firstTest=document.querySelector（“.test:第一个子项”）；
//现在您已经扫描并找到了元素，并存储了对它的引用
//在变量中，可以访问元素的任何方面。
console.log（firstTest.textContent）；
firstTest.innerHTML=“现在，我的内容与以前完全不同！”；
//现在，我们可以得到相对于上一个元素的其他元素的引用
//我们找到了一个。
var firstTestError=document.querySelector（“.test:first child+.error”）；
firstTestError.style.backgroundColor=“aqua”；
firstTestError.innerHTML=“必需”

一
二
3
关于的美妙之处在于，您可以使用CSS选择器，而不是通常笨重的DOM API

CSS提供了一个名为的非常简单的选择器，它完全满足您的需要


//查找使用.test类的第一个元素，该类是另一个元素的子元素。
var firstTest=document.querySelector（“.test:第一个子项”）；
//现在您已经扫描并找到了元素，并存储了对它的引用
//在变量中，可以访问元素的任何方面。
console.log（firstTest.textContent）；
firstTest.innerHTML=“现在，我的内容与以前完全不同！”；
//现在，我们可以得到相对于上一个元素的其他元素的引用
//我们找到了一个。
var firstTestError=document.querySelector（“.test:first child+.error”）；
firstTestError.style.backgroundColor=“aqua”；
firstTestError.innerHTML=“必需”

一
二
3
const GetFirstChild=document.querySelector（'.PlainJavascript'）
 const GetFirstChild=document.querySelector（'.PlainJavascript'）
 在这里发布代码，而不仅仅是在远程站点。您可以使用使其可执行。当您使用
afterend
时，新元素不是子元素，而是下一个元素。您要获取的类名是什么？我正在尝试获取下一个元素并将其从else语句中删除。谢谢你告诉我这不是下一个孩子，我想你想要的是
elem.nextElementSibling
。然后测试它是否有
class=“js error”
在这里发布代码，而不仅仅是在远程站点。您可以使用使其可执行。当您使用
afterend
时，新元素不是子元素，而是下一个元素。您要获取的类名是什么？我正在尝试获取下一个元素并将其从else语句中删除。谢谢你告诉我这不是下一个孩子，我想你想要的是
elem.nextElementSibling
。然后测试它是否有
class=“js error”
这很好，谢谢，但是我如何找到使用var elem，以便使用var elem.id并将结果元素放入选择器或缓存中。我会更新答案。这是我得到的错误_label=document.querySelector（“#”+elem.id+：“.error js”）@HollyJohnson我不明白你的意思。如果要根据使用
.test
类的第一个子级查找元素，则不需要通过
id
进行查询。这是因为我不擅长解释我想要的内容。我试图找到下一个元素，它有一个特定的类。这对我有帮助。谢谢这很好，谢谢，但是我如何找到使用var elem，以便使用var elem.id并将结果元素放入选择器或缓存中呢。我会更新答案。这是我得到的错误_label=document.querySelector（“#”+elem.id+：“.error js”）@HollyJohnson我不明白你的意思。如果要根据使用
.test
类的第一个子级查找元素，则不需要通过
id
进行查询。这是因为我不擅长解释我想要的内容。我试图找到下一个元素，它有一个特定的类。这对我有帮助。谢谢，请格式化你的代码。此外，这也不起作用：1）变量名不能有空格2）类名没有使用点前缀3）类名不能有空格请格式化代码。还有这个