JavaScriptで子ノード、親ノード、兄弟ノードを取得する方法の概要

ケースデータ：

<div id="wrap">
  <div id="city">
    城市
    <div id="sh" class="east">上海</div>
    <div id="gz" class="south">广州</div>
    <div id="xa" class="west">西安</div>
    <div id="bj" class="north">北京</div>
  </div>
</div>

1.子ノードを取得する方法

1.1domを取得して子ノードを直接取得する

var target = document.getElementById('city').getElementsByTagName('div');

getElementsByTagNameが返すのは配列であり、アクセスするときに配列の形式でアクセスする必要があります。
ここに画像の説明を挿入します
1.2childNodesを介して子ノードを取得する

var target = document.getElementById('city').childNodes;

childNodesを使用して子ノードを取得する場合、childNodesは子ノードのコレクションを配列の形式で返します。
また、改行とスペースをノード情報として扱います。
ここに画像の説明を挿入します不要な改行スペースを表示しないためには、正規表現で不要な情報を除外する必要があります。

  // 去掉换行的空格
  for(var i = 0; i < target.length; i++){
    
    
    if(target[i].nodeName == "#text" && !/\s/.test(target.nodeValue)){
    
    
      document.getElementById("city").removeChild(target[i]);
    }
  }
  // 打印测试
  for(var i = 0; i < target.length; i++){
    
    
    console.log(target[i]);
  }
  // 补充 document.getElementById("city").childElementCount; 可以直接获取长度 同length

ここに画像の説明を挿入します
1.3子を介して子ノードを取得する

var target = document.getElementById('city').children;

子を使用して子要素を取得するのが最も便利です。配列を返します。その子要素へのアクセスは、配列のアクセス形式に従う必要があるだけです。
ここに画像の説明を挿入します
1.4firstChildは最初の子ノードを取得します

var getFirstChild = document.getElementById("city").firstChild;

firstChildは、最初の子要素を取得しますが、中にいくつかのケース、我々は印刷するときに我々は未定義表示されます。状況は何ですか？
実際、firstChildとchildNodesは同じです。ブラウザが解析すると、改行とスペースが一緒に解析されます。取得されるのは最初の子ノードですが、この子ノードは単なる改行またはスペースなので、使用しないでください。 childNodesと同じであることを忘れてください。
ここに画像の説明を挿入します

1.5firstElementChildは最初の子ノードを取得します

var target = document.getElementById('city').firstElementChild;

firstElementChildを使用して最初の子要素を取得する場合、firstChild（改行とスペース情報の一致）のような状況はなく、親要素の最初の子要素のノードが取得されるため、テキスト情報を表示できます。直接。
ここに画像の説明を挿入します
1.6最後の子ノードを取得する

var target1 = document.getElementById('city').lastChild;
var target2 = document.getElementById('city').lastElementChild;
console.log(target1,'-----',target2)

lastChildが最後の子ノードを取得する方法は実際にはfirstChildと同様であり、同じlastElementChildとfirstElementChildは同じです。
ここに画像の説明を挿入します

2.親ノードを取得する方法

2.1parentNodeは親ノードを取得します

var target = document.getElementById('sh').parentNode;

取得するのは現在の要素の直接の親要素であり、parentNodeはw3c標準です。
ここに画像の説明を挿入します
2.2親ノードを取得するためのparentElement

var target = document.getElementById('gz').parentElement;

parentElementは、parentElementがieの標準であることを除いて、parentNodeと同じです。
ここに画像の説明を挿入します
2.3offsetParentは親ノードを取得します

var target = document.getElementById('gz').offsetParent;

オフセットオフセットであることがわかっています。実際、これは位置に関連する上位レベルと下位レベルであり、すべての親ノードを直接取得できます。対応する値は、ボディの下のすべてのノードの情報です。
ここに画像の説明を挿入します

3.兄弟ノードを取得する方法

3.1最初に親ノードを取得し、次に子ノードを取得し、最後に兄弟ノードを取得します

var target = document.getElementById('sh').parentNode.children[1];

ここに画像の説明を挿入します
3.2最後の兄弟ノードを取得する

var target1 = document.getElementById('gz').previousElementSibling;
var target2 = document.getElementById('gz').previousSibling;
console.log(target1,'---',target2)

前の兄弟ノードを取得するときに、previousSiblingとpreviousElementSiblingを使用できます。
違い：previousSiblingはノードではなく改行とスペースを含む文字に一致し、previousElementSiblingはノードに直接一致します。
ここに画像の説明を挿入します
3.3次の兄弟ノードを取得する

var target1 = document.getElementById('gz').nextElementSibling;
var target2 = document.getElementById('gz').nextSibling;

前の兄弟ノードを取得するときに、nextSiblingとnextElementSiblingを使用できます。
違い：nextSiblingはノードではなく改行とスペースを含む文字に一致し、nextElementSiblingはノードに直接一致します。
ここに画像の説明を挿入します