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

Springboot uses vue+echarts front-end and back-end interaction to realize dynamic donut chart

Table of contents Preface 1. Environment Configur...

Two solutions to the problem of MySQL in conditional statement only reading one piece of information

Today, my colleague encountered a very strange pr...

Analysis of Context application scenarios in React

Context definition and purpose Context provides a...

Detailed explanation of ensuring the consistency of MySQL views (with check option)

This article uses an example to illustrate how to...

MySql quick insert tens of millions of large data examples

In the field of data analysis, database is our go...

Implementation of master-slave replication in docker compose deployment

Table of contents Configuration parsing Service C...

How to completely uninstall node and npm on mac

npm uninstall sudo npm uninstall npm -g If you en...

How to install Oracle_11g using Docker

Install Oracle_11g with Docker 1. Pull the oracle...

HTML table tag tutorial (24): horizontal alignment attribute of the row ALIGN

In the horizontal direction, you can set the row ...

WeChat applet scroll-view realizes left-right linkage effect

WeChat applet uses scroll-view to achieve left-ri...

What are the core modules of node.js

Table of contents Global Object Global objects an...

HTML+CSS makes div tag add delete icon in the upper right corner sample code

1. Requirements description Display the delete ic...

Tools to convert static websites into RSS

<br /> This article is translated from allwe...

Detailed explanation of fs module and Path module methods in Node.js

Overview: The filesystem module is a simple wrapp...

A question about border-radius value setting

Problem Record Today I was going to complete a sm...