跟我学JavaScript--HTML DOM--DOM事件，导航

最新推荐文章于 2023-05-12 13:44:41 发布

panlu666_pl

最新推荐文章于 2023-05-12 13:44:41 发布

阅读量430

点赞数

分类专栏：跟我学JS 文章标签： JavaScript DOM事件 DOM导航

本文链接：https://blog.csdn.net/panlu666_pl/article/details/70808154

版权

跟我学JS 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

DOM事件

常见的HTML事件：

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

onclick事件

用户点击鼠标时触发onclick事件

例.

<h1 onclick="changetext(this)">点击文本!</h1>
<script>
    function changetext(id){
        id.innerHTML="Ooops!";
        /*id.firstChild.nodeValue="Ooops!";*/
}
</script>

等效于

<h1 onclick="changetext()" id="demo">点击文本!</h1>
<script>
   function changetext(){
      document.getElementById("demo").innerHTML="Ooops!";
} 
</script>

onload事件和onunload事件

用户进入页面时触发onload事件
用户离开页面时触发onunload事件

例.
onload和onunload事件可用于处理cookies

<body onload="checkCookies()">

<script>
function checkCookies()
{
    if (navigator.cookieEnabled==true)
    {
        alert("Cookie 可用")
    }
    else
    {
        alert("Cookie 不可用")
    }
}
</script>
</body>

运行结果：
这里写图片描述

页面载入时，弹出浏览器 Cookie 可用状态。

onchange事件

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

例.

<body>
<script>
function myFunction(){
    var x=document.getElementById("fname");
    x.value=x.value.toUpperCase();
}
</script>
输入你的名字: <input type="text" id="fname" onchange="myFunction()">
</body>

当光标离开输入框后，函数将被触发，将小写字母转为大写字母。

onmouseover事件和onmouseout事件

鼠标指针移动到元素上时触发onmouseover事件
鼠标指针离开元素时触发onmouseout事件

例.

<div onmouseover="mOver()" id="p" onmouseout="mOut(this)" style="background-color:#D94A38;width:120px;height:20px;padding:40px">Mouse Over Me</div>

<script>
function mOver()
{
    document.getElementById("p").innerHTML="Thank You";
}

function mOut(obj)
{
    obj.innerHTML="Hello Nico";
}
</script>

运行结果：

未进行任何操作时：

将鼠标指针移动到元素上时，触发onmouseover事件：
这里写图片描述

鼠标指针离开元素时，触发onmouseout事件：
这里写图片描述

onmousedown事件，onmouseup事件和onclick事件

这三个事件是鼠标点击的全部过程：

鼠标按钮被点击时，触发onmousedown事件
鼠标按钮被松开时，触发onmouseup事件
鼠标点击完成时，触发onclick事件

例.

<div onmousedown="mDown(this)" onmouseup="mUp(this)" style="background-color:#D94A38;width:90px;height:20px;padding:40px;">Click Me</div>

<script>
function mDown(obj)
{
    obj.style.backgroundColor="#1ec5e5";
    obj.innerHTML="Release Me"
}

function mUp(obj)
{
    obj.style.backgroundColor="#D94A38";
    obj.innerHTML="Thank You"
}
</script>

运行结果：

未进行任何操作时：
这里写图片描述

鼠标按钮被点击时，触发onmousedown事件：
这里写图片描述

鼠标按钮被松开时，触发onmouseup事件：
这里写图片描述

使用HTML DOM分配事件

例.
为button元素分配onclick事件：

<button id="myBtn">点我</button>

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

<p id="demo"></p>

displayDate()函数被分配给了 id=myButn” 的 HTML 元素的onclick事件。

当按钮被点击时，触发onclick事件，执行函数。

DOM导航

通过HTML DOM使用节点关系在节点树中导航

DOM节点列表

getElementsByTagName()方法返回节点列表。节点列表就是一个节点数组

例.

<p>Hello World!</p>
<p>DOM 是非常有用的!</p>

<script>
x=document.getElementsByTagName("p");
document.write("第二个段落的 innerHTML 内容为: " + x[1].innerHTML);
</script>

运行结果：
这里写图片描述

DOM节点列表长度

length属性定义节点列表中节点的数量，即节点数组的长度

例.
使用length属性循环节点列表：

<p>Hello World!</p>
<p>DOM 是非常有用的!</p>
<p>这个实例演示了 <b>length</b> 属性。</p>

<script>
x=document.getElementsByTagName("p");   //获取所有<p>元素节点
for (i=0;i<x.length;i++)
{ 
    document.write(x[i].innerHTML+"<br>");  //输出每个<p>元素节点的文本节点的值
}
</script>

运行结果：
这里写图片描述

导航节点关系

通过parentNode，firstChild和lastChild这三个节点属性在文档结构中进行导航

例.
firstChild/lastChild属性可用于访问元素的文本：

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

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

运行结果：
这里写图片描述

DOM根节点

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

document.documentElement - 全部文档
document.body - 文档的主体

childNodes和nodeValue

获取元素内容的方式：

innerHTML属性
childNodes属性和 nodeValue属性

例.

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

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

运行结果：
这里写图片描述

panlu666_pl

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
跟我学JavaScript--HTML DOM--DOM事件，导航

DOM事件常见的HTML事件：当用户点击鼠标时当网页已加载时当图片已加载时当鼠标移动到元素上时当输入字段被改变时当HTML表单被提交时当用户触发按键时onclick事件用户点击鼠标时触发onclick事件例.<h1 onclick="changetext(this)">点击文本!</h1><script> function changetext(id){ i
复制链接

扫一扫