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

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

什么是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. 点击某个元素


  1. 将鼠标移动至某个元素上方


  1. 按下键盘上某个键,等等。


事件绑定


在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>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对象调用


getElementByld()


通过id属性获取一个元素节点对象


  1. getElementsByTagName()


使用该方法获取元素时返回的是一个类数组对象。


通过标签名获取一组元素节点对象


  1. getElementsByName()


使用该方法获取元素时返回的也是一个类数组对象。


  1. 通过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>
目录
相关文章
|
27天前
|
JavaScript 前端开发 Go
CSS 与 JS 对 DOM 解析和渲染的影响
【10月更文挑战第16天】CSS 和 JS 会在一定程度上影响 DOM 解析和渲染,了解它们之间的相互作用以及采取适当的优化措施是非常重要的。通过合理的布局和加载策略,可以提高网页的性能和用户体验,确保页面能够快速、流畅地呈现给用户。在实际开发中,要根据具体情况进行权衡和调整,以达到最佳的效果。
|
13天前
|
JavaScript 前端开发 索引
js中DOM的基础方法
【10月更文挑战第31天】这些DOM基础方法是操作网页文档结构和实现交互效果的重要工具,通过它们可以动态地改变页面的内容、样式和行为,为用户提供丰富的交互体验。
|
14天前
|
JavaScript 前端开发 开发者
.js的dom元素操作
【10月更文挑战第29天】通过灵活运用这些 DOM 元素操作方法,JavaScript 可以实现丰富的网页交互效果,如动态更新页面内容、响应用户操作、创建和删除页面元素等。在实际开发中,开发者可以根据具体的需求和场景,选择合适的 DOM 元素操作方法来实现所需的功能,为用户提供更加流畅和动态的网页体验。
|
30天前
|
存储 JavaScript 前端开发
js事件队列
【10月更文挑战第15天】
44 6
|
1月前
|
JavaScript API
深入解析JS中的visibilitychange事件:监听浏览器标签间切换的利器
深入解析JS中的visibilitychange事件:监听浏览器标签间切换的利器
96 0
|
1月前
|
JavaScript 前端开发 容器
js之dom学习
js之dom学习
35 0
|
1月前
|
JavaScript
DOM 节点列表长度(Node List Length)
DOM 节点列表长度(Node List Length)
|
26天前
|
JavaScript
HTML DOM 节点树
HTML DOM 节点是指在 HTML 文档对象模型中,文档中的所有内容都被视为节点。整个文档是一个文档节点,每个 HTML 元素是元素节点,元素内的文本是文本节点,属性是属性节点,注释是注释节点。DOM 将文档表示为节点树,节点之间有父子和同胞关系。
|
26天前
|
JavaScript
HTML DOM 节点
HTML DOM(文档对象模型)将HTML文档视为节点树,其中每个部分都是节点:文档本身是文档节点,HTML元素是元素节点,元素内的文本是文本节点,属性是属性节点,注释是注释节点。节点间存在父子及同胞关系,形成层次结构。
|
1月前
|
XML JavaScript 数据格式
XML DOM 遍历节点树
XML DOM 遍历节点树