javascript - 通过类属性获取兄弟，然后获取textContent

Question

如果我在控制台中执行此操作:

foo = document.querySelectorAll('#authCreateAcctUsernameInput')

然后返回一个像这样的对象:foo

[<input type=​"text" maxlength=​"70" id=​"authCreateAcctUsernameInput" name=​"userName" autocomplete=​"off" autocapitalize=​"off" autocorrect=​"off">​]

html 看起来像这样:

<fieldset>
    <label class="userName" for="authCreateAcctUsernameInput">Email Address</label>
    <input type="text" maxlength="70" id="authCreateAcctUsernameInput" name="userName" autocomplete="off" autocapitalize="off" autocorrect="off">
    <span id="authCreateAcctUsernameErrorTxt" class="errorMSG" style="display: block;">Please enter a valid email address.</span></fieldset>

我想要获取最后一个元素的内容(“请输入有效的电子邮件地址”)，所以我尝试了以下方法:

$(foo).siblings('.errorMSG').textContent

但是返回的是未定义的。 .innerHTML 和 .value

相同

如何根据同级的类值获取同级的 textContent(因此获取类 errorMSG 的同级的 textContent)？

Answer 1

我认为问题在于将 jQuery 与 javascript 混合在一起。

执行此操作以获取文本。

$(foo).siblings('.errorMSG').text();

textContent 是 DOM 对象的属性，但您有一个 jQuery 对象。所以调用jquery函数就可以了。

下面是不同的 DOM 对象属性以及等效的 Jquery 对象函数

DOMObject.value         jqueryObject.val()
DOMObject.innerHTML     jqueryObject.html()
DOMObject.textConetnt   jqueryObject.text()

还有很多其他的。