Question

我有一个html / JS文件，其中包含一些按钮，这些按钮可以导航DOM树并报告有关当前正在访问的节点的信息。

    <!DOCTYPE HTML>
    <html>
        <head>
            <title>Example</title>
            <meta name="author" content="Adam Freeman"/>
            <meta name="description" content="A simple example"/>
            <style>
                pre {border: medium double black;}
            </style>
        </head>
        <body>
            <pre id="results"></pre>
            <p id="tblock">
                There are lots of different kinds of fruit - there are over 500 varieties
                of <span id="banana">banana</span> alone. By the time we add the countless
                types of <span id="apple">apples</span>,
                <span="orange">oranges</span="orange">, and other well-known fruit, we are
                faced with thousands of choices. 
            </p>
            <p>
                One of the most interesting aspects of fruit is the variety available in
                each country. I live near London, in an area which is known for
                its apples.
            </p>
            <p>
                <button id="parent">Parent</button>
                <button id="child">First Child</button>
                <button id="prev">Prev Sibling</button>
                <button id="next">Next Sibling</button>
            </p>
     
            <script>
                var resultsElem = document.getElementById("results");
                var element = document.body;
                
                var buttons = document.getElementsByTagName("button");
                for (var i = 0; i < buttons.length; i++) {
                    buttons[i].onclick = handleButtonClick;
                }
                
                processNewElement(element);
    
                function handleButtonClick(e) {
                    if (element.style) {
                        element.style.backgroundColor = "white";
                    }
                    
                    if (e.target.id == "parent" && element != document.body) {
                        element = element.parentNode;
                    } else if (e.target.id == "child" && element.hasChildNodes()) {
                        element = element.firstChild;
                    } else if (e.target.id == "prev" && element.previousSibling) {
                        element = element.previousSibling;
                    } else if (e.target.id == "next" && element.nextSibling) {
                        element = element.nextSibling;
                    }
                    processNewElement(element);
                    if (element.style) {
                        element.style.backgroundColor = "lightgrey";
                    }
                }
                
                function processNewElement(elem) {
                    resultsElem.innerHTML = "Element type: " + elem + "\n";
    		resultsElem.innerHTML += "Element id: " + elem.id + "\n";
    		resultsElem.innerHTML += "Element text content: " + elem.wholeText + "\n";
                    resultsElem.innerHTML += "Has child nodes: "
                        + elem.hasChildNodes() + "\n";
                    if (elem.previousSibling) {
                        resultsElem.innerHTML += ("Prev sibling is: "
                             + elem.previousSibling + "\n");
                    } else {
                        resultsElem.innerHTML += "No prev sibling\n";
                    }
                    if (elem.nextSibling) {
                        resultsElem.innerHTML += "Next sibling is: "
                            + elem.nextSibling + "\n";
                    } else {
                        resultsElem.innerHTML += "No next sibling\n";
                    }
                }
            </script>
        </body>
    </html>

当我先单击“父”按钮，然后单击“第一个孩子”按钮时，输出将在帖子末尾给出。

节点“对象文本”指的是什么？它代表<body>元素的全部内容吗？

节点“对象文本”是Text节点吗？假设节点是“对象文本”，为什么elem.wholeText在“元素文本内容”中不输出任何内容？

谢谢。

Answer 1

DOM文档的每个部分通常都称为“节点”和nodes come in different types。 “文本”节点不是元素，而是文档中包含原始文本的任何部分。

采取以下措施。您看到多少个节点？

<p>Hello!</p>

有2个。p元素节点和其中的文本节点为firstChild。所有节点都具有nodeValue属性，但是令人惊讶的是，包含文本的元素节点没有nodeValue，它们的实际值位于作为元素节点的子节点的文本节点中。

console.log(document.querySelector("p").nodeType);   // 1
console.log(document.querySelector("p").nodeValue);  // null
console.log(document.querySelector("p").firstChild.nodeType);  // 3
console.log(document.querySelector("p").firstChild.nodeValue); // Hello!

<p>Hello!</p>

所有文本都将出现在某个元素内，这意味着最自然出现的文本节点通常是由于源代码中包含空格（回车，制表符，空格）而创建的那些文本节点。

我在输出中增加了一行，生成了节点类型编号，您可以看到单击“第一个子节点”按钮时，它报告的节点类型为3（文本节点），而不是单击“父节点按钮，产生一个1（元素节点）。

<!DOCTYPE HTML>
    <html>
        <head>
            <title>Example</title>
            <meta name="author" content="Adam Freeman"/>
            <meta name="description" content="A simple example"/>
            <style>
                pre {border: medium double black;}
            </style>
        </head>
        <body>
            <pre id="results"></pre>
            <p id="tblock">
                There are lots of different kinds of fruit - there are over 500 varieties
                of <span id="banana">banana</span> alone. By the time we add the countless
                types of <span id="apple">apples</span>,
                <span="orange">oranges</span="orange">, and other well-known fruit, we are
                faced with thousands of choices. 
            </p>
            <p>
                One of the most interesting aspects of fruit is the variety available in
                each country. I live near London, in an area which is known for
                its apples.
            </p>
            <p>
                <button id="parent">Parent</button>
                <button id="child">First Child</button>
                <button id="prev">Prev Sibling</button>
                <button id="next">Next Sibling</button>
            </p>
     
            <script>
                var resultsElem = document.getElementById("results");
                var element = document.body;
                
                var buttons = document.getElementsByTagName("button");
                for (var i = 0; i < buttons.length; i++) {
                    buttons[i].onclick = handleButtonClick;
                }
                
                processNewElement(element);
    
                function handleButtonClick(e) {
                    if (element.style) {
                        element.style.backgroundColor = "white";
                    }
                    
                    if (e.target.id == "parent" && element != document.body) {
                        element = element.parentNode;
                    } else if (e.target.id == "child" && element.hasChildNodes()) {
                        element = element.firstChild;
                    } else if (e.target.id == "prev" && element.previousSibling) {
                        element = element.previousSibling;
                    } else if (e.target.id == "next" && element.nextSibling) {
                        element = element.nextSibling;
                    }
                    processNewElement(element);
                    if (element.style) {
                        element.style.backgroundColor = "lightgrey";
                    }
                }
                
                function processNewElement(elem) {
                    resultsElem.innerHTML = "Element type: " + elem + "\n";
    		resultsElem.innerHTML += "Element id: " + elem.id + "\n";
        resultsElem.innerHTML += "Node type: " + elem.nodeType + "\n";
    		resultsElem.innerHTML += "Element text content: " + elem.wholeText + "\n";
                    resultsElem.innerHTML += "Has child nodes: "
                        + elem.hasChildNodes() + "\n";
                    if (elem.previousSibling) {
                        resultsElem.innerHTML += ("Prev sibling is: "
                             + elem.previousSibling + "\n");
                    } else {
                        resultsElem.innerHTML += "No prev sibling\n";
                    }
                    if (elem.nextSibling) {
                        resultsElem.innerHTML += "Next sibling is: "
                            + elem.nextSibling + "\n";
                    } else {
                        resultsElem.innerHTML += "No next sibling\n";
                    }
                }
            </script>
        </body>
    </html>

Answer 2

好像您看到的文本节点是标记和以下标记之间的inter-element whitespace。

DOM树中的此节点“对象文本”是什么？

2 个答案: