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

Posted 苏凉.py

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScriptDOM和事件简介和文档加载流程以及DOM查询(上)案例（附源码）相关的知识，希望对你有一定的参考价值。

🐚作者简介：苏凉（专注于网络爬虫，数据分析，正在学习前端的路上）
🐳博客主页：苏凉.py的博客
🌐系列总专栏：web前端基础教程
👑名言警句：海阔凭鱼跃，天高任鸟飞。
📰要是觉得博主文章写的不错的话，还望大家三连支持一下呀！！！
👉关注✨点赞👍收藏📂

文章目录

每日推荐

给大家推荐一款神器。无论你是学生党还是上班族都可以使用，这里涵盖了面试题库，在线刷题，各个大厂的面试/笔试真题等。如果你还是学生，最重要的一点就是模拟面试功能，智能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应用来说，有下面这些代表性的事件:

  1. 点击某个元素
  2. 将鼠标移动至某个元素上方
  3. 按下键盘上某个键，等等。

事件绑定

在html节点中绑定

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

<button id="bt1" onclick="alert('点我干啥？')">按钮</button>

这种写法我们称为结构和行为据合,不方便维护,不推荐使用。

在js中绑定

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

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

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

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

常见的html事件

事件说明
onchangeHTML 元素改变
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>Document</title>
    <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 元素，包括 <html> 和 <body>。

获取元素节点

  • 通过document对象调用
  1. getElementByld()
    通过id属性获取一个元素节点对象
  2. getElementsByTagName()
    使用该方法获取元素时返回的是一个类数组对象。
    通过标签名获取一组元素节点对象
  3. 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>Document</title>
    <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">获取所有li</button>
        <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>Document</title>
    <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查询，欢迎订阅本专栏，持续更新中…

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

03JavaScriptDOM事件18

day18

JavaScript事件基础

事件就是文档或浏览器窗口中发生的一些特定的交互瞬间。

HTML事件
　　直接在HTML元素标签内添加时间，执行脚本。
　　语法：<tag 事件="执行脚本" ></tag>
　　功能：在HTML元素上绑定事件。
　　说明：执行脚本可以是一个函数的调用。

this是对该DOM元素的引用

鼠标事件
　　onload：页面加载时触发
　　onclick:鼠标点击时触发
　　onmouseover：鼠标滑过时触发
　　onmouseout：鼠标离开时触发
　　onfoucs：获得焦点时触发
　　onblur：失去焦点时触发
　　onchange：域的内容改变时发生（一班作用域select或checkbox或radio）

DOM0级事件
　　1.通过DOM获取HTML元素
　　2.（获取HTML元素）.事件=执行脚本
　　语法：ele.事件=执行脚本
　　功能：在DOM对象上绑定事件
　　说明：还行脚本可以是一个匿名函数，也可以是一个函数的调用。

不建议使用HTML事件原因：
　　1.多元素绑定相同时间是，效率低。
　　2.不建议在HTML元素中写JavaScript代码。

　　onsubmit:表单中的确认按钮被点击时发生
　　onmousedown：鼠标按钮在元素上按下时触发
　　onmousemove：在鼠标指针移动式发生
　　onmouseup：在元素上松开鼠标按钮时触发
　　onresize：当调整浏览器窗口的大小时触发
　　onscroll：拖动滚动条时触发

键盘事件与keyCode属性
　　onkeydown：在用户按下一个键盘按键时发生
　　onkeypress：在键盘按键被按下并释放一个键时发生
　　onkeyup：在键盘按键被松开时发生
　　keyCode：返回onkeypress、onkeydown或onkeyup事件触发的键的值的
　　字符代码，或键的代码

onload.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>
        window.onload = function () {
            var box = document.getElementById(‘box‘);
            var clicked = function () {
                alert(‘clicked!‘)
            }
            box.onclick = clicked;
        }
    </script>
    <style type="text/css">
        .box{
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div id="box" class="box">这是一个div</div>
</body>
</html>

 

onfocus_onblur.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        .left,.tip{
            float: left;
        }
        .box{
            margin-top: 50px;
            margin-left: 20px;
        }
        .tip{
            display: none;
        }
    </style>
    <script>
        window.onload = function () {
            var phone = document.getElementById(‘phone‘);
            var tip = document.getElementById(‘tip‘);
            phone.onfocus = function () {
                tip.style.display="block";
            }
            phone.onblur = function () {
                var phoneVal = this.value;
                if (phoneVal.length == 11 && isNaN(phoneVal) == false) {
                    tip.innerHTML = ‘<img src="img/right.png" alt="right">‘;
                } else {
                    tip.innerHTML = ‘<img src="img/error.png" alt="right">‘;
                }
            }
        }
    </script>
</head>
<body>
    <div class="box">
        <div class="left">
            <input type="text" placeholder="请输入手机号" id="phone">
        </div>
        <div class="tip" id="tip">
            请输入有效的手机号
        </div>
    </div>
</body>
</html>

 

ononchange.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>
        window.onload = init;
        function init() {
            var menu = document.getElementById(‘menu‘);
            menu.onchange =function () {
                var bgcolor = this.value;
                if (bgcolor == "") {
                    document.body.style.background = ‘#fff‘;
                } else {
                    document.body.style.background = bgcolor;
                }
            }
        }
    </script>
</head>
<body>
    <div class="box">
        请选择页面的背景颜色：
        <select name="menu" id="menu">
            <option value="">请选择</option>
            <option value="#f00">红色</option>
            <option value="#0f0">绿色</option>
            <option value="#00f">蓝色</option>
            <option value="#ccc">灰色</option>
            <option value="#ff0">黄色</option>
        </select>
    </div>
</body>
</html>

 

other.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box{
            background: #f00;
            width: 200px;
            height: 200px;
        }
    </style>
    <script>
        window.onload = function () {
            var box = document.getElementById(‘box‘);
            box.onmousedown = function () {
                console.log("我被按下了")
            }
            box.onmousemove = function () {
                console.log("我移动了");
            }
            box.onmouseup = function () {
                console.log("我被松开了");
            } 
            box.onclick = function () {
                console.log("我被点击了");
            }
            window.onresize = function () {
                console.log("我的尺寸变了");
            }
            window.onscroll = function () {
                console.log("我被拖动了");
            }
        }
    </script>
</head>
<body>
    <div class="box" id="box"></div>
</body>
</html>

 

键盘事件和keyCode.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        p span{
            color: #f00;
        }
        p span em{
            font-style: normal;
        }
    </style>
</head>
<body>
    <div class="box">
        <p>您还可以输入<span><em id="count">30</em>/30</span>    </p>
        <textarea id="text" rows="5" cols="50"></textarea>
    </div>
    <script>
        var text = document.getElementById(‘text‘);
        var count = document.getElementById(‘count‘)
        var total = 30;
        document.onkeyup = function (event) {
            var len = text.value.length;
            var allow = total - len;
            count.innerHTML = allow;
            console.log(event.keyCode);
        }
    </script>
</body>
</html>

 















































以上是关于JavaScriptDOM和事件简介和文档加载流程以及DOM查询(上)案例（附源码）的主要内容，如果未能解决你的问题，请参考以下文章

网站前端_JavaScript-DOM编程.0001.JavaScriptDom基础核心?

前端基础四之JavaScriptDOM与事件

前端基础四之JavaScriptDOM与事件

事件传播流程

JavaScript简介

javascriptDOM操作方法——document节点方法