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

问题描述 投票：1回答：2

我有一个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在“元素文本内容”中没有输出任何内容，因为节点是“对象文本”？

谢谢。

enter image description here

javascript dom
2个回答
4
投票

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

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

<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>

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

我在输出中添加了一个产生节点类型编号的附加行，您可以看到当您单击First Child按钮时，它会报告节点类型为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>
1
投票

看起来像你看到的文本节点是标签和以下标签之间的inter-element whitespace。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.