Shulou(Shulou.com)06/02 Report--

Editor to share with you the JavaScript document object model DOM example analysis, I believe that most people do not know much about it, so share this article for your reference, I hope you will learn a lot after reading this article, let's go to understand it!

Foreword:

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

1. JavaScript can change all HTML elements in the page. 1. Find HTML elements through id

Find a specific tag on HTML and modify it

Who am I var x = document.getElementById ("001"); x [XSS _ clean] = "I am brave Niuniu, not afraid of difficulties"; Hello Niuniu!

This example shows the getElementById method!

X=document.getElementById ("intro"); [xss_clean] ("

The text comes from the intro paragraph id: "+ x [XSS _ clean] +"

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

Look for the element of id= "main", and then look for the first element in the id= "main" element

Elements:

/ / the first way to write var x=document.getElementById ("main"); var y=x.getElementsByTagName ("p") [0]; / / find all the p tags in HTML and replace the first tag content with var y = document.getElementsByTagName ("p"); y [0] [xss_clean] = "brave cow, not afraid of difficulties" var x=document.getElementById ("main"); var y=x.getElementsByTagName ("p") [xss_clean] (the first paragraph in the 'id= "main element is:' + y [0] [xss_clean]); 3. Find the HTML element by the class name.

This example shows the getElementsByClassName method!

X = document.getElementsByClassName ("intro"); [xss_clean] ("

The text comes from the intro paragraph class: "+ x [0] [xss_clean] +"

")

Modify the element content of this type of tag:

Hello, Niu Niu!

This example shows the getElementsByClassName method!

X = document.getElementsByClassName ("intro") [0]; x [XSS _ clean] = "modify tag content"; / / [xss_clean] ("

The text comes from the intro paragraph class: "+ x [0] [xss_clean] +"

4. JavaScript can change all the HTML properties in the page

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

Document.getElementById (id) .attribute = new attribute value

Document.getElementById ("image") .src = "landscape.jpg"

The original picture is smiley.gif, and the script modifies it to landscape.jpg.

5. JavaScript can change all CSS styles in the page.

JavaScript HTML DOM-change CSS

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

Document.getElementById (id) .style.property = New style

Title Hello World!

Hello World!

Document.getElementById ("p2") .style.color = "blue"; document.getElementById ("p2") .style.fontFamily = "Arial"; document.getElementById ("p2") .style.fontSize = "larger"

The above paragraphs are modified by script.

6. JavaScript can respond to all the events on the page

HTML DOM to assign events:

What kind of function is triggered when I do something?

Click the button to execute the displayDate () function.

Click me document.getElementById ("myBtn"). Onclick=function () {displayDate ()}; function displayDate () {document.getElementById ("demo") [xss_clean] = Date ();}

As follows:

The onmouseover and onmouseout events can be used to trigger a function when the mouse pointer moves to or away from an element.

Mouse Over Me function mOver (obj) {obj [XSS _ clean] = "Thank You"} function mOut (obj) {obj [XSS _ clean] = "Mouse Over Me"}

These are all the contents of the article "sample Analysis of the JavaScript document object Model DOM". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.