Question

我正在使用以下代码尝试打印出传递给函数的div的textContent。我只想要选择的div文本，而不是它的孩子们。

我见过几个例子，但都使用了我不想要的jquery：）

＆＃13;

function changeText(element){

var thisEl = document.getElementById(element);

console.log(thisEl.textContent)

}

changeText('container')

＆＃13;

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

＆＃13;

提前致谢

Answer 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;
}

Answer 2

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

＆＃13;

function changeText (element) {
  var thisEl = document.getElementById(element);

  console.log(thisEl.childNodes[0].nodeValue);

}

changeText('container');

＆＃13;

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

＆＃13;

Answer 3

您是否只需要所选文字？ https://github.com/timdown/rangy但您也可以获得所选文字的外部元素。

Answer 4

使用.textContent和childNodes[0]

＆＃13;

<!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>

＆＃13;

如何使用.textContent从所选div中获取不包含其子文本的文本

4 个答案: