js学习之HTML DOM事件和导航
这两个内容差不多是w3school对HTMLDOM的最后的介绍了,学完以后再去学下js和jquery之类的
HTMLDOM允许JavaScript对HTML事件作出反应。。
对事件作出反应
当事件发生时，可以执行JavaScript，比如当用户点击一个HTML元素时。
如需在用户点击某个元素时执行代码，请把JavaScript代码添加到HTML事件属性中：
onclick=JavaScript
HTML事件的例子：
当用户点击鼠标时
当网页已加载时
当图片已加载时
当鼠标移动到元素上时
当输入字段被改变时
当HTML表单被提交时
当用户触发按键时
在本例中，当用户点击时，会改变<h1>元素的内容：
<html> <body> <h1 onclick="this.innerHTML='hello!'">请点击这段文本!</h1> </body> </html>[size=medium]在本例中，会从事件处理程序中调用函数：[/size
]
<!DOCTYPE html>
<html>
<head>
<script>
function changetext(id)
{
id.innerHTML="hello!";
}
</script>
</head>
<body>
<h1 onclick="changetext(this)">请点击这段文本!</h1>
</body>
</html>HTML事件属性
向button元素分配一个onclick事件：
<button onclick="displayDate()">试一试</button>
使用HTMLDOM来分配事件
HTMLDOM允许您使用JavaScript向HTML元素分配事件：
为button元素分配onclick事件：
<script>
document.getElementById("myBtn").onclick=function(){displayDate()};
</script>onload和onunload事件
当用户进入或离开页面时，会触发onload和onunload事件。
onload事件可用于检查访客的浏览器类型和版本，以便基于这些信息来加载不同版本的网页。
onload和onunload事件可用于处理cookies。
<body onload="checkCookies()">
onchange事件
onchange事件常用于输入字段的验证。
下面的例子展示了如何使用onchange。当用户改变输入字段的内容时，将调用upperCase()函数。
<input type="text" id="fname" onchange="upperCase()">
onmouseover和onmouseout事件
onmouseover和onmouseout事件可用于在鼠标指针移动到或离开元素时触发函数。
<!DOCTYPE html>
<html>
<body>
<div
onmouseover="mOver(this)"
onmouseout="mOut(this)"
style="background-color:#D94A38;width:200px;height:50px;padding-top:25px;text-align:center;">
Mouse Over Me
</div>
<script>
function mOver(obj)
{
obj.innerHTML="谢谢你"
}
function mOut(obj)
{
obj.innerHTML="把鼠标指针移动到上面"
}
</script>onmousedown、onmouseup以及onclick事件
onmousedown、onmouseup以及onclick事件是鼠标点击的全部过程。首先当某个鼠标按钮被点击时，触发onmousedown事件，然后，当鼠标按钮被松开时，会触发onmouseup事件，最后，当鼠标点击完成时，触发onclick事件。
<!DOCTYPE html>
<html>
<body>
<div
onmousedown="mDown(this)"
onmouseup="mUp(this)"
style="background-color:#D94A38;width:200px;height:50px;padding-top:25px;text-align:center;">
点击这里
</div>
<script>
function mDown(obj)
{
obj.style.backgroundColor="#1ec5e5";
obj.innerHTML="松开鼠标"
}
function mUp(obj)
{
obj.style.backgroundColor="#D94A38";
obj.innerHTML="谢谢你"
}
</script>
</body>
</html>HTMLDOM-导航
HTMLDOM节点列表
getElementsByTagName()方法返回节点列表。节点列表是一个节点数组。
<!DOCTYPE html>
<html>
<body>
<p>Hello World!</p>
<p>DOM 很有用！</p>
<script>
x=document.getElementsByTagName("p");
document.write("第二段的 innerHTML 是: " + x[1].innerHTML);
</script>
</body>
</html>HTMLDOM节点列表长度
length属性定义节点列表中节点的数量。
您可以使用length属性来循环节点列表：
<!DOCTYPE html>
<html>
<body>
<p>Hello World!</p>
<p>DOM 很有用！</p>
<p>本例演示 <b>length</b> 属性。</p>
<script>
x=document.getElementsByTagName("p");
for (i=0;i<x.length;i++)
{
document.write(x[i].innerHTML);
document.write("<br>");
}
</script>
</body>
</html>[size=medium][color=olive]导航节点关系[/color][/size]
您能够使用三个节点属性：parentNode、firstChild以及lastChild，在文档结构中进行导航。
<html> <body> <p>Hello World!</p> <div> <p>DOM 很有用!</p> <p>本例演示节点关系。</p> </div> </body> </html>
首个<p>元素是<body>元素的首个子元素（firstChild）
<div>元素是<body>元素的最后一个子元素（lastChild）
<body>元素是首个<p>元素和<div>元素的父节点（parentNode）
firstChild属性可用于访问元素的文本：
<html>
<body>
<p id="intro">Hello World!</p>
<script>
x=document.getElementById("intro");
document.write(x.firstChild.nodeValue);
</script>
</body>
</html>DOM根节点
这里有两个特殊的属性，可以访问全部文档：
document.documentElement-全部文档
document.body-文档的主体
<html> <body> <p>Hello World!</p> <div> <p>DOM 很有用!</p> <p>本例演示 <b>document.body</b> 属性。</p> </div> <script> alert(document.body.innerHTML); </script> </body> </html>
childNodes和nodeValue
除了innerHTML属性，您也可以使用childNodes和nodeValue属性来获取元素的内容。
下面的代码获取id="intro"的<p>元素的值：
<html>
<body>
<p id="intro">Hello World!</p>
<script>
var txt=document.getElementById("intro").childNodes[0].nodeValue;
document.write(txt);
</script>
</body>
</html>在上面的例子中，getElementById是一个方法，而childNodes和nodeValue是属性。
在本教程中，我们将使用innerHTML属性。不过，学习上面的方法有助于对DOM树结构和导航的理解。