<!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; width: 120px; height: 20px; padding: 40px; color: #ffffff;">把鼠标移动这里我会发生改变</div>
<script>
function mOver(obj) {
obj.innerHTML="谢谢"
}
function mOut(obj) {
obj.innerHTML="把鼠标移到我这里会发生同样的改变"
}
</script>
<!--onmousedown\onmouseup\onclick事件-->
<div onmousedown="mDown(this)" onmouseup="mUp(this)" style="background-color:blue; color:#ffffff; width: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>
浙公网安备 33010602011771号