Question

  var geth4text = document.querySelector("#post > div > h4").innerHTML;
  var text = "";

var i;
for (i = 0; i < geth4text.length; i++) {
s = geth4text[i]


  text +=  "<li>"+s+"</li>";
}
for (i = 0; i < geth4text.length; i++) {

}

document.getElementById("demo").innerHTML = text;

<div id="post"><div> 
  <h4>Example 1</h4>
  <h4>Example 2</h4>
  <h4>Example 3</h4>
  <h4>Example 4</h4>
  <h4>Example 5</h4>
  </div></div>


<span>Example</span>
    <div id="demo"></div>

此代码输出或h4内容中的所有字符
我正在尝试提取第一个公式中但在“ <li>”

中的总和

Answer 1

querySelector返回与查询匹配的第一个元素；另一方面，querySelectorAll返回与查询匹配的所有元素。

但是，querySelectorAll返回一个可迭代但不是数组的数组，因此我们可以使用[...querySelectorAll('')]扩展运算符来构造元素数组。

var geth4text = [...document.querySelectorAll("#post > div > h4")].map(h4 => h4.innerText);
var text = "";

var i;
for (i = 0; i < geth4text.length; i++) {
	s = geth4text[i]


	text += "<li>" + s + "</li>";
}
for (i = 0; i < geth4text.length; i++) {

}

document.getElementById("demo").innerHTML = text;

<div id="post">
	<div>
		<h4>Example 1</h4>
		<h4>Example 2</h4>
		<h4>Example 3</h4>
		<h4>Example 4</h4>
		<h4>Example 5</h4>
	</div>
</div>


<span>Example</span>
<div id="demo"></div>

Answer 2

只要可以提高性能，就使用createElement / appendChild而不是.innerHTML：

const list = document.getElementById('demo');
document.querySelectorAll('#post > div > h4').forEach(headline => {
   let listItem = document.createElement('li');
   listItem.innerText = headline.innerText;
   list.appendChild(listItem);
});

<div id="post">
  <div> 
    <h4>Example 1</h4>
    <h4>Example 2</h4>
    <h4>Example 3</h4>
    <h4>Example 4</h4>
    <h4>Example 5</h4>
  </div>
</div>


<span>Example</span>
<ul id="demo"></ul>

Answer 3

在查询多个元素时，您需要使用querySelectorAll而不是querySelector。 querySelectorAll返回一个NodeList，它（很像一个数组）公开了n个forEach方法，我们可以使用该方法来迭代元素。另外，您应该使用document.appendChild而不是仅设置innerHTML（here's an explanation why）。

const demoEl = document.getElementById("demo");

document
  .querySelectorAll("#post > div > h4")
  .forEach(
    ({ innerHTML }) =>
      (demoEl.appendChild(document.createElement("li")).innerHTML = innerHTML)
  );

<div id="post">
  <div> 
    <h4>Example 1</h4>
    <h4>Example 2</h4>
    <h4>Example 3</h4>
    <h4>Example 4</h4>
    <h4>Example 5</h4>
  </div>
</div>


<span>Example</span>
<ul id="demo"></ul>

Answer 4

只需将标记#demo设为ul而不是div

我的h4内容提取代码有问题

4 个答案: