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

This article mainly explains "JavaScript how to find and modify the content of HTML elements based on Dom operation". The content of the article is simple and clear, and it is easy to learn and understand. Please follow Xiaobian's train of thought to study and learn "JavaScript how to find and modify the content of HTML elements based on Dom operation".

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"} thank you for your reading. This is the content of "how to find and modify the contents of HTML elements based on Dom operation in JavaScript". After the study of this article, I believe that you have a deeper understanding of how JavaScript can find and modify the content of HTML elements based on Dom operation, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

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.