<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>DOM(innerHTML和className)</title> <style> .h{color: red}; .H3 { Color : Blue } ; </ style > ! <- n.innerHTML; obtaining a start tag element n - everything between the end tag n.innerHTML = "a"; n an element start tag - the end into everything between "a" n.className; Get class name of element n n.className = "b"; the class name into element n "B" -> </ head > < body > < H3 class = "H" > distal Books </ H3 > < UL ID = "listWeb" > < Li >< B > HTML base</ B > </ Li > < Li > the CSS based </ Li > < Li > the JavaScript based </ Li > < Li > Jquery frame </ Li > < Li > on Bootstrap frame </ Li > </ UL > < H3 > JAVA books </ h3 > < ul the above mentioned id = "listJava" > < li > JAVA language foundation </ Li > < Li > three frame </ Li > < Li > the JAVA layman </ Li > </ UL > < Script > var A = document.getElementById ( " listWeb " ) .getElementsByTagName ( " Li " ); the console.log (A [ 0 ] .innerHTML); // <B> HTML base </ B> the console.log (a [ 0 ] .innerHTML = " I re-assignment to the content of that element. " ); // I back to the element the contents of the assignment;That changed the original content console.log (A [ 0 ] .innerHTML + = " I was in the original content manager adds these " ); // I re-assignment element to this in my original content and manage these increases. var b = document.getElementsByClassName ( " H " ); the console.log (B [ 0 ] .className); // H; font color to red the console.log (B [ 0 ] .className = " H3 " ); // H3; re-assign the class name to the element, that is, to change the original class name // font color to blue </ Script > </ body > </ HTML >
DOM (innerHTML and className)
Guess you like
Origin www.cnblogs.com/vinson-blog/p/12041046.html
Recommended
Ranking