【JavaScript】DOM和事件简介和文档加载流程以及DOM查询(上)案例（附源码）

时间：2023-04-29 22:07:00 bt3六盘水仪表变送器

??作者简介：苏凉（专注于网络爬虫、数据分析，正在学习前端）
??主页：苏凉.py的博客
??系列总专栏：web前端基础教程
??名言警句阔凭鱼跃，天高任鸟飞。
??如果你认为博主的文章写得很好，我希望你能连续三次支持它！
??关注点赞收藏

文章目录

- 每日推荐
- 什么是DOM？
- 节点（Node）
- 查找节点
- 事件是什么？
- 事件绑定
- - 在html节点中绑定
  - 在js中绑定
  - 常见的html事件
- 文档的加载
- - 给window绑定onload事件
- DOM查询
- - innerHTML 属性
  - 获取元素节点
  - 案例一
  - 案例二

每日推荐

推荐一件神器。无论你是学生党还是上班族，都可以使用。它涵盖面试题库、在线刷题、各大工厂面试/笔试真题等。如果你还是学生，最重要的是模拟面试功能，智能化AI1v1面试，帮助你早日拿到大厂offer！直接点击链接！=>牛客网-找工作神器

什么是DOM？

JS中通过DOM来对HTML操作文档。只要理解了。DOM就可以随心所欲的操作WEB页面。
DOM，全称Document Object Model文档对象模型。

文档
文档表示整个文档HTML网页文档对象
对象
表示将网页的每一部分转换为一个对象。
模型
用模型来表示对象之间的关系，方便我们获取对象。
DOM如图所示，我们只需要知道某个节点就可以找到任何其他节点。

节点（Node）

节点是构成我们网页的最基本的组成部分，网页的每一部分都可以称为节点。 html标签、属性、文本、注释、整个文档等都是节点。虽然都是节点，但具体类型其实是不同的。∶我们称之为标签元素节点、属性称为属性节点、文本称为文本节点、文档称为文档节点。不同类型的节点，不同的属性和方法。

文档节点：整个HTML文档
元素节点：HTML文档中的HTML标签
属性节点：元素属性
文本节点：HTML标签中的文本内容

查找节点

浏览器已经为我们提供文档节点对象，这个对象是window该属性可直接用于页面，文档节点代表整个页面。document。
例子：

给按钮一个id属性

<button id="bt1">按钮button>

通过id查找按钮

document.getElementById('bt1');

事件是什么？

事件发生在文档或浏览器窗口特定的交互瞬间。JavaScript 与HTML互动是通过事件实现的。对于Web在应用方面，有以下代表性事件：

点击元素

将鼠标移动到元素上方

按键盘上的键，等等。

事件绑定

在html节点中绑定

我们可以在事件对应的属性中设置一些属性js这事件被触发时，代码将执行。

<button id="bt1" onclick="alert(点我干什么？)">按钮button>

我们称之为结构与行为相结合，不方便维护，不推荐使用。

在js中绑定

当事件发生时，它可以以绑定处理按钮对应事件的函数的形式来响应事件触发时，其对应的函数将会被调用。

<button id="bt1">按钮button>

//通过文档对象查找按钮节点
var bt = document.getElementById('bt1');
//绑定单击事件
bt.onclick = function(){ 
        
   alert('点我干嘛？')
}

效果：
单击按钮之后弹出警告框

常见的html事件

事件	说明
`onchange`	HTML 元素改变
`ondblclick`	当用户双击HTML 元素
`onclick`	用户点击 HTML 元素
`onmouseover`	鼠标指针移动到指定的元素上时发生
`onmouseout`	用户从一个 HTML 元素上移开鼠标时发生
`onkeydown`	用户按下键盘按键
`onload`	浏览器已完成页面的加载

更多html事件请看此文档说明！

文档的加载

在上面的例子中将script标签写在按钮页面下部是为了让页面加载好之后在执行js代码。
浏览器在加载一个页面时，是按照自上向下的顺序加载的，读取到一行就运行一行，如果将script标签写到页面的上边，在代码执行时，页面还没有加载。因此就无法执行相应事件。

那么当我们想吧js代码写在上方时，又怎样来实现同样的效果呢？

给window绑定onload事件

onload事件会在整个页面加载完成后执行

该事件对应的响应函数将会在页面加载完成之后执行，这样可以确保我们的代码执行时所有的DOM对象已经加载完毕

实例：

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <script> window.onload = function(){ 
           var even = document.getElementById('bt1'); even.onclick = function(){ 
           alert('点我干嘛？？') } } script>
head>
<body>
    <button id="bt1">按钮button>
body>
html>

DOM查询

innerHTML 属性

获取元素内容最简单的方法是使用 innerHTML 属性。
innerHTML属性可用于获取或替换 HTML 元素的内容。
innerHTML属性可用于获取或改变任何 HTML 元素，包括和。

获取元素节点

通过document对象调用

getElementByld()
通过id属性获取一个元素节点对象
getElementsByTagName()
使用该方法获取元素时返回的是一个类数组对象。
通过标签名获取一组元素节点对象
getElementsByName()
使用该方法获取元素时返回的也是一个类数组对象。
通过name属性获取一组元素节点对象
注意：在获取input标签中的值时，因为没有结束标签，因此不能使用innerHTML来获取标签内容，需通过属性名来获取，即元素.属性名
例子:元素.id ，元素.name，元素.value
注意:class属性不能采用这种方式，读取class属性时需要使用元素.className

案例一

实现效果：

源码：

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <script> window.onload = function(){ 
           //为id=bt1的按钮绑定事件调用函数 document.getElementById('bt1').onclick = function(){ 
           //获取id为li1的节点 var li1 = document.getElementById('li1'); alert(li1.innerHTML); } //为id=bt2的按钮绑定事件调用函数 document.getElementById('bt2').onclick = function(){ 
           //获取所有li var lis = document.getElementsByTagName('li'); for(var i = 0;i<lis.length;i++){ 
           alert(lis[i].innerHTML) } } //为id=bt3的按钮绑定事件调用函数 document.getElementById('bt3').onclick = function(){ 
           //获取name=gender的节点 var genders = document.getElementsByName('gender') for(var i = 0;i<genders.length;i++){ 
           alert(genders[i].value) } } } script>
    <style> .d1{ 
           display: inline-block; margin-left: 100px; margin-top: 100px; background-color: lightblue; } .d1>ol>li{ 
           display: inline-block; background-color: antiquewhite; } .d2{ 
           display:inline-block; position:absolute; margin-left: 50px; margin-top: 100px; } .d2>button{ 
           display: block; } style>
head>
<body>
    <div class="d1">
        <p>端游列表p>
        <ol>
            <li id="li1">英雄联盟li>
            <li>QQ飞车li>
            <li>魔兽争霸li>
            <li>地下城li>
        ol>
        <p>手游列表p>
        <ol>
            <li>原神li>
            <li>王者荣耀li>
            <li>qq飞车手游li>
        ol>
        <span>性别：span>
        男<input type="radio" name="gender" value="男">
        女<input type="radio" name="gender" value="女">
    div>
    <div class="d2">
        <button id="bt1">获取id为li1的节点 button>
        <button id="bt2">获取所有libutton>
        <button id="bt3">获取name=gender所有节点button>
    div>
body>
html>

案例二

实现效果：

源码：

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <script> var imgArr = ["../img/1.jpg" ,"../img/2.jpg" ,"../img/3.jpg" ,"../img/4.jpg" ,"../img/5.jpg"] var index = 0; window.onload = function(){ 
           //给上一张按钮绑定单击事件 document.getElementById('bt1').onclick = function(){ 
           //获取img节点 var img1 = document.getElementsByTagName('img')[0]; index --; if(index < 0){ 
           index = imgArr.length-1; } img1.src = imgArr[index]; //获取p标签节点 var p = document.getElementById('info'); p.innerHTML = '总共'+imgArr.length+'张图片,当前第'+(index+1)+'张' } //给下一张按钮绑定单击事件 document.getElementById('bt2').onclick = function(){ 
           //获取img节点 var img2 = document.getElementsByTagName('img')[0]; index ++; if(index > imgArr.length-1){ 
           index = 0; } img2.src = imgArr[index]; //获取p标签节点 var p = document.getElementById('info'); p.innerHTML = '总共'+imgArr.length+'张图片,当前第'+(index+1)+'张' } } script>
    <style> *{ 
           margin: 0%; padding: 0%; } #d1{ 
           padding: 10px; margin: 50px auto; width: 500px; background-color: wheat; text-align: center; } img{ 
           width: 500px; height: 300px; } style>
head>
<body>
    <div id="d1">
        <p id="info">总共5张图片,当前第1张p>
        <img src="../img/1.jpg" alt="原神图片">
        <button id="bt1">上一张button>
        <button id="bt2">下一张button>
    div>
body>
html>

这里我们实现了dom查询的一个小案例，下期继续更新DOM查询，欢迎订阅本专栏，持续更新中…

更多题库和知识点总结，面试技巧请看=>牛客网，快来和我一起刷题吧！

锐单商城拥有海量元器件数据手册、IC替代型号，打造电子元器件IC百科大全！

【JavaScript】DOM和事件简介和文档加载流程以及DOM查询(上)案例（附源码）

文章目录

相关文章