JavaScript Document Object Model DOM

JavaScript Document Object Model DOM

Preface:

When a web page is loaded, the browser creates Document Object Model for the page. Through the programmable object model, JavaScript has gained enough power to create dynamic HTML .

1. JavaScript can change all HTML elements in the page

1. Find HTML element by id

Find a specific HTML tag and modify it

<body>
    <div calss="001">Who am I</div>
    <script>
        var x = document.getElementById("001");
        x.innerHTML = "I am a brave bull, not afraid of difficulties";
    </script>
</body>
<body>

 <p id="intro">Hello Niu Niu!</p>
 <p>This example demonstrates the <b>getElementById</b> method!</p>
 <script>
  x=document.getElementById("intro");
  document.write("<p>Text from paragraph with id intro: " + x.innerHTML + "</p>");
 </script>

</body>

2. Find HTML elements by tag name

var x = document.getElementById("main");
var y=x.getElementsByTagName("p");
document.write('The first paragraph in the id="main" element is:' + y[0].innerHTML);

Find the element with id=“main” , then find the first <p> element within the element id=“main” :

//The first way to write it var x = document.getElementById("main");
var y = x.getElementsByTagName("p")[0];



//Find all the p tags in HTML and replace the first tag content var y = document.getElementsByTagName("p");
y[0].innerHTML = "Brave Bull, not afraid of difficulties"



<script>
 var x = document.getElementById("main");
 var y=x.getElementsByTagName("p");
 document.write('The first paragraph in the id="main" element is:' + y[0].innerHTML);
</script>

3. Find HTML elements by class name

<body>
    <p class="intro">Hello Niu Niu!</p>
    <p>This example demonstrates the <b>getElementsByClassName</b> method!</p>
    <script>
        x = document.getElementsByClassName("intro");
        document.write("<p>Text from class intro paragraph: " + x[0].innerHTML + "</p>");
    </script>
</body>

Modify the element content of such tags:

<body>
    <p class="intro">Hello Niu Niu!</p>
    <p>This example demonstrates the <b>getElementsByClassName</b> method!</p>
    <script>
        x = document.getElementsByClassName("intro")[0];
        x.innerHTML = "Modify tag content";
        // document.write("<p>Text from class intro paragraph: " + x[0].innerHTML + "</p>");
    </script>
</body>

4. JavaScript can change all HTML attributes in the page

To change the attributes of an HTML element, use this syntax:

document.getElementById(id).attribute=new attribute value <img id="image" src="smiley.gif" width="160" height="120">
<script>
 document.getElementById("image").src="landscape.jpg";
</script>
<p>The original image is smiley.gif, the script changes the image to landscape.jpg</p>

5. JavaScript can change all CSS styles on the page

JavaScript HTML DOM - Changing CSS

To change the style of an HTML element, use this syntax:

document.getElementById(id).style.property=新樣式

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title>title</title>
</head>
<body>
 <p id="p1">Hello World!</p>
 <p id="p2">Hello World!</p>
 <script>
  document.getElementById("p2").style.color="blue";
  document.getElementById("p2").style.fontFamily="Arial";
  document.getElementById("p2").style.fontSize="larger";
 </script>
 <p>The above paragraphs are modified by script. </p>
</body>
</html>

6. JavaScript can respond to all events on the page

HTML DOM to dispatch events:

What it means is : when I do something, a certain function is triggered.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>

 <p>Clicking the button executes the <em>displayDate()</em> function. </p>
 
 <button id="myBtn">Click me</button>
 
 <script>
  document.getElementById("myBtn").onclick=function(){
   displayDate()};
  function displayDate()
  {
   
      document.getElementById("demo").innerHTML=Date();
  }
 </script>
 
 <p id="demo"></p>

</body>
</html>

as follows:

The onmouseover and onmouseout events can be used to trigger functions when the mouse pointer moves to or leaves an element.

<!DOCTYPE html>
<html><head>
<meta charset="utf-8">
</head>
<body>

 <div onmouseover="mOver(this)" onmouseout="mOut(this)" style="background-color:#D94A38;width:120px;height:20px;padding:40px;">Mouse Over Me</div>
 
 <script>
  function mOver(obj)
  {
   
   obj.innerHTML="Thank You"
  }
  
  function mOut(obj)
  {
   
   obj.innerHTML="Mouse Over Me"
  }
 </script>

</body>
</html>

This is the end of this article about JavaScript Document Object Model DOM. For more relevant JavaScript Document Object Model content, 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 Dom Object Operations
  • 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

<<:  What is the function and writing order of the a tag pseudo class

>>:  Design perspective technology is an important capital of design ability

Recommend

How does WeChat Mini Program obtain user information and user phone number at the same time

When I was writing the login page today, I needed...

Detailed explanation of MySQL precompilation function

This article shares the MySQL precompilation func...

Let's learn about the MySQL storage engine

Table of contents Preface 1. MySQL main storage e...

10 issues that must be considered when designing and building large-scale website architecture

We are not discussing PHP, JSP or .NET environmen...

How to install PostgreSQL and PostGIS using yum on CentOS7

1. Update the yum source The PostgreSQL version o...

What are the advantages of using B+ tree index in MySQL?

Before understanding this problem, let's firs...

XHTML Web Page Tutorial

This article is mainly to let beginners understan...

Example of CSS3 to achieve div sliding in and out from bottom to top

1. First, you need to use the target selector of ...

Implementation example of scan code payment in vue project (with demo)

Table of contents Demand background Thought Analy...

html base url tag

Its function is to set a global style. Then your s...

Example of implementing a virtual list in WeChat Mini Program

Table of contents Preface analyze Initial Renderi...

Example of horizontal and vertical centering of div sub-element using CSS

Div basic layout <div class="main"&g...

How to create a web wireframe using Photoshop

This post introduces a set of free Photoshop wire...

How to solve "Unable to start mysql service error 1069"

Today, when I was on the road, a colleague sent m...

Detailed installation instructions for the cloud server pagoda panel

Table of contents 0x01. Install the Pagoda Panel ...