JavaScriptのfirstChildプロパティ

firstChildプロパティには、DOMノードの最初の子DOMノードが含まれます。これは、、、またはのタイプである可能性がありtextます。たとえば、次のコードは、最初の要素のテキストを「ガス」から「水」に変更します。commentelement<li>

<ul id="example"><li>Gas</li><li>Food</li></ul>
<script>
  const list = document.querySelector('#example');
  list.firstChild.innerHTML = 'Water';
</script>

使用するときは空白が重要firstChildです！以下の例は、との間の空白を含むテキストノードを返すため、期待どおりに機能しません。firstChild<ul id="example"><li>

<ul id="example">
  <li>Gas</li>
  <li>Food</li>
</ul>
<script>
  const list = document.querySelector('#example');
  // `firstChild` below is a text node containing whitespace, **not** the first `<li>`
  list.firstChild.innerHTML = 'Water';
</script>

このプロパティを使用してfirstElementChildこの問題を回避し、テキストノードを無視して最初のDOM要素ノードを取得できます。

<ul id="firstElemChild">
  <li>Gas</li>
  <li>Food</li>
</ul>
<script>
  const elem = document.querySelector('#firstElemChild');
  elem.firstElementChild.innerHTML = 'Water';
</script>

DOMノードに子がない場合は、firstChildが含まれますnull。

<div id="example1"></div>
<script>
  // Prints "null"
  console.log(document.querySelector('#example1').firstChild);
</script>

ソース：https ：//masteringjs.io/tutorials/fundamentals/firstchild

#javascript #dom 

What is GEEK

Buddha Community

JavaScriptのfirstChildプロパティ

firstChildプロパティには、DOMノードの最初の子DOMノードが含まれます。これは、、、またはのタイプである可能性がありtextます。たとえば、次のコードは、最初の要素のテキストを「ガス」から「水」に変更します。commentelement<li>

<ul id="example"><li>Gas</li><li>Food</li></ul>
<script>
  const list = document.querySelector('#example');
  list.firstChild.innerHTML = 'Water';
</script>

使用するときは空白が重要firstChildです！以下の例は、との間の空白を含むテキストノードを返すため、期待どおりに機能しません。firstChild<ul id="example"><li>

<ul id="example">
  <li>Gas</li>
  <li>Food</li>
</ul>
<script>
  const list = document.querySelector('#example');
  // `firstChild` below is a text node containing whitespace, **not** the first `<li>`
  list.firstChild.innerHTML = 'Water';
</script>

このプロパティを使用してfirstElementChildこの問題を回避し、テキストノードを無視して最初のDOM要素ノードを取得できます。

<ul id="firstElemChild">
  <li>Gas</li>
  <li>Food</li>
</ul>
<script>
  const elem = document.querySelector('#firstElemChild');
  elem.firstElementChild.innerHTML = 'Water';
</script>

DOMノードに子がない場合は、firstChildが含まれますnull。

<div id="example1"></div>
<script>
  // Prints "null"
  console.log(document.querySelector('#example1').firstChild);
</script>

ソース：https ：//masteringjs.io/tutorials/fundamentals/firstchild

#javascript #dom