JavaScript get textContent子どもを除き

Question

JavaScriptのライブラリを作成していますが、jQueryを使用することはできません。子要素のテキストの内容を持たないHTML要素のテキストコンテンツを取得しようとしています。

innerTextとtextContentの両方の属性で必要な情報が得られないので、助けてください。

Answer 1

DOM APIをchildNodesおよびnodeTypeとして使用して解決できます。

var elChildNode = document.querySelector("#hello").childNodes; 
var sChildTextSum = ""; 

elChildNode.forEach(function(value){ 
    if(value.nodeType === Node.TEXT_NODE) { 
     console.log("Current textNode value is : ", value.nodeValue.trim()); 
     sChildTextSum += value.nodeValue; 
    } 
}); 

console.log("All text value of firstChild : ", sChildTextSum); 

上記のサンプルコードを作成しました。

https://jsfiddle.net/nigayo/p7t9bdc3/

Answer 2

<span>...を除く、以下の要素からAuthor's Nameを取得するには：

<div class="details__instructor"> 
    Author's Name<span ng-show="job_title">, Entrepreneur</span> 
</div> 

使用childNodes[0]を。例えば：

document.querySelector('div.details__instructor').childNodes[0] 

結果がオブジェクトである：

"Author's Name"