`

js学习之HTML DOM事件和导航

 
阅读更多
这两个内容差不多是w3school对HTML DOM的最后的介绍了,学完以后再去学下js和jquery之类的
HTML DOM 允许 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>


使用 HTML DOM 来分配事件

HTML DOM 允许您使用 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>


HTML DOM - 导航

HTML DOM 节点列表

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>


HTML DOM 节点列表长度

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 树结构和导航的理解。
分享到：
| js学习之HTML DOM的访问和修改
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics