<!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>
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步