2016-03-01 84 views
0

从选定的div中获取不包含其子文本的文本我正在使用以下代码尝试打印出传递给该函数的div的textContent。我只想要选定的div文本,而不是它的孩子。如何使用.textContent

我看到了几个例子,但我不希望所有使用jQuery :)提前

function changeText(element){ 
 

 
var thisEl = document.getElementById(element); 
 

 
console.log(thisEl.textContent) 
 

 
} 
 

 
changeText('container')
<div id = 'container'> 
 
    this is a test 1 
 
    <div> 
 
    this is a test 2 
 
    <div> 
 
     this is a test 3 
 
    </div> 
 
    </div> 
 
</div>

感谢

回答

1

您可以抓取第一个元素的childNodes,这将是text node有问题。请注意,文本节点对空白区域很敏感。

function changeText (element) { 
 
    var thisEl = document.getElementById(element); 
 

 
    console.log(thisEl.childNodes[0].nodeValue); 
 

 
} 
 

 
changeText('container');
<div id='container'> 
 
    this is a test 1 
 
    <div> 
 
    this is a test 2 
 
    <div> 
 
     this is a test 3 
 
    </div> 
 
    </div> 
 
</div>

+0

干净的答案,正是我想要的,谢谢你 – thatOneGuy

1
function changeText(elementId) { 
    var childs = [].slice.call(document.getElementById(elementId).childNodes); 
    var text = ''; 
    childs.forEach(function (child) { 
     if (child.nodeType === 3) { 
     text += child.nodeValue || ''; 
     } 
    }); 
    return text; 
} 
+0

最新与在第二行上的方括号?没有看到之前...... – thatOneGuy

+1

这是一种快速获取Array.prototype的分片方法的方法 –

+0

@DmitriyLoskutov实际上,考虑到它必须实际构建一个Array的实例,这是一种很慢的方式。 – Oka

0

使用.textContentchildNodes[0]

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    
 
</head> 
 

 
<body> 
 
    <div id='container'> 
 
    this is a test 1 
 
    <div> 
 
     this is a test 2 
 
     <div> 
 
     this is a test 3 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <br> 
 
    <br> 
 
    <br> 
 
    <br> 
 
    <br> 
 
    <output id="out"></output> 
 
    <script> 
 
    var tgt = document.getElementById("container").childNodes[0].textContent 
 
    document.getElementById("out").innerHTML = tgt; 
 
    </script> 
 
</body> 
 

 
</html>

相关问题