Shulou(Shulou.com)05/31 Report--

Today, I would like to share with you how to find and modify the content of HTML elements based on Dom operation in JavaScript. The content is detailed and the logic is clear. I believe most people still know too much about this knowledge, so share this article for your reference. I hope you can get something after reading this article.

When a web page is loaded, the browser creates a document object model (Document Object Model) for the page. The HTML DOM model is constructed as a tree of objects.

Through the programmable object model, JavaScript gains enough power to create dynamic HTML. For example: change the HTML element, change the HTML attribute, change the CSS style, event response.

Effect picture:

Code:

Javascript HTML DOM body {background-color:#eeeeee} (1) find the HTML element Hello world through id!

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

The text of the paragraph of id= "hw" is:'+ x [XSS _ clean] +'

'); change the text of id= "hw" to the current time function setCurrentTime () {x = document.getElementById ("hw"); x [XSS _ clean] = Date ()} (II) find the HTML element by signature

This is a paragragph.

This is another paragragph.

Yes you're right! This is also paragragph.

Xx = document.getElementById ("mainDiv"); tagContents = xx.getElementsByTagName ("p"); [xss_clean] ("

Use Javascript to find the contents of the p tag under id mainDiv

(for) {var tag = tagContents [I] if (tagged destroy null) {[xss_clean] ("

"+ tag [XSS _ clean] +"

")} else {[xss_clean] ("

There are a total of "+ I +" articles.

") break;}} (3) modify the properties of HTML

Change picture resources

Function changeSrc () {x = document.getElementById ("bol"); if (x.src.match ("eg_bulboff.gif")) {x.src = "images/eg_bulbon.gif"} else {x.src = "images/eg_bulboff.gif"} (IV) modify the CSS style

This is a test paragraph. Change the font

This is HELLO WORLD. Show / hide sample text

Function changeTextColor () {ele_1 = document.getElementById ("para_1"); ele_1.style.color = "red";} function changeTextFont () {ele_2 = document.getElementById ("para_2"); ele_2.style.fontFamily = "Arial";} function changeTextSize () {ele_3 = document.getElementById ("para_3"); ele_3.style.fontSize = "larger" } document.getElementById ("para_4") .style.visibility = "visible" function changeVisibility () {ele_4 = document.getElementById ("para_4") If (ele_4.style.visibility.match ("visible")) {ele_4.style.visibility = "hidden"} else {ele_4.style.visibility = "visible"} above is all the content of the article "how to find and modify HTML elements in JavaScript based on Dom operation". Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to 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.