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 to implement cross-domain API proxy forwarding through Nginx proxy forwarding configuration

Preface In WEB development, we often involve cros...

25 div+css programming tips and tricks

1. The ul tag has a padding value by default in M...

In-depth analysis of Vue's responsive principle and bidirectional data

Understanding object.defineProperty to achieve re...

js to implement collision detection

This article example shares the specific code of ...

Vue project code splitting solution

Table of contents background Purpose Before split...

MySQL 8.0.16 winx64 installation and configuration method graphic tutorial

I just started learning about databases recently....

CSS to achieve horizontal lines on both sides of the middle text

1. The vertical-align property achieves the follo...

Detailed explanation of Nginx's control over access volume

Purpose Understand the Nginx ngx_http_limit_conn_...

Understanding JSON (JavaScript Object Notation) in one article

Table of contents JSON appears Json structure Jso...

Operate on two columns of data as new columns in sql

As shown below: select a1,a2,a1+a2 a,a1*a2 b,a1*1...

JS implements circular progress bar drag and slide

This article example shares the specific code of ...

Alibaba Cloud Ubuntu 16.04 builds IPSec service

Introduction to IPSec IPSec (Internet Protocol Se...

How to view nginx configuration file path and resource file path

View the nginx configuration file path Through ng...

Detailed explanation of samba folder sharing server configuration under centos

1. Introduction Recently I found that there are m...

Vue imports excel table, and automatically downloads the data that failed to import

There is such a requirement: an import button, cl...