<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!--HTML DOM--> <!--Document Object Model--> <!--JS能够改变页面中所有的HTML元素、属性、CSS样式及对所有事件做出反应--> <!-- 通过JS操作HTML元素的前提是找到该元素，有三种方法： 1.通过id找到HTML元素 2.通过标签名找到HTML元素 3.通过类名找到HTML元素 --> <!--通过id找到HTML元素--> <!--如果找到该元素,则该方法以对象(在x中)的形式返回该元素--> <!--如果未找到该元素,则x将包含null--> <p id="intro">Hello World!</p> <p>本例演示<b>getElementById</b>的用法</p> <script> x = document.getElementById("intro"); document.write("<p>id='intro'的段落中的文本是: " + x.innerHTML + "</p>"); </script> <!--通过标签名查找HTML元素--> <p>Hello World!</p> <div id="main"> <p>The DOM is very useful.</p> <p>本例演示<b>getElementsByTagName</b>方法</p> </div> <script> var x = document.getElementById("main"); var y = x.getElementsByTagName("p"); document.write('id 为"main"的div中的第一段文本是: ' + y[0].innerHTML + "<br />"); document.write('id 为"main"的div中的第二段文本是: ' + y[1].innerHTML + "<br />"); </script> <!--JS能够创建动态的HTML内容--> <script> document.write(Date() + "<br />"); </script> <!--修改HTML内容的最简单方法: 使用innerHTML属性--> <p id="p1">这是段落内容,JS可以改变它</p> <script> document.getElementById("p1").innerHTML="这是修改后的内容"; </script> <!--改变HTML属性--> <img id="image" src="海绵宝宝2.jpg" /> <script> document.getElementById("image").src="海绵宝宝1.gif"; </script> <p>上面的原始图片是静态的,JS把它换成一张动态的</p> <!--修改CSS样式--> <p id="p2">这是一段内容</p> <p id="p3">这是另一段内容</p> <script> document.getElementById("p2").style.color="blue"; document.getElementById("p3").style.fontSize="larger"; </script> <!--上面是直接对CSS样式修改,还可以通过点击按钮等形式来主动改变--> <h1 id="id1">这是最大的一个标题</h1> <button type="button" onclick="document.getElementById('id1').style.color='red'">点击我可以改变大标题的字体颜色</button> <!--使元素可见或不可见--> <p id="p4">这是一段文本,可被隐藏或显示可见</p> <input type="button" value="隐藏文本" onclick="document.getElementById('p4').style.visibility='hidden'" /> <input type="button" value="显示文本" onclick="document.getElementById('p4').style.visibility='visible'" /> <!--对事情做出反应--> <!--可以在事件发生时执行JS,比如当用户在HTML元素上点击时--> <h1 onclick="this.innerHTML='谢谢!'">点击我会发生改变</h1> <!--通过调用函数来改变--> <script> function changetext(id) { id.innerHTML="标题已经被改变"; } </script> <h2 onclick="changetext(this)">点击我会通过调用函数来改变我</h2> <!--也可通过点击按钮来实现--> <button onclick="displayDate()">点我将会在下面显示时间</button> <script> function displayDate() { document.getElementById("demo").innerHTML=Date(); } </script> <p id="demo"></p> <!--JS向HTML元素分配事件--> <button id="mybutton">点我触发事件</button> <script> document.getElementById("mybutton").onclick=function () {displayDate1()}; function displayDate1() { document.getElementById("demo2").innerHTML=Date(); } </script> <p id="demo2"></p> <!--onchange事件,一般结合对输入字段的验证来使用--> <script> function myFunction() { var x = document.getElementById("fname"); x.value = x.value.toUpperCase(); } </script> 请输入英文字符: <input type="text" id="fname" onchange="myFunction()" /> <p>当鼠标离开输入框点击其他地方时,会触发将输入文本转换为大写的函数</p> <!--onmouseover和onmouseout事件--> <!--以上两事件用于将用户的鼠标移至HTML元素或移出时触发事件--> <div onmouseover="mOver(this)" onmouseout="mOut(this)" style="background-color:green; 120px; height: 20px; padding: 40px; color: #ffffff;">把鼠标移动这里我会发生改变</div> <script> function mOver(obj) { obj.innerHTML="谢谢" } function mOut(obj) { obj.innerHTML="把鼠标移到我这里会发生同样的改变" } </script> <!--onmousedownonmouseuponclick事件--> <div onmousedown="mDown(this)" onmouseup="mUp(this)" style="background-color:blue; color:#ffffff; 180px; height:200px; padding:80px; font-size:24px;">点击我会发生改变,如果按住鼠标会有提示</div> <script> function mDown(obj) { obj.style.backgroundColor="#1ec5e5"; obj.innerHTML="请释放鼠标按钮" } function mUp(obj) { obj.style.backgroundColor="green"; obj.innerHTML="请按下鼠标按钮" } </script> </body> </html>