Question

HTML

<h1 id="title">Title</h1>

的JavaScript

var element = document.getElementById("title");

console.log(element.nodeType);  // 1
console.log(element.id.nodeType); // undefined
console.log(element.firstChild.nodeType); // 3

我想检索属性nodeType，为什么我得到undefined？
另外，有没有更好的方法来检索textNode，而不是使用firstChild，还有其他什么？

Answer 1

在DOM中，Node type 2是为属性保留的。您可以使用父节点的attributes属性检查这些节点。

console.log(element.attributes[0].nodeType);  // 2

Answer 2

element.id包含一个字符串值。该字符串没有nodeType。

也许如果你解释一下你真正试图解决的问题，我们可以帮助解释为什么你感到困惑并试图在字符串上获得nodeType。

文本节点是元素的子对象。如果您知道只有一个文本节点，那么element.firstChild是一种检索它的方法。如果您想要对象中的所有文本（而不是实际的文本节点），那么您可以在旧版本的IE中使用element.textContent（或element.innerText）。

你经常需要小心文本节点，因为有些浏览器（是的，我指的是你的IE）会在文本节点中单独放回一个回车，并且可能最终会出现比预期更多的文本节点只是基于HTML的格式（尽管它在显示上没有区别）。出于这个原因，假设Title文本位于element.firstChild中并不是最强大的代码。如果您只需要文本而不是实际的文本节点，那么element.textContent将更容易和更健壮。

这是一个简单的跨浏览器功能，可以获取元素的文本：

function getElementText(el) {
   if (typeof el.textContent !== "undefined") {
       return el.textContent;
   }
   return el.innerText;
}

或者，如果您希望第一个子文本节点中包含除空格之外的其他内容：

function getFirstTextNode(el) {
    var child = el.firstChild;
    while (child) {
        if (child.nodeType === 3 && child.nodeValue.replace(/\s/g, "") !== "") {
            return child;
        }
        child = child.nextSibling;
    }
    return null;
}

如何获取.nodeType属性来显示2？

2 个答案: