JavaScript Dom Object Operations

1. Core

1. Get the Dom node
2. Update Node

2.1 Practical Exercise

3. Delete Dom node

4. Insert node

4.1 Insert existing tags
4.2 Create a new tag to insert
4.3 Insert before child node (insertBefore)

1. Core

The browser web page is a Dom tree structure

Update: Update Dom node
Traversing Dom nodes: Get Dom nodes
Delete: Delete a Dom node
Add: Add a new node

To operate a Dom node, you must first obtain the Dom node

1. Get the Dom node

 <body>
    <div id="div1">
   <h1 id="h"></h1>
   <p class="p1"></p>
   </div>
 </body>

 //By tag document.getElementsByTagName('h1');
  //By id
   document.getElementById('div1');
  //Through class
   document.getElementsByClassName('p1');
  //Get the parent node h.parentElement
  //Get all child nodes under the parent node div1.children[index];
  //Get the first node div1.firstElementChild under the current node;
  //Get the last node div1.lastElementChild under the current node;
  //Get the next node h.nextElementSibling;

2. Update Node

   //Update the value of the text div1.innerText='Modify the value of the text'; 
   //Update hypertext, you can parse html text tags div1.innerHTML='<strong>Add hypertext</storng>';
   //Update css
   div1.style.color='red';
   div1.style.fontSize='20px';//CamelCase naming div1.style.padding='2em';

2.1 Practical Exercise

Get id

Before the change

Operation Input

3. Delete Dom node

Steps to delete a node: first get the parent node, then delete yourself through the parent node

let self=document.getElementById('p1');//Get the deleted node let father=self.parentElement//Get the parent node father.removeChild(self);//Delete the node through the parent node

Note: When deleting a node, the sub-node array is constantly changing, so it cannot be deleted statically and continuously through the array, but can only be deleted dynamically multiple times.

4. Insert node

We get a Dom node. Assuming that this Dom node is empty, we can add an element through innerHtML . However, if this Dom node already has an element, it will be overwritten.

 <body>
 
  <p id="p1">Java</p>
  <div id="div1">
  <p>JavaScript</p>
  <p>css</p>
  <p>C</p>
  </div>
 </body>

4.1 Insert existing tags

let a=document.getElementById('div1');
let b = document.getElementById('p1');
a.appendChild(b);//append

Effect

4.2 Create a new tag to insert

   let a=document.createElement('p');//Create node p tag a.id='p2';
   a.innerText='hello, Xiao Shen';
   let list = document.getElementById('div1'); //Get div1 id
   list.appendChild(a); //Append child nodes //Create label nodes let a=document.createElement('script');
   a.setAttribute('type','text/javascript');

Effect:

 //Create style tag node let st=document.createElement('style');
   st.setAttribute('type','text/css');
   st.innerHTML='body{ background-color:pink;}';
   let hd = document.getElementsByTagName('head')[0]; //Note that head is the 0th element.
   hd.appendChild(st);

Effect:

4.3 Insert before child node (insertBefore)

<html>
 <head>
  <meta charset="utf-8">
  <title></title>
 </head>
 <body>
 
  <p id="p1">Java</p>
  <div id="div1">
  JavaScript
  <p id='p2'>css</p>
  <p id="p3">C</p>
  </div>
  <script type="text/javascript">
  //The parent node with child nodes let list = document.getElementById('div1');
  let self = document.getElementById('p2');
  let before=document.getElementById('p1');
  list.insertBefore(before,self);

  </script>
 </body>
</html>

Effect:

This is the end of this article about JavaScript Dom object operations. For more relevant JavaScript Dom object operations, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!

You may also be interested in:

JavaScript Document Object Model DOM
Document Object Model (DOM) in JavaScript
All properties of JavaScript variable Dom object
Example of how to access a specified node in a DOM object using JS
A brief discussion on how to read custom attributes of DOM objects (tags) using JS
Detailed explanation of common attribute methods of document objects in DOM in js basics
Detailed explanation of the attribute methods of element objects in DOM in js basics
JavaScript implements DOM object selector
JavaScript DOM Objects in-depth understanding
JavaScript - DOM Operation - Detailed Explanation of Window.document Object
jQuery objects and JavaScript objects, i.e. DOM objects, are converted to each other
js object relationship diagram facilitates dom operation
JavaScript DOM object learning example code
Detailed explanation of JavaScript operations on DOM objects

<<: Usage instructions for the docker create command

>>: Summary of principles for writing HTML pages for emails