javascript - 为什么我在遍历 DOM 树时没有从文本节点获取值?

标签 javascript html dom

在下面的脚本中,我尝试在 DOM 树中移动,但没有得到我期望的输出。

这里只有一小段html:

<p id="para">This is inside the <em>p</em> tag.</p>

当我穿过树时,这就是我得到的:

Node Name : P
Node Type : 1
Node Value : null


Node Name : HTML
Node Type : 1
Node Value : null

<html>
<head>
    <title>JavaScript</title>
</head>

<body> 
    <p id="para">This is inside the <em>p</em> tag.</p>

    <script type="text/javascript">
        function nodeStatus(node) {
            document.write("Node Name : " + node.nodeName + "<br />");
            document.write("Node Type : " + node.nodeType + "<br / >");
            document.write("Node Value : " + node.nodeValue + "<br / >");
            document.write("<br / > <br / >");
        }
        var curElement = document.getElementById("para");
        nodeStatus(curElement); // p tag
        curElement = document.firstChild; // This is inside the 
        nodeStatus(curElement);
        curElement = document.nextSibling; // em tag
        nodeStatus(curElement);
        curElement = document.firstChild; // p
        nodeStatus(curElement); 
    </script>
</body>

为什么我没有从 text-node 获取值?

我得到的节点名称 HTML 是什么?我没有将任何节点命名为 HTML

jsFiddle:http://jsfiddle.net/HmkJQ/

最佳答案

您正在做的是从每行代码的顶级文档开始。你开始于:

var curElement = document.getElementById("para");

您将按预期获得 p 元素。但随后您尝试获取 p 元素的子元素,但使用此代码

curElement = document.firstChild;

您得到的是文档本身的第一个子元素(这意味着根html元素!)。

相反,您应该按如下方式导航:

curElement = curElement.firstChild;

尝试一下。

关于javascript - 为什么我在遍历 DOM 树时没有从文本节点获取值?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15108620/

相关文章:

javascript - Flotr2 - 将鼠标悬停在折线图中的点上

javascript - 用 javascript 制作基本的益智游戏

javascript - onclick 删除并重新插入 DOM 元素

jquery - 将 noUISlider 与 Rails 一起使用

javascript - 如何在浏览器开始下载资源之前操作 DOM?

javascript - 构造函数中定义的属性是自己的还是继承的?

javascript - 在 extjs 3.4 中刷新面板中的数据 View

html - 由于 wp_head 和 Content-Lang,未验证 HTML5 网站

javascript - 使用 jQuery 获取每个图像的自然高度

javascript - 如何使数据表按标签搜索