Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

ReplaceChild, cloneNode, removeChild, replace node, cloneNode, and delete node are the three apis for DOM manipulation. The syntax and use cases of these apis are as follows:

replaceChild()

ReplaceChild () replaces nodes in the DOM

Grammar:

parentNode.replaceChild(newChild, oldChild);
Copy the code

example

<ul id="menu">
  <li>Home page</li>
  <li>service</li>   
  <li>About me</li>
  <li>To contact me</li>
</ul>

<script>
let menu = document.getElementById('menu');
Create a new node
let li = document.createElement('li');
li.textContent = 'the little handsome';
// Replace the first element
menu.replaceChild(li, menu.firstElementChild);
</script>
Copy the code

cloneNode()

CloneNode () is used to clone an element

Grammar:

let clonedNode = originalNode.cloneNode(deep);
Copy the code

Parameter Description:

  • ifdeepfortrue, clones all the children of the element
  • ifdeepforfalse, clones only the original node, not the child element
  • originalNodeIs the target element to clone
  • Finally, the cloned element is returned

Note:

In addition to cloning the DOM structure, cloneNode() copies all the attributes and inline event listeners of the original node. However, it does not copy the event listener added via addEventListener() or the event listener of OriginalNode.onclick = eventHandler(). If you clone a node with an ID attribute and put the cloned nodes on the same page, the ids will be repeated. In this case, you need to change the ID before adding it to the DOM tree.

example

<! DOCTYPEhtml>
<html>
<head>
  <meta charset="utf-8">
  <title>JavaScript cloneNode() Demo</title>
</head>
<body>
  <ul id="menu">
    <li>Home page</li>
    <li>service</li>   
    <li>About me</li>
    <li>To contact me</li>
  </ul>
  <script>
    let menu = document.querySelector('#menu');
    let clonedMenu = menu.cloneNode(true);
    clonedMenu.id = 'menu-mobile';
    document.body.appendChild(clonedMenu);
  </script>
</body>
</html>
Copy the code

  1. Find the #menu element first

  2. It is then cloned via cloneNode()

  3. Change its ID

  4. Finally, insert it into the body

The final HTML structure is

removeChild()

You can use removeChild() to remove DOM elements

Grammar:

let childNode = parentNode.removeChild(childNode);
Copy the code

ChildNode is the childNode of the parentNode to be deleted. This method throws an exception if childNode is not a child of parentNode. RemoveChild () returns the child nodes removed from the DOM tree, but keeps them in memory for later use. If you do not want to keep the removed child node in memory, use the following syntax:

parentNode.removeChild(childNode);
Copy the code

example

Deletes the last child element under ul

<ul id="menu">
  <li>Home page</li>
  <li>product</li>
  <li>About us</li>
</ul>

<script>
let menu = document.getElementById('menu');
menu.removeChild(menu.lastElementChild);
</script>
Copy the code

Remove all nodes using the removeChild() method

<ul id="menu">
  <li>Home page</li>
  <li>product</li>
  <li>About us</li>
</ul>

<script>
let menu = document.getElementById('menu');
while (menu.firstChild) {
  menu.removeChild(menu.firstChild);
}
</script>
Copy the code

You can also delete all nodes using innerHTML

<ul id="menu">
  <li>Home page</li>
  <li>product</li>
  <li>About us</li>
</ul>

<script>
let menu = document.getElementById('menu');
menu.innerHTML = ' ';
</script>
Copy the code

The last

Today we reviewed the replaceChild(), cloneNode() and removeChild() methods. How are they different from jQuery and methods?

If you want to review DOM knowledge with me, wechat search [Xiaoshuai’s programming notes], updated every day