Summary of methods for obtaining child nodes, parent nodes, and sibling nodes in JavaScript

Case data:

<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. How to get child nodes

1.1 Get child nodes directly by getting dom

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

What getElementsByTagName returns is an array, which should be accessed in the form of an array when accessing.
Insert picture description here
1.2 Get child nodes through childNodes

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

When using childNodes to get child nodes, childNodes returns a collection of child nodes in the format of an array.
It will also treat newlines and spaces as node information.
Insert picture description here In order not to display unnecessary newline spaces, it is necessary to filter out unnecessary information through regular expressions.

  // 去掉换行的空格
  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

Insert picture description here
1.3 Get child nodes through children

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

It is most convenient to use children to get the child elements, it will return an array. The access to its child elements only needs to follow the access form of the array.
Insert picture description here
1.4 firstChild gets the first child node

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

firstChild to get the first child element, but in some cases we will display undefined when we print. What is the situation?
In fact, firstChild and childNodes are the same. When the browser parses, it will parse line breaks and spaces together. What you get is the first child node, but this child node is just a line break or a space, so don’t forget to be the same as childNodes. deal with.
Insert picture description here

1.5 firstElementChild gets the first child node

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

When firstElementChild is used to get the first child element, there is no situation like firstChild (matching line break and space information), and the node of the first child element of the parent element will be obtained, so that the text information can be displayed directly .
Insert picture description here
1.6 Get the last child node

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

The way lastChild gets the last child node is actually similar to firstChild, and the same lastElementChild and firstElementChild are the same.
Insert picture description here

2. The way to get the parent node

2.1 parentNode get the parent node

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

What gets is the direct parent element of the current element, and parentNode is the standard of w3c.
Insert picture description here
2.2 parentElement to get the parent node

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

parentElement is the same as parentNode, except that parentElement is the standard of ie.
Insert picture description here
2.3 offsetParent get the parent node

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

offset We know that it is the offset. In fact, this is the upper and lower levels related to the position, and all the parent nodes can be directly obtained. The corresponding value is the information of all the nodes under the body.
Insert picture description here

3. Ways to get sibling nodes

3.1 Get the parent node first, then get the child node, and finally get the sibling node

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

Insert picture description here
3.2 Get the last sibling node

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

You can use previousSibling and previousElementSibling when getting the previous sibling node.
Difference: previousSibling will match characters including newlines and spaces, not nodes, previousElementSibling will directly match nodes.
Insert picture description here
3.3 Get the next sibling node

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

You can use nextSibling and nextElementSibling when getting the previous sibling node.
Difference: nextSibling will match characters including newlines and spaces instead of nodes, and nextElementSibling will directly match nodes.
Insert picture description here