我有一个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在“元素文本内容”中不输出任何内容?

javascript - DOM树中的此节点“对象文本”是什么?-LMLPHP

最佳答案

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>

10-07 19:49
查看更多