Node Operation - DOM Programming

1. Obtain node

Direct access node 1.1

Parent-child relationship:

element.parentNode
element.firstChild/element.lastChild
element.firstElementChild/element.lastElementChild
element.childNodes/element.children

Brotherhood:

element.previousSibling/element.nextSibling
element.previousElementSibling/element.nextElementSibling

<body>
  <ul id="ul">
    <li>First</li>
    <li>Second</li>
    <li>Third</li>
    <li>Fourth</li>
  </ul>
  <p>Hello</p>
</body>

var ulNode = document.getElementsByTagName("ul")[0];
console.log(ulNode.parentNode);             //<body></body>
console.log(ulNode.previousElementSibling); //null
console.log(ulNode.nextElementSibling);     //<p>Hello</p>
console.log(ulNode.firstElementChild);      //<li>First</li>
console.log(ulNode.lastElementChild);       //<li>Fourth</li>

1.2 Get node through the interface

getElementById
getElementsByTagName
getElementsByClassName
querySelector
querySelectorAll

getElementById
obtain the document specified idnode object. getElementByIdOnly act on document, returns a unique value.

var element = document.getElementById('id');

getElementsByTagName
Gets the element node label set. This interface can be directly obtained by the element, without directly acting documenton.

  <ul id="ul">
    <li>First</li>
    <li>Second</li>
    <li>Third</li>
    <li>Fourth</li>
  </ul>

var ul = document.getElementById('ul');
console.log(ul.getElementsByTagName('li')); // HTMLCollection(4) [li, li, li, li]
console.log(document.getElementsByTagName('li')); // HTMLCollection(4) [li, li, li, li]
// 取出第一个li元素
console.log(document.getElementsByTagName('li')[0]); // <li>First</li>

getElementsByClassName
Gets the element having specified classall nodes. Plurality classmay be selected to be separated by a space, regardless of the order.

  <ul id="ul">
    <li class="li first">First</li>
    <li>Second</li>
    <li>Third</li>
    <li>Fourth</li>
  </ul>

var body = document.getElementsByTagName('body')[0];
console.log(body.getElementsByClassName('li first')); // HTMLCollection [li.li.first]
console.log(body.getElementsByClassName('first li')); // HTMLCollection [li.li.first]

console.log(document.getElementsByClassName('li first')); // HTMLCollection [li.li.first]
console.log(document.getElementsByClassName('first li')); // HTMLCollection [li.li.first]

querySelector / querySelectorAll

  <ul id="ul">
    <li class="aaa">First</li>
    <li class="aaa">Second</li>
    <li>Third</li>
    <li>Fourth</li>
  </ul>

var ul = document.getElementById('ul');
console.log(ul.querySelector('.aaa')); // <li class="aaa">First</li>
console.log(ul.querySelectorAll('.aaa')); // NodeList(2) [li.aaa, li.aaa]

console.log(document.querySelector('.aaa')); // <li class="aaa">First</li>
console.log(document.querySelectorAll('.aaa')); // NodeList(2) [li.aaa, li.aaa]

2. Create a node

2.1 creates an element node

document.createElement('tagName')

2.2 Create a text node

document.createTextNode('text')

3. Modify the node

3.1 modify text

Gets or text contents to the node and its descendant nodes.

<p class="p">Hello</p>

var p = document.getElementsByTagName('p')[0];
console.log(p.textContent); // Hello
console.log(p.innerText); // Hello

textContentAnd innerTextthe effect is the same.

3.2 innerHTML

Gets or sets all of the nodes in the specified HTMLcontent.

var elementsHTML = element.innerHTML;

4. Insert the nodes

appendChild
additional element nodes within a specified element.

<ul id="tea">
    <li>红茶</li>
    <li>绿茶</li>
    <li>普洱茶</li>
</ul>
<ul id="drink">
    <li>咖啡</li>
    <li>牛奶</li>
    <li>果汁</li>
</ul>

var drink = document.getElementById('drink');
var li = document.createElement('li');
li.innerText = '啤酒';
drink.appendChild(li);

insertBefore
inserted before specified element specified nodes specified element.

var tea = document.getElementById('tea');
var li = document.createElement('li');
li.innerText = '凉茶';
tea.insertBefore(li, tea.firstChild);

5. Delete Node

<ul id="tea">
    <li>红茶</li>
    <li>绿茶</li>
    <li id="puer">普洱茶</li>
</ul>
<ul id="drink">
    <li>咖啡</li>
    <li>牛奶</li>
    <li>果汁</li>
</ul>

var tea = document.getElementById('tea');
tea.removeChild(document.getElementById('puer'));

reference:

Front-end development node operation notebook