js学习之HTML DOM事件和导航-优快云博客

本文介绍了HTMLDOM如何允许JavaScript对HTML事件作出反应，包括事件的类型、如何使用JavaScript触发事件，以及事件处理的基本概念。文章通过实例展示了如何在用户交互时修改网页内容，以及如何利用HTMLDOM分配事件。

[color=brown][size=medium]这两个内容差不多是w3school对HTML DOM的最后的介绍了,学完以后再去学下js和jquery之类的[/size][/color]
[size=medium]HTML DOM 允许 JavaScript 对 HTML 事件作出反应。。[/size]

[size=medium][b]对事件作出反应
[/b][/size]
[size=medium]当事件发生时，可以执行 JavaScript，比如当用户点击一个 HTML 元素时。

如需在用户点击某个元素时执行代码，请把 JavaScript 代码添加到 HTML 事件属性中：

οnclick=JavaScript

HTML 事件的例子：

当用户点击鼠标时
当网页已加载时
当图片已加载时
当鼠标移动到元素上时
当输入字段被改变时
当 HTML 表单被提交时
当用户触发按键时[/size]

[size=medium]在本例中，当用户点击时，会改变 <h1> 元素的内容：[/size]


<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>

[b][color=olive][size=medium]HTML 事件属性[/size][/color][/b]
[color=olive][size=medium]向 button 元素分配一个 onclick 事件：[/size][/color]

<button onclick="displayDate()">试一试</button>

[size=medium]使用 HTML DOM 来分配事件

HTML DOM 允许您使用 JavaScript 向 HTML 元素分配事件：[/size]

[size=medium]为 button 元素分配 onclick 事件：[/size]

<script>
document.getElementById("myBtn").onclick=function(){displayDate()};
</script>

[b][color=darkblue][size=medium]onload 和 onunload 事件

当用户进入或离开页面时，会触发 onload 和 onunload 事件。

onload 事件可用于检查访客的浏览器类型和版本，以便基于这些信息来加载不同版本的网页。

onload 和 onunload 事件可用于处理 cookies。[/size][/color][/b]


<body onload="checkCookies()">

[color=gray][size=medium]
onchange 事件

onchange 事件常用于输入字段的验证。

下面的例子展示了如何使用 onchange。当用户改变输入字段的内容时，将调用 upperCase() 函数。[/size][/color]

<input type="text" id="fname" onchange="upperCase()">

[color=green][size=medium]onmouseover 和 onmouseout 事件

onmouseover 和 onmouseout 事件可用于在鼠标指针移动到或离开元素时触发函数。[/size][/color]

<!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>

[color=darkblue][size=medium]onmousedown、onmouseup 以及 onclick 事件

onmousedown、onmouseup 以及 onclick 事件是鼠标点击的全部过程。首先当某个鼠标按钮被点击时，触发 onmousedown 事件，然后，当鼠标按钮被松开时，会触发 onmouseup 事件，最后，当鼠标点击完成时，触发 onclick 事件。[/size][/color]

<!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>

[b][size=x-large]HTML DOM - 导航[/size][/b]

[b][size=medium]HTML DOM 节点列表[/size][/b]
[size=medium]
getElementsByTagName() 方法返回节点列表。节点列表是一个节点数组。[/size]

<!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>

[size=medium]HTML DOM 节点列表长度

length 属性定义节点列表中节点的数量。

您可以使用 length 属性来循环节点列表：[/size]

<!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]

[size=medium]您能够使用三个节点属性：parentNode、firstChild 以及 lastChild ，在文档结构中进行导航。[/size]

<html>
<body>

<p>Hello World!</p>
<div>
  <p>DOM 很有用!</p>
  <p>本例演示节点关系。</p>
</div>

</body>
</html>

[size=medium]
首个 <p> 元素是 <body> 元素的首个子元素（firstChild）
<div> 元素是 <body> 元素的最后一个子元素（lastChild）
<body> 元素是首个 <p> 元素和 <div> 元素的父节点（parentNode）

firstChild 属性可用于访问元素的文本：[/size]


<html>
<body>

<p id="intro">Hello World!</p>

<script>
x=document.getElementById("intro");
document.write(x.firstChild.nodeValue);
</script>

</body>
</html>

[size=medium]DOM 根节点

这里有两个特殊的属性，可以访问全部文档：

document.documentElement - 全部文档
document.body - 文档的主体
[/size]

<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>

[size=medium]
childNodes 和 nodeValue

除了 innerHTML 属性，您也可以使用 childNodes 和 nodeValue 属性来获取元素的内容。

下面的代码获取 id="intro" 的 <p> 元素的值：[/size]

<html>
<body>

<p id="intro">Hello World!</p>

<script>
var txt=document.getElementById("intro").childNodes[0].nodeValue;
document.write(txt);
</script>

</body>
</html>

[size=medium]在上面的例子中，getElementById 是一个方法，而 childNodes 和 nodeValue 是属性。

在本教程中，我们将使用 innerHTML 属性。不过，学习上面的方法有助于对 DOM 树结构和导航的理解。[/size]