JavaScript - 获取子元素的文本值

Question

如何从元素的子元素中获取文本值？

假设我在页面上有以下代码：

<div class='geshitop'>
  &#91; CODE &#93; &#91; <a href="#" onclick="javascript:copy(); return false;">PLAIN-TEXT</a> &#93;
</div>
<div class='geshimain'>
  <pre><div class="text" style="font-family:monospace;">Code goes here...</div></pre>
</div>

copy()函数：

<script type="text/javascript">
function copy() {
    var text = this.parent.getElementsByName("text");
    var code = text[0].value;
    var popup = window.open("", "window", "resizeable,width=400,height=300");
    popup.document.write("<textarea name='code' cols='40' rows='15'></textarea>");
    popup.code.value = code;
}

我该如何获取子元素的数据：<div class "text">。我该如何从父元素中获取它？

---

我仍然遇到问题。如果页面上有两个代码框，则无法正常工作。请记住，我不能使用ID。必须使用类。

如果我能够使用jQuery，那么这将很容易。

- James Brooks

Answer 1

获取要检索文本的节点的引用，然后尝试使用以下方法：

someNode.firstChild.nodeValue

当您有这样的一个节点时：

<span>Here is some text</span>

实际上您正在查看两个节点，一个是带有文本节点子节点的span节点。在DOM中，该文本节点子节点的nodeValue为"这里是一些文本"

- Maciek

Answer 2

在你想要获取数据的标签上放置一个ID。

这种方式只会获取div节点的第一个子元素：

function copy(){
     var text = document.getElementById( "YOU_TAG_NAME" ).firstChild;
     //do stuff
}

这将获取节点中的所有数据，但是除非您控制该div标签中输入的内容，否则不要这样做：

function copy(){
     var text = document.getElementById( "YOU_TAG_NAME" ).innerHtml;
     //do stuff
}

- linusthe3rd

---

使用 innerHtml 可能不是您想要的：如果有任何实体，它们将以编码形式出现（&）。听起来您可能需要文本内容。获取这个将因浏览器而异，但可以尝试类似以下的代码：function innerText(node) { var s = node.textContent; return (s === undefined) ? node.innerText : s; } - Chris Nielsen

Chris，我需要一个孩子的孩子的孩子。 - James Brooks

Answer 3

澄清一下：您是想显示“text”类的CSS吗？

只是一个想法，您可以尝试使用id属性来获取所需内容。

- MattSayar

---

这是一个针对IPB的模组，将其更改为ID不会有帮助。 - James Brooks

Answer 4

尝试这个：

稍微更改你的HTML。在onclick处理程序中，"javascript:"前缀是不必要的。此外，将“this”的引用传递给您的复制函数：

<div class='geshitop'>
  &#91; CODE &#93; &#91; <a href="#" onclick="copy(this); return false;">PLAIN-TEXT</a> &#93;
</div>
<div class='geshimain'>
  <pre><div class="text" style="font-family:monospace;">Code goes here...</div></pre>
</div>

完成这一步后，修改您的复制函数以接受新参数。然后，您只需要找到正确的节点。从问题中可以看出，您正在寻找下一个是<div class="text">的子级的<div class="geshimain">，它是包含被单击链接的父节点的下一个同级节点。此函数应该能够实现这一点：

function copy(node) {
    node = node.parentNode; // <div class="geshitop">

    // Loop over adjacent siblings, looking for the next geshimain.
    while (node.nextSibling) {
        node = node.nextSibling;
        if (node.nodeName === 'DIV' && node.className === 'geshimain') {
            break;
        }
    }

    if (!node) {
        throw new Error("Could not locate geshimain");
    }

    // Locate the <div class="text">
    node = (function () {
        var divs = node.getElementsByTagName('div');
        for (var x = 0; x < divs.length; x++) {
            if (divs[x].className === 'text') {
                return divs[x];
            }
        }
        return null;
    }());

    if (!node) {
        throw new Error("Could not locate text");
    }

    node =
    '<textarea name="code" cols="40" rows="15">' + node.innerHTML + "</textarea>";
    popup = window.open("", "window", "resizeable,width=400,height=300");
    popup.document.write(node);
    popup.document.close();
}

祝你好运！

- Chris Nielsen

---

好的，Firebug 给了我这个错误：无法访问优化闭包 file:///C:/Users/James/Documents/My%20Web%20Sites/javascript_code_box_popup.html# 第25行 - James Brooks

好的，我通过删除节点函数末尾的额外()来修复了它。现在它返回未定义。 - James Brooks