<!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;获取元素n开始标签-结束标签之间的所有内容 n.innerHTML="a";将元素n开始标签-结束标签之间的所有内容变成"a" n.className;获取元素n的类名 n.className="b";将元素n的类名改成"b" --> </head> <body> <h3 class="h">前端书籍</h3> <ul id="listWeb"> <li><b>html基础</b></li> <li>CSS基础</li> <li>JavaScript基础</li> <li>Jquery框架</li> <li>bootStrap框架</li> </ul> <h3>JAVA书籍</h3> <ul id="listJava"> <li>JAVA语言基础</li> <li>三大框架</li> <li>JAVA深入浅出</li> </ul> <script> var a=document.getElementById("listWeb").getElementsByTagName("li"); console.log(a[0].innerHTML);//<b>html基础</b> console.log(a[0].innerHTML="我重新给这个元素的内容赋值了.");//我重新给这个元素的内容赋值了;即改变了原有内容 console.log(a[0].innerHTML+="我又在原来的内容理增加了这些");//我重新给这个元素的内容赋值了.我又在原来的内容理增加了这些 var b=document.getElementsByClassName("h"); console.log(b[0].className);//h;字体颜色为红色 console.log(b[0].className="h3");//h3;重新给该元素类名赋值，即改变原有的类名//字体颜色变成了蓝色 </script> </body> </html>