0

要素が空かどうかを調べたい。おそらくこれは、人々が innerText と innerHTML の違いを理解するのにも役立つ最良の例の 1 つです。

以下に例を示します。

1. <div> <!-- Just a comment node is present inside a div --> </div>

2. <div> <span></span> </div>

3. <div> hi </div>

4. <div> hello <!-- world --> I know javascript </div>

5. <div>    </div>

Example_Number | インナー HTML | 内側のテキスト | #childElements | isElementEmpty(結果)

1 ………………| 空ではありません...| 空……| 0......................| はい

2 ………………| 空ではありません...| 空……| 1......................| いいえ

3 ………………| 空ではありません...| 空ではありません..| 0......................| いいえ

4 ………………| 空ではありません...| 空ではありません..| 0......................| いいえ

5 ………………| 空……| 空……| 0......................| はい

#5 では、トリミングされた値が考慮されます。

明らかに、innerHTML は、要素が空かどうかのチェックには寄与しません。ここで、innerText/textContent と numberOfChildElement がどのように寄与するかを確認する必要があります。したがって、上記の調査結果に基づいて、私は結論付けました

これらの両方の条件が満たされた場合、要素は空です。

  1. Trimmerd innerText/textContent が空です。(#5 を満たす)
  2. 子要素の数が 0 です。(#2 を満たす)

したがって、コードは次のようになります

function isEmpty(element) {
  return (element.textContent.trim() && element.childElementCount == 0);
}

私は自分のアプローチを検証し、ここでユースケースを見逃しているかどうか、またはより良いソリューションが本当に役立つかどうかを伝えたいだけです.

4

2 に答える 2

1

内部テキスト はプレーン テキストです"<b>sdasdas</b>" will be shown as "<b>sdasdas</b>。
"<b>sdasdas</b>" will be shown as "sdasdas" in bold letters

于 2014-05-29T05:47:14.783 に答える
0

innerText と innerHTML の違いやその他の関連機能を理解するのに役立つ例を用意しました

<HTML><BODY>
<div id="div1">
<H1><B>Hi<I> There</I></B></H1>
</div>
innerText: Works only in IE browser<br/>
innerHTML: work on all browser and return html content<br/>
textContent : Remove html tag from content<br/>
Jquery function to get text / HTML <br/>
.text()<br/>
.html()<br/>
<input id="innerText" type="button" value="innerText"/>
<input id="innerHTML" type="button" value="innerText"/>
<input id="textContent" type="button" value="textContent"/>
<input id="text" type="button" value=".text()"/>
<input id="html" type="button" value=".html()"/>


$( "#innerText" ).click(function() {

alert(document.getElementById("div1").innerText);
});

$( "#innerHTML" ).click(function() {
   alert(document.getElementById("div1").innerHTML);
});

$( "#textContent" ).click(function() {
   alert(document.getElementById("div1").textContent);
});

$( "#text" ).click(function() {
   alert( $("#div1").text());
});

$( "#html" ).click(function() {
   alert( $("#div1").html());
});
于 2014-05-29T06:24:36.187 に答える