Day1-DOM1

纯纯不会写代码

已于 2023-03-16 11:21:42 修改

阅读量46

点赞数

分类专栏： JS的DOM和BOM操作教程文章标签：前端 javascript html

于 2023-02-25 10:45:52 首次发布

本文链接：https://blog.csdn.net/weixin_45831040/article/details/129212266

版权

JS的DOM和BOM操作教程专栏收录该内容

5 篇文章 0 订阅

订阅专栏

一、 JS组成

在这里插入图片描述

二、 Web API

API 是为我们程序员提供的一个接口，帮助我们实现某种功能，我们会使用就可以了，不必纠结内部如何实现。
Web API 主要是针对于浏览器提供的接口，主要针对于浏览器做交互效果。
Web API 一般都有输入和输出（函数的传参和返回值），Web API 很多都是方法（函数）。
学习 Web API 可以结合前面学习内置对象方法的思路学习

三、 DOM

3.1 DOM 简介

文档对象模型（Document Object Model，简称 DOM），是 W3C 组织推荐的处理可扩展标记语言（HTML或者XML）的标准编程接口。

W3C 已经定义了一系列的 DOM 接口，通过这些 DOM 接口可以改变网页的内容、结构和样式。

DOM 树
在这里插入图片描述
文档：一个页面就是一个文档，DOM 中使用 document 表示
元素：页面中的所有标签都是元素，DOM 中使用 element 表示
节点：网页中的所有内容都是节点（标签、属性、文本、注释等），DOM 中使用 node 表示
注：DOM 把以上内容都看做是对象-对象即是内容

四、获取元素

注：可以通过百度-MDN Web来搜索Web Api接口参考
在这里插入图片描述

4.1 根据 ID 获取

使用 getElementById() 方法可以获取带有 ID 的元素对象。
在这里插入图片描述
使用 console.dir() 可以打印我们获取的元素对象，更好的查看对象里面的属性和方法。

<body>
    <div id="time">2019-9-9</div>
    <script>
        // 1. 文档页面从上往下加载，得先有标签，所以将script写到标签下面
        // 2. get-获得  element-元素  by-通过  驼峰命名法
        // 3. 参数-id是大小写敏感的字符串
        var timer = document.getElementById('time')  
        console.log(timer)
        console.log(typeof(timer))
    </script>
</body>

在这里插入图片描述

4.2 根据标签名获取

使用 getElementsByTagName() 方法可以返回带有指定标签名的对象的集合。
在这里插入图片描述
注意：
1.因为得到的是一个对象的集合，所以我们想要操作里面的元素就需要遍历。
2.得到元素对象是动态的
3.如果获取不到元素,则返回为空的伪数组(因为获取不到对象)

<body>
    <ul>
        <li>知否知否，应是绿肥红瘦1</li>
        <li>知否知否，应是绿肥红瘦2</li>
        <li>知否知否，应是绿肥红瘦3</li>
        <li>知否知否，应是绿肥红瘦4</li>
        <li>知否知否，应是绿肥红瘦5</li>
    </ul>
    <script>
        // 返回的是-获取过来元素对象的集合，以伪数组的形式存储的
        var lis = document.getElementsByTagName('li')
        console.log(lis)
        console.log(lis[0])
        for (var i = 0; i < lis.length; i++) {
            console.log(lis[i])
        }
        // 如果页面中只有一个li，返回的还是伪数组的形式
        // 如果页面中没有这个元素，返回的空的伪数组形式
    </script>
</body>

在这里插入图片描述
还可以获取某个元素(父元素)内部所有指定标签名的子元素.

注意：父元素必须是单个对象(必须指明是哪一个元素对象). 获取的时候不包括父元素自己。

<body>
    <ul>
        <li>知否知否，应是绿肥红瘦1</li>
        <li>知否知否，应是绿肥红瘦2</li>
        <li>知否知否，应是绿肥红瘦3</li>
        <li>知否知否，应是绿肥红瘦4</li>
        <li>知否知否，应是绿肥红瘦5</li>
    </ul>
    <ol id="ol">
        <li>生僻字1</li>
        <li>生僻字2</li>
        <li>生僻字3</li>
        <li>生僻字4</li>
    </ol>
    <script>
        // 返回的是-获取过来元素对象的集合，以伪数组的形式存储的
        // var lis = document.getElementsByTagName('li')
        // console.log(lis)
        // console.log(lis[0])
        // for (var i = 0; i < lis.length; i++) {
        //     console.log(lis[i])
        // }
        // 如果页面中只有一个li，返回的还是伪数组的形式
        // 如果页面中没有这个元素，返回的空的伪数组形式
        var ol = document.getElementsByTagName('ol')
        console.log(ol[0].getElementsByTagName('li'))
        var ol1 = document.getElementById('ol')
        console.log(ol1.getElementsByTagName('li'))
    </script>
</body>

在这里插入图片描述

4.3 通过 HTML5 新增的方法获取

在这里插入图片描述

<body>
    <div class="box">盒子1</div>
    <div class="box">盒子2</div>
    <div id="nav">
        <ul>
            <li>首页</li>
            <li>产品</li>
        </ul>
    </div>
    <script>
        // 1. getElementsByClassName 根据类名获得某些元素集合
        var boxs = document.getElementsByClassName('box')
        console.log(boxs)

        // 2. querySelector 返回指定选择器的第一个元素对象,里面的选择器需要加符号
        var firstBox = document.querySelector('.box')
        console.log(firstBox)
        var nav = document.querySelector('#nav')
        console.log(nav)
        var li = document.querySelector('li')
        console.log(li)

        // 3. querySelectorAll()返回指定选择器的所有元素对象集合
        var allBox = document.querySelectorAll('.box')
        console.log(allBox)
        var lis = document.querySelectorAll('li')
        console.log(lis)
    </script>
</body>

在这里插入图片描述
4.获取特殊元素（body，html）

获取body元素：
在这里插入图片描述
获取html元素：

<body>
    <script>
        // 1. 获取body元素
        var bodyEye = document.body
        console.log(bodyEye)
        console.dir(bodyEye)

        // 2. 获取html元素
        var htmlEye = document.documentElement
        console.log(htmlEye)
    </script>

在这里插入图片描述

五、事件基础

5.1 事件概述

简单理解：触发— 响应机制。

网页中的每个元素都可以产生某些可以触发 JavaScript 的事件，例如，我们可以在用户点击某按钮时产生一个事件，然后去执行某些操作。

5.2 事件三要素

事件三要素：事件源、事件类型、事件处理程序

(1) 事件源：事件被触发的对象(如按钮)
(2) 事件类型：如何触发(如鼠标点击-onclick、鼠标经过、键盘按下等)
(3) 事件处理程序：通过一个匿名函数赋值的方式完成

<body>
    <button id="btn">唐伯虎</button>
    <script>
        // 点击一个按钮，弹出对话框
        // 事件三要素：事件源、事件类型、事件处理程序

        // (1) 事件源： 事件被触发的对象(如按钮)
        var btn = document.getElementById('btn')

        // (2) 事件类型：如何触发(如鼠标点击-onclick、鼠标经过、键盘按下等)
        // (3) 事件处理程序：通过一个函数赋值的方式完成
        btn.onclick = function() {
            alert('点秋香')
        }
    </script>
</body>

在这里插入图片描述

5.3 执行事件的步骤

1.获取事件源
2.注册事件（绑定事件）
3.添加事件处理程序（采取函数赋值形式）

<body>
    <div>123</div>
    <script>
        // 执行事件步骤
        // 点击div，控制台输出-我被选中了
        // 1. 获取事件源
        var div = document.querySelector('div')
        // 2.绑定(注册)事件
        // 3. 添加事件处理程序
        div.onclick = function() {
            console.log('我被选中了')
        }
    </script>
</body>

在这里插入图片描述

5.4 常见的鼠标事件

在这里插入图片描述

六、操作元素

6.1 改变元素内容

1.通过element.innerText改变元素内容
改变了从起始位置到终止位置的内容, 但它去除 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>
    <style>
        div,p {
            width: 300px;
            height: 30px;
            line-height: 30px;
            color: #fff;
            background-color: pink;
        }
    </style>
</head>
<body>
    <button>显示当前系统时间</button>
    <div>某个时间</div>
    <p>123</p>
    <script>
        // 点击按钮，div里面的文字会发生变化
        // 1. 获取元素
        var btn = document.querySelector('button')
        var div  =document.querySelector('div')
        // 2. 注册事件
        btn.onclick = function() {
            div.innerText = getDate()
        }
        function getDate() {
            var date = new Date()
            var year = date.getFullYear()
            var month = date.getMonth() + 1
            var dates= date.getDate() //返回所指的星期中的某一天，返回值是0(周日)到6(周六)之间的一个整数
            var arr = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六']
            var day = date.getDay()
            return '今天是：' + year + '年' + month + '月' + dates +'日' + arr[day]
        }
        // 可以不用添加事件直接显示当前时间
        var p = document.querySelector('p')
        p.innerText = getDate()
    </script>
</body>
</html>

在这里插入图片描述
2.通过element.innerHTML改变元素内容

innerText和innerHTML的区别
在这里插入图片描述

1.innerText 不识别html标签-非标准,去除空格和换行
2.innerHTML 识别html标签-W3W标准，使用得最多，同时保留空格和换行

<body>
    <div></div>
    <p>
        我是文字
        <span>123</span>
    </p>
    <script>
        // innerText 和 innerHTML的区别
        // 1. innerText 不识别html标签-非标准,去除空格和换行
        var div = document.querySelector('div')
        div.innerText = '<strong>今天是：</strong>2019'

        // 2. innerHTML 识别html标签-W3W标准，使用得最多
        div.innerHTML = '<strong>今天是：</strong>2019'

        // 这两个属性是可读写的-可以获取元素里面的内容,保留空格和换行
        var p = document.querySelector('p')
        console.log(p.innerText)
        console.log(p.innerHTML)
    </script>
</body>

在这里插入图片描述

6.2 修改元素的属性

1.获取元素
2.注册事件、处理程序

<body>
    <button id="ldh">刘德华</button>
    <button id="zxy">张学友</button><br>
    <img src="./images/ldh.jpg" alt="" title="刘德华">
    <script>
        // 修改元素属性-src
        // 1. 获取元素
        var ldh = document.getElementById('ldh')
        var zxy = document.getElementById('zxy')
        var img = document.querySelector('img')
        // 2. 注册事件 处理程序
        zxy.onclick = function() {
            img.src = 'images/zxy.jpg'
            img.title = '张学友'
        }
        ldh.onclick = function() {
            img.src = 'images/ldh.jpg'
            img.title = '刘德华'
        }
    </script>
</body>

在这里插入图片描述

6.3 案例-分时问候并显示不同图片

<!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>
    <style>
        img {
            width: 300px;
        }
    </style>
</head>
<body>
    <img src="./images/s.gif" alt="">
    <div>上午好</div>
    <script>
        // 1. 获取元素
        var img = document.querySelector('img')
        var div = document.querySelector('div')
        // 2. 得到当前小时数
        var date = new Date()
        var h = date.getHours()
        // 3. 判断小时数，改变图片和文字信息
        if(h < 12) {
            img.src = 'images/s.gif'
            div.innerHTML = '亲，上午好'
        } else if(h < 18) {
            img.src = 'images/x.gif'
            div.innerHTML = '亲，下午好'
        } else {
            img.src = 'images/w.gif'
            div.innerHTML = '亲，晚上好'
        }
    </script>
</body>
</html>

在这里插入图片描述

6.4 表单元素的属性操作

利用 DOM 可以操作如下表单元素的属性： type、value、checked、selected、disabled

<body>
    <button>按钮</button>
    <input type="text" value="输入内容">
    <script>
        // 1. 获取元素
        var btn = document.querySelector('button')
        var input = document.querySelector('input')
        // 2. 注册事件 处理程序
        btn.onclick = function() {
            // input.innerHTML = '点击了'  这个是普通盒子如div标签里面的内容
            // 表单里面的的值(文字)内容是通过 value 来修改的
            input.value = '被点击了'
            // 若若想要某个表单被禁用，不能再点击了，用disabled-即按钮button禁用
            btn.disabled = true
            this.disabled = true
            // this指向的是事件函数的调用者-btn
        }
    </script>
</body>

在这里插入图片描述

6.5 案例-仿京东显示密码

点击按钮将密码框切换为文本框，并可以查看密码明文。

核心思路：点击眼睛按钮，把密码框类型改为文本框就可以看见里面的密码
一个按钮两个状态，点击一次，切换为文本框，继续点击一次切换为密码框
算法：利用一个flag变量，来判断flag的值，如果是1 就切换为文本框，flag 设置为0，如果是0 就切换为密码框，flag设置为1

<!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>
    <style>
        .box {
            position: relative;
            width: 400px;
            border-bottom: 1px solid #ccc;
            margin: 100px auto;
        }
        .box input {
            width: 370px;
            height: 30px;
            border: 0;
            outline: none;
        }
        .box img {
            position: absolute;
            top: 2px;
            right: 2px;
            width: 24px;
        }
    </style>
</head>
<body>
    <div class="box">
        <label for="">
            <img src="./images/close.png" alt="" id="eye">
        </label>
        <input type="password" name="" id="pwd">
    </div>
    <script>
        // 1. 获取元素
        var eye = document.getElementById('eye')
        var pwd = document.getElementById('pwd')
        // 2. 注册事件  处理程序
        var flag = 0
        eye.onclick = function() {
            // 点击一次之后，flag一定要变化
            if(flag == 0) {
                pwd.type = 'text'
                eye.src = 'images/open.png'
                flag = 1
            } else {
                pwd.type = 'password'
                eye.src = 'images/close.png'
                flag = 0
            }
        }
    </script>
</body>
</html>

在这里插入图片描述

6.6 样式属性操作

我们可以通过 JS 修改元素的大小、颜色、位置等样式。

1.element.style 行内样式操作
2.element.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>
    <style>
        div {
            width: 200px;
            height: 200px;
            background: pink;
        }
    </style>
</head>
<body>
    <div></div>
    <script>
        // 1. 获取元素
        var div = document.querySelector('div')
        // 2. 注册事件  处理程序
        div.onclick = function() {
            // div.style里面的属性采用驼峰命名法
            this.style.backgroundColor = 'purple'
            this.style.width = '250px'
        }
    </script>
</body>
</html>

在这里插入图片描述

6.7 案例-淘宝点击关闭二维码

<!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>
    <style>
        .box {
            position: relative;
            width: 74px;
            height: 88px;
            border: 1px solid #ccc;
            margin: 100px auto;
            font-size: 12px;
            text-align: center;
            color: #f40;
            /* display: block; */
        }
        
        .box img {
            width: 60px;
            margin-top: 5px;
        }
        
        .close-btn {
            position: absolute;
            top: -1px;
            left: -16px;
            width: 14px;
            height: 14px;
            border: 1px solid #ccc;
            line-height: 14px;
            font-family: Arial, Helvetica, sans-serif;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div class="box">
        淘宝二维码
        <img src="images/tao.png" alt="">
        <i class="close-btn">×</i>
    </div>
    <script>
        var box = document.querySelector('.box')
        var btn = document.querySelector('.close-btn')
        btn.onclick = function() {
            box.style.display = 'none'
        }
    </script>
</body>
</html>

在这里插入图片描述

6.8 案例-循环精灵图背景

<!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>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        li {
            list-style-type: none;
        }
        
        .box {
            width: 250px;
            margin: 100px auto;
        }
        
        .box li {
            float: left;
            width: 24px;
            height: 24px;
            background-color: pink;
            margin: 15px;
            background: url(images/sprite.png) no-repeat;
        }
    </style>
</head>
<body>
    <div class="box">
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
    <script>
        // 1. 获取元素
        var lis = document.querySelectorAll('li')
        for(var i = 0; i < lis.length; i++) {
            var index = i * 44
            lis[i].style.backgroundPosition = `0 -${index}px`
        }
    </script>
</body>
</html>

在这里插入图片描述

6.9 案例-显示隐藏文本框内容

表单需要2个新事件，获得焦点 onfocus 失去焦点 onblur

<!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>
    <style>
        input {
            color: #999;
        }
    </style>
</head>
<body>
    <input type="text" value="手机">
    <script>
        // 1. 获取元素
        var text = document.querySelector('input')

        // 2. 注册事件  获得焦点事件-onfocus
        text.onfocus = function() {
            // console.log('得到了焦点')
            if(this.value === '手机') {
                this.value = ''
            }
            // 获得焦点需要把文本框里的颜色变黑
            this.style.color = '#333'
        }

        // 3. 注册事件  失去焦点事件-onblur
        text.onblur = function() {
            // console.log('失去了焦点')
            if(this.value === '') {
                this.value = '手机'
            }
            // 失去焦点需要把文本框里的颜色变黑
            this.style.color = '#999'
        }
    </script>
</body>
</html>

在这里插入图片描述

6.9 使用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>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: pink;
        }
        .change {
            background-color: purple;
            color: #fff;
            font-size: 25px;
            margin-top: 100px;
        }
    </style>
</head>
<body>
    <div class="first">文本</div>
    <script>
        // 1. 使用 element.style 获得修改元素样式--在样式比较少或功能简单的情况下使用
        var test = document.querySelector('div')
        test.onclick = function() {
            // this.style.backgroundColor = 'purple'
            // this.style.color = '#fff'
            // this.style.fontSize = '25px'
            // this.style.marginTop = '100px'

            // 2. 使用 className 修改元素样式--让当前元素的类名改为了change
            // this.className = 'change'

            // 3. 如果想要保留原先的类名，我们可以这么做--多类名选择器
            this.className = 'first change'
        }
    </script>
</body>
</html>

在这里插入图片描述

6.10 案例-密码框格式提示错误信息

1.首先判断的事件是表单失去焦点 onblur
2.如果输入正确则提示正确的信息颜色为绿色小图标变化
3.如果输入不是6到16位，则提示错误信息颜色为红色小图标变化
4.因为里面变化样式较多，我们采取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>
    <style>
        div {
            width: 600px;
            margin: 100px auto;
        }
        
        .message {
            display: inline-block;
            font-size: 12px;
            color: #999;
            background: url(images/mess.png) no-repeat left center;
            padding-left: 20px;
        }
        
        .wrong {
            color: red;
            background-image: url(images/wrong.png);
        }

        .right {
            color: green;
            background-image: url(images/right.png);
        }
    </style>
</head>
<body>
    <div class="register">
        <input type="password" class="ipt">
        <p class="message">请输入6~16位密码</p>
        <script>
            // 1. 获取元素
            var ipt = document.querySelector('.ipt')
            var message = document.querySelector('.message')
            // 2. 注册事件-失去焦点
            ipt.onblur = function() {
                // 根据表单里面值的长度来判断
                if(this.value.length < 6 || this.value.length > 16) {
                    // console.log('错误')
                    message.className = 'message wrong'
                    message.innerHTML = '您输入的位数不对要求6~16位'
                } else {
                    message.className = 'message right'
                    message.innerHTML = '您输入的正确'
                }
            }
        </script>
    </div>
</body>
</html>

在这里插入图片描述

6.11 总结

在这里插入图片描述

纯纯不会写代码

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
Day1-DOM1

文档对象模型（Document Object Model，简称DOM），是 W3C 组织推荐的处理可扩展标记语言（HTML或者XML）的标准编程接口。W3C 已经定义了一系列的 DOM 接口，通过这些 DOM 接口可以改变网页的内容、结构和样式。DOM 树文档：一个页面就是一个文档，DOM 中使用 document 表示元素：页面中的所有标签都是元素，DOM 中使用 element 表示节点：网页中的所有内容都是节点（标签、属性、文本、注释等），DOM 中使用 node 表示。
复制链接

扫一扫