Question

我正在尝试使用classname Plain 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"

        }

}

这是一个小提琴 https://jsfiddle.net/efh941cc/3/

Answer 1

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

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

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

document.querySelector在所有现代浏览器中都可用，并且将采用与CSS选择器匹配的任何字符串。它甚至可以在IE8中运行，尽管那里没有:first-child伪类。

Answer 2

document.querySelector() 的美妙之处在于，您可以使用CSS选择器而不是通常笨重的DOM API。

CSS提供了一个名为 first-child 的非常简单的选择器，可以完全满足您的需求。

＆＃13;

// Find the first element that uses the .test class that is a child of another element.
var firstTest = document.querySelector(".test:first-child");

// Now that you've scanned and found the element and stored a reference to it
// in a variable, you can access any aspect of the element.
console.log(firstTest.textContent);

firstTest.innerHTML = "<span>Now, I have completely different content than before!</span>";

// Now, we can get a reference to other elements that are relative to the last 
// one we found.
var firstTestError = document.querySelector(".test:first-child + .error");

firstTestError.style.backgroundColor = "aqua";
firstTestError.innerHTML = "<span>Required</span>";

＆＃13;

<div>
  <span class="test">one</span><span class="error"></span>
  <div class="test">two</div>
  <div class="test">three</div>  
</div>

＆＃13;

Answer 3

const GetFirstChild = document.querySelector（'.PlainJavascript'）;

使用classname Plain Javascript获取First Next元素

3 个答案: