Javascript - 獲取孩子的文本值

說我有一個頁面上此代碼：

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

來源

2009-07-06 James Brooks

試試這個：

更改您的HTML咯。 onclick處理程序中不需要「javascript：」前綴。此外，通路的「這」的引用到你的複製功能：

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

祝你好運！

來源

2009-07-06 15:30:52

澄清：你是否試圖從「文本」類顯示的CSS？

只是一個想法，你可以嘗試使用id屬性來獲得你所需要的。

來源

2009-07-06 14:15:31 MattSayar

這是一個IPB的mod，將它改爲id不會幫助。 – 2009-07-06 14:20:26

在要從中獲取其數據的標籤上放置一個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 
}

來源

2009-07-06 14:16:17 linusthe3rd

我已經完成了。非常感謝你！ – 2009-07-06 14:22:53

這起作用。但是，如果你有兩個geshimains不是。 – 2009-07-06 14:31:44

使用innerHtml可能不是你想要的：如果有任何實體，它們將以編碼形式出現（&）。這聽起來像你會想要的文字內容。得到這個會因瀏覽器而異，但請嘗試如下所示： function innerText（node）{ var s = node.textContent; return（s === undefined）？ node.innerText：s; } – 2009-07-06 15:11:52

得到你希望從檢索文字，並嘗試節點的引用：

someNode.firstChild.nodeValue

當你有這樣一個節點：

<span>Here is some text</span>

你實際上看着兩個節點，一個具有文本節點子節點的跨度節點。在DOM中，該文本節點孩子的nodeValue是「這是一些文本」

來源

2009-07-06 14:17:31 Maciek

Javascript - 獲取孩子的文本值

回答

相關問題