JavaScript与HTML_DOM
HTML DOM
查找HTML元素
找到该元素。有三种方法来做这件事：
- 通过id找到HTML元素（getElementById）
- 通过标签名找到HTML元素（getElementsByTagName）
- 通过类名找到HTML元素（getByClass）
改变HTML内容（innerHTML）
<!DOCTYPE html>
<html>
<body>
<h1 id="header">Old Header</h1>
<script> var element = document.getElementById("header"); element.innerHTML = "New Header"; </script>
</body>
</html>改变HTML属性
<!DOCTYPE html>
<html>
<body>
<img id="image" src="smiley.gif">
<script> document.getElementById("image").src = "landscape.jpg"; </script>
</body>
</html>改变HTML样式
<!DOCTYPE html>
<html>
<body>
<p id="p1">这是一段文本。</p>
<input type="button" value="隐藏文本" onclick="document.getElementById('p1').style.visibility='hidden'" />
<input type="button" value="显示文本" onclick="document.getElementById('p1').style.visibility='visible'" />
</body>
</html>HTML事件
HTML 事件的例子：
- 当用户点击鼠标时(* - onclick)
- 当网页加载完成时(body - onload)
- 当图像加载完成时(img - onload)
- 当输入字段被改变完成时(input - onchange)
- 当鼠标移动到元素上时(* - onmouseover,onmouseout)
- 当用户触发按键时(* - onmousedown, onmouseup)
- 当元素获取焦点时(* - onfocus)
- 当提交HTML表单时(form - onsubmit)
onclick
当用户在<h1>元素上点击时，会改变其内容：
<!DOCTYPE html>
<html>
<body>
<h1 onclick="this.innerHTML='谢谢!'">请点击该文本</h1>
</body>
</html>onload、onunload
onload和onunload事件会在用户进入或离开页面时被触发。
onload事件可用于检测访问者的浏览器类型和浏览器版本，并基于这些信息来加载网页的正确版本。
onload和onunload事件可用于处理cookie。
<!DOCTYPE html>
<html>
<body onload="checkCookies()"> <!-- 页面加载完成提示 -->
<script> function checkCookies() { if (navigator.cookieEnabled==true) { alert("已启用 cookie") } else { alert("未启用 cookie") } } </script>
<p>提示框会告诉你，浏览器是否已启用 cookie。</p>
</body>
</html>onchange
onchange事件常结合对输入字段的验证来使用。
下面是一个如何使用onchange的例子。当用户改变输入字段的内容完成后，会调用upperCase()函数。
<!DOCTYPE html>
<html>
<head>
<script> function myFunction() { var x=document.getElementById("fname"); x.value=x.value.toUpperCase(); } </script>
</head>
<body>
请输入英文字符：<input type="text" id="fname" onchange="myFunction()">
<p>当您离开输入字段时，会触发将输入文本转换为大写的函数。</p>
</body>
</html>onmouseover, onmouseout
onmouseover和onmouseout事件可用于在用户的鼠标移至HTML元素上方或移出元素时触发函数。
<!DOCTYPE html>
<html>
<body>
<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>
</body>
</html>onmousedown, onmouseup
当点击鼠标按钮时，会触发onmousedown事件，当释放鼠标按钮时，会触发onmouseup事件，最后，当完成鼠标点击时，会触发onclick事件。
<!DOCTYPE html>
<html>
<head>
<script> function lighton() { document.getElementById('myimage').src="http://www.w3school.com.cn/i/eg_bulbon.gif"; } function lightoff() { document.getElementById('myimage').src="http://www.w3school.com.cn/i/eg_bulboff.gif"; } </script>
</head>
<body>
<img id="myimage" onmousedown="lighton()" onmouseup="lightoff()" src="http://www.w3school.com.cn/i/eg_bulboff.gif" />
<p>按住鼠标不放可以点亮这盏灯！</p>
</body>
</html>
onfocus
当元素获取焦点时，事件被触发。
<!DOCTYPE html>
<html>
<head>
<script> function myFunction(x) { x.style.background="yellow"; } </script>
</head>
<body>
请输入英文字符：<input type="text" onfocus="myFunction(this)">
<p>当输入字段获得焦点时，会触发改变背景颜色的函数。</p>
</body>
</html>onsumbit
当表单提交时，事件被触发。
<html>
<head>
<script type="text/javascript"> function validate_required(field,alerttxt) { with (field) { if (value==null||value=="") {alert(alerttxt);return false} else {return true} } } function validate_form(thisform) { with (thisform) { if (validate_required(email,"Email must be filled out!")==false) {email.focus();return false} } } </script>
</head>
<body>
<form action="submitpage.htm" onsubmit="return validate_form(this)" method="post">
Email: <input type="text" name="email" size="30">
<input type="submit" value="Submit">
</form>
</body>
</html>分配事件
HTML DOM允许您通过使用JavaScript来向HTML元素分配事件：
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p>点击按钮就可以执行 <em>displayDate()</em> 函数。</p>
<button id="myBtn">点击这里</button>
<script> document.getElementById("myBtn").onclick = function(){displayDate()}; // 分配点击事件 function displayDate() { document.getElementById("demo").innerHTML=Date(); } </script>
<p id="demo"></p>
</body>
</html> DOM节点
创建新的HTML元素
如需向 HTML DOM添加新元素，您必须首先创建该元素（元素节点），然后向一个已存在的元素追加该元素。
<!DOCTYPE html>
<html>
<body>
<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另一个段落。</p>
</div>
<script> var para = document.createElement("p"); // 创建新元素 var node = document.createTextNode("这是新段落。"); para.appendChild(node); var element = document.getElementById("div1"); // 找到插入的父元素 element.appendChild(para); </script>
</body>
</html>删除HTML元素
如需删除HTML元素，您必须首先获得该元素的父元素：
<!DOCTYPE html>
<html>
<body>
<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另一个段落。</p>
</div>
<script> var parent=document.getElementById("div1"); var child=document.getElementById("p1"); parent.removeChild(child); // 从父元素删除对应的子元素 </script>
</body>
</html>更多请参考：W3School