javascript捕获div中的每个值

Question

我有一个 div，在其中通过 javascript 输入和文本动态呈现。我正在 try catch 此 div 的文本(输入值和文本)。

我的第一步是捕获父 div:

let answerWrapper = document.getElementById("typing-answer-wrapper");

现在的问题是，使用innerHTML将为我提供带有给定标签的整个html字符串，而使用inerText将为我提供文本，不包括标签。

在以下情况下:

控制台检查是:

如何捕获:如果输入有 2 和 4，则为 2.4 美元 如果输入为空，则返回 $null.null。

欢迎任何帮助

Answer 1

您可以迭代该元素的所有子节点，并将它们的 wholeText 或 value 或“null”连接起来。对于输入，wholeText 将是未定义的。如果它们没有值，我们将返回“null”。请注意，空格和换行符也将包含在内，因此您可能需要稍后删除它们(或在循环中跳过它们)，但作为概念证明，请参阅以下示例:

var typingAnswerWrapper = document.getElementById("typing-answer-wrapper");
function getVal(){ 
  var nodeList = typingAnswerWrapper.childNodes;
  var str = "";
  for (var i = 0; i < nodeList.length; i++) {
    var item = nodeList[i];
    str+=(item.wholeText || item.value || "null");
  }
  console.log(str);
}
getVal();
//added a delegated change event for demo purposes:
typingAnswerWrapper.addEventListener('change', function(e){
  if(e.target.matches("input")){
    getVal();
  }
});

<div id="typing-answer-wrapper">$<input type="number" value=""/>.<input type="number" value="" />
</div>