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，这将很容易。

Answer 1

获取对要从中检索文本的节点的引用，然后尝试：

someNode.firstChild.nodeValue

如果您有这样的节点：

<span>Here is some text</span>

您实际上在查看两个节点，一个具有文本节点子节点的span节点。在DOM中，该文本节点子节点的nodeValue是“这是一些文本”

Answer 2

澄清一下：你是否试图从“文本”类中获取css来显示？

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

Answer 3

在要从中获取数据的标记上添加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
}

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>

完成后，更改您的复制功能以接受新参数。然后你只需要找到正确的节点。从问题来看，我认为你正在寻找下一个＆lt; div class =“text”＆gt;这是＆lt; div class =“geshimain”＆gt;的孩子这是包含被单击的链接的父节点的下一个兄弟节点。这个功能应该实现：

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();
}

祝你好运！

Javascript - 获取孩子的文本值

4 个答案: