Code前端首页关于Code前端联系我们
首页 前端开发Vue正文

第 3 阶段 Web API - 第 1 天

terry 2年前 (2023-09-08) 阅读数 172 #Vue

1。 DOM 简介

1.1 什么是HOME

文档对象模型 (DOM) 是 W3C 组织推荐的用于处理可扩展标记语言（HTML
或 XML）的标准编程接口。

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

1.2 树 DOM

  • 文档：页面是文档，文档在DOM中用于表示

  • 元素：页面上的所有标签都是元素，元素在DOM中用来表示

  • 节点：网站上的所有内容都是一个节点（标签、属性、文本、评论等）。 DOM 中使用节点来表示 DOM。以上内容视为主题

2。获取物品

DOM在我们实际开发中主要用来操作元素。

我们如何获取页面上的元素？

2.1 如何获取页面元素

您可以通过多种方式获取页面上的元素：

  • 通过ID获取
  • 根据标签名称获取
    • 使用新的 HTML5 方法获取
  • 获得特殊物品

2。获取物品

2.2 根据ID获取

使用getElementById()方法通过ID获取元素对象。

document.getElementById('id');

使用console.dir()打印我们获取到的元素的对象，可以更好的查看对象中的属性和方法。 

<body>
    <div id="time">2021-5-26</div>
    <script>
        // 1.因为我们文档页面从上往下加载，所以先得有标签 所以我们把script标签写在下面
        // 2.get 获得 element 元素 by 通过 驼峰命名法
        // 3.参数 id 是大小写敏感的字符串
        // 4.返回的是一个元素对象
        var timer = document.getElementById('time');
        console.log(timer);     //<div id="time">2021-5-26</div>
        console.log(typeof timer);  //object
        // 5.console.dir    打印我们返回的元素对象 更好的查看里面的属性和方法
        console.dir(timer);     // div#time
    </script>
</body>

2.3 根据标签名称获取

使用 getElementsByTagName( ) 方法返回具有指定标签名称的对象集合。

document.getElementsByTagName('标签名');

注：

  1. 既然我们得到了一个对象的集合，那么如果我们想要操作里面的元素就需要遍历。

  2. 对象获取元素是动态的

  3. 如果无法检索到元素，将返回一个空伪数组（因为无法检索到对象）

<body>
    <ul>
        <li>知否知否，应是1234</li>
        <li>知否知否，应是1234</li>
        <li>知否知否，应是1234</li>
        <li>知否知否，应是1234</li>
        <li>知否知否，应是1234</li>
    </ul>
    <ul id="nav">
        <li>skr~</li>
        <li>skr~</li>
        <li>skr~</li>
        <li>skr~</li>
        <li>skr~</li>
    </ul>
    <script>
        // 1.返回的是 获取过来元素对象的集合 以伪数组的形式储存的
        var lis = document.getElementById('li');
        console.log(lis);
        console.log(lis[0]);
        // 2.我们想要一次打印里面的元素对象 我们可以采取遍历的方式
        for(var i = 0; i < lis.length; i++){
            console.log(lis[i]);
        }
        // 3. element.getElementsByTagName() 可以得到这个元素里面的某种标签
        var nav = document.getElementById('nav'); //获得nav元素
        var navLis = nav.getElementsByTagName('li');
        console.log('navLis');
    </script>
</body>

2.4 使用新的 HTML5 方法获取

    文档。getElementsByClassName('classname'); //返回给定类名的元素对象的集合
    文档。querySelector('选择器'); // 返回给定选择器的第一个元素对象
    文档。querySelectorAll('选择器'); //给定选择器返回

注：

querySelector 和 querySelectorAll 选择器必须添加符号 如 :document.querySelector('#nav');

2.5 获取特殊元素（body、html）

获取身体元素

  1. doucumnet.body // 返回body元素对象

获取html元素

  1. document.documentElement // 返回html元素对象
<script>
        // 1.获取body 元素
        var bodyEle = document.body;
        console.log(bodyEle);
        console.dir(bodyEle);
        // 2.获取html 元素
        // var htmlEle = document.html;
        var htmlEle = document.documentElement;
        console.log(htmlEle);
</script>

3。事件依据

3.1 活动概述

JavaScript 允许我们创建动态页面，事件是 JavaScript 可以检测到的操作。
简单理解：触发和响应机制。
网页上的每个元素都可以生成某些可以触发 JavaScript 的事件。例如，我们可以在用户点击按钮时创建一个事件
，然后执行某些操作。

3.2 事件三要素

  1. 事件来源（谁）
    2. 事件类型（什么样的事件） 事件经理（做什么）

示例：点击按钮弹出警告窗口
页面上有一个按钮，当您用鼠标单击该按钮时，会出现“Hello”警告窗口。

image.pngimage.png

案例分析

① 获取事件源（按钮）

②注册事件（绑定事件），使用onclick

③ 编写事件处理程序，编写弹出警报框的函数

实现代码

var btn = document.getElementById('btn'); btn.onclick = function() { alert('你好吗'); };

<body>
    <button id="btn">唐伯虎</button>
    <script>
        // 点击一个按钮，弹出对话框
        // 1. 事件是有三部分组成  事件源  事件类型  事件处理程序   我们也称为事件三要素
        //(1) 事件源 事件被触发的对象   谁  按钮
        var btn = document.getElementById('btn');
        //(2) 事件类型  如何触发 什么事件 比如鼠标点击(onclick) 还是鼠标经过 还是键盘按下
        //(3) 事件处理程序  通过一个函数赋值的方式 完成
        btn.onclick = function() {
            alert('点秋香');
        }
    </script>
</body>

3.3 执行事件的步骤

  1. 获取事件源
  2. 应用事件（绑定事件）
    3. 添加事件处理（以函数分配的形式） 
<body>
    <div>123</div>
    <script>
        // 执行事件步骤
        // 点击div 控制台输出 我被选中了
        // 1. 获取事件源
        var div = document.querySelector('div');
        // 2.绑定事件 注册事件
        // div.onclick 
        // 3.添加事件处理程序 
        div.onclick = function() {
            console.log('我被选中了');
        }
    </script>
</body>

3.3 常见鼠标事件

image.pngimage.png

3.4 分析事件的三个​​要素

三个下拉菜单项

关闭三个广告元素

4。工作项目

JavaScript的DOM操作可以改变网页的内容、结构和风格。通过DOM操作元素，我们可以改变内容、属性等。在元素中。请注意，以下属性是

<body>
    <button>显示当前系统时间</button>
    <div>某个时间</div>
    <p>1123</p>
    <script>
        // 当我们点击了按钮，  div里面的文字会发生变化
        // 1. 获取元素 
        var btn = document.querySelector('button');
        var div = document.querySelector('div');
        // 2.注册事件
        btn.onclick = function() {
            // div.innerText = '2019-6-6';
            div.innerHTML = getDate();
        }

        function getDate() {
            var date = new Date();
            // 我们写一个 2019年 5月 1日 星期三
            var year = date.getFullYear();
            var month = date.getMonth() + 1;
            var dates = date.getDate();
            var arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
            var day = date.getDay();
            return '今天是：' + year + '年' + month + '月' + dates + '日 ' + arr[day];
        }
        // 我们元素可以不用添加事件
        var p = document.querySelector('p');
        p.innerHTML = getDate();
    </script>
</body>

4.1 更改元素的含量

element.innerText
从开始位置到结束位置的内容，但剥离 html 标签、空格和换行符也被删除
element.innerHTML
从开始位置到结束位置的所有内容，包括 html 标签，保留空格和换行符 

<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标签 W3C标准 保留空格和换行的
        div.innerHTML = '<strong>今天是：</strong> 2019';
        // 这两个属性是可读写的  可以获取元素里面的内容
        var p = document.querySelector('p');
        console.log(p.innerText);  
        console.log(p.innerHTML);
    </script>
</body>

4.2 常用元素属性操作

  1. innerText、innerHTML 改变元素的内容
  2. 心，href
  3. id、替代项、标题

示例：分时显示不同的图片和问候语。
根据不同的时间，页面显示不同的图片，同时显示不同的问候语。
如果早上打开页面，会显示早上好，并显示早上的照片。
如果你在下午打开页面，你会看到美好的一天和下午的照片。
如果您在晚上打开页面，将会显示晚安和晚上的照片。

案例分析

① 根据不同的系统时钟进行评估，因此需要日期嵌入对象

② 使用多分支语句设置不同的图像

③需要一张图片并根据时间进行调整，需要使用操作元素的src属性

④ 需要一个div元素来显示不同的问候语，只需更改

元素的内容即可

  • 4.3 表单元素属性操作

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

    示例：京东显示仿密码
    点击按钮将密码字段切换为文本字段，即可看到密码的明文。

    image.pngimage.png

    案例分析

    ① 基本思路：点击眼睛按钮，将密码字段类型更改为文本字段，即可看到里面的密码

    ② 一个按钮有两种状态，单击一次切换到文本框，单击一次切换到密码框

    ③算法：使用flag变量来确定flag的值。如果为 1，则切换到文本字段并将 flag 设置为 0。如果
    为 0，则切换到密码字段并将 flag 设置为 1

        <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>

    4.4 样式属性操作

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

    1. element.style内联样式操作
    2. element.className 类名样式操作 
        <style>
        div {
            width: 200px;
            height: 200px;
            background-color: 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>

    注：

    1。 JS 用例命名中的样式，如 fontSize、backgroundColor

    2。 JS改变样式操作创建内联样式，CSS权重比较高

    • 版权声明

    本文仅代表作者观点，不代表Code前端网立场。
    本文系作者Code前端网发表，如需转载，请注明页面地址。

    上一篇：js中常见的循环迭代：for循环、forEach、for…in…for…of… 下一篇：JS开发-常用短函数-浏览器
    相关文章

    发表评论:

    ◎欢迎参与讨论，请在这里发表您的看法、交流您的观点。

    terry

    terry

    作者文章
    浏览更多
    热门
    最新文章
    标签列表
    Copyright by code前端网 All Rights Reserved.粤ICP备12067512号-4

    Powered By Z-BlogPHP Theme By 编程老白