This is the 15th day of my participation in Gwen Challenge

Case data:

<div id="wrap">
  <div id="city">city<div id="sh" class="east">Shanghai</div>
    <div id="gz" class="south">Guangzhou</div>
    <div id="xa" class="west">Xi 'an</div>
    <div id="bj" class="north">Beijing</div>
  </div>
</div>
Copy the code

1. Method of obtaining child nodes

1.1 Directly obtain child nodes by obtaining DOM

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

GetElementsByTagName returns an array that is accessed as an array.

1.2 obtaining childNodes by using childNodes

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

When you use childNodes to retrieve childNodes, childNodes returns a collection of childNodes in an array format. It also treats line breaks and Spaces as node information.

To prevent unnecessary newline whitespace from being displayed, use regular expressions to filter out unnecessary information.

  // Remove newline Spaces
  for(var i = 0; i < target.length; i++){
    if(target[i].nodeName == "#text"&&!/\s/.test(target.nodeValue)){
      document.getElementById("city").removeChild(target[i]); }}// Print tests
  for(var i = 0; i < target.length; i++){
    console.log(target[i]);
  }
  / / added document. GetElementById (" city "). ChildElementCount; Can directly get the length of the same length
Copy the code

1.3 Obtain child nodes through children

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

Children is the easiest way to get the children, which returns an array. Access to its child elements is simply an array access.

1.4 firstChild gets the firstChild

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

FirstChild to get the firstChild element, but in some cases we print undefined, what is that? FirstChild is the same as childNodes. The browser will parse a newline and a space together to get the firstChild, but the child is either a newline or a space, so do not forget to treat firstChild as childNodes.

1.5 firstElementChild Gets the first child

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

When we use firstElementChild to get the firstChild element, we get the node of the firstChild element of the parent element, which is not the case with firstChild (matching newline and space information), so we can display the text information directly.

1.6 Obtaining the last child Node

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

LastChild gets the lastChild in a similar way to firstChild, as does lastElementChild and firstElementChild.

2. Method of obtaining the parent node

2.1 parentNode obtaining the parentNode

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

Gets the immediate parent of the current element. ParentNode is a W3C standard.

2.2 parentElement Obtaining the parent node

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

ParentElement is the same as parentNode except that parentElement is the ie standard.

2.3 offsetParent Obtains the parent node

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

Offset we know is the offset. In fact, this is the upper and lower level related to position. It can directly obtain all parent nodes, and the corresponding value is the information of all nodes under body.

3. Method of obtaining sibling nodes

3.1 Obtain the parent node first, then the child node, and finally the sibling node

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

3.2 Obtaining the previous sibling node

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

We can use previousSibling and previousElementSibling when we get the previousSibling. Difference: previousSibling matches characters including newlines and Spaces, not nodes, whereas previousElementSibling matches nodes directly.

3.3 Obtaining the next sibling Node

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

You can use nextSibling and nextElementSibling when retrieving the previous sibling node. Difference: nextSibling matches characters including newlines and Spaces, not nodes, while nextElementSibling matches nodes directly.