DOM

2024-03-09 23:56:04
开发
40

文章目录

1. DOM 简介
- 1.1什么是DOM
- 1.2 DOM 树
2. 获取元素
3. 事件基础
4. 操作元素(DOM核心)

1. DOM 简介

1.1什么是DOM

在这里插入图片描述

1.2 DOM 树

在这里插入图片描述

2. 获取元素

2.1 获取页面元素

在这里插入图片描述

(1) 根据ID 获取

在这里插入图片描述

(2) 根据标签名获取

在这里插入图片描述

在这里插入图片描述

获取单个元素时：
要么是获取文档中全部的该元素，再通过索引进行选取需要的元素；
要么是通过id 名进行获取。

(3) HTML5新增获取元素方法

在这里插入图片描述

根据类名获取

在这里插入图片描述

返回选择器中第一个元素

在这里插入图片描述

返回指定选择器的所有对象

在这里插入图片描述

2.2 获取特殊元素

获取body 标签
获取html 元素

3. 事件基础

3.1 事件

在这里插入图片描述

3.2 事件三要素

在这里插入图片描述

3.3 执行事件的步骤

在这里插入图片描述

3.4 常见的鼠标事件

在这里插入图片描述

4. 操作元素(DOM核心)

在这里插入图片描述

4.1 改变元素内容

在这里插入图片描述
添加注册事件：

未添加注册事件：

innerText 和 innnerHTML区别

在这里插入图片描述

4.2 常见元素的操作

在这里插入图片描述

修改元素属性 在这里插入图片描述

案例：分时显示不同图片，显示不同问候语

在这里插入图片描述

4.3 修改表单元素

在这里插入图片描述

案例：仿京东显示密码

在这里插入图片描述
此处利用了一个算法：
（通常是一个按钮要实现两种情况的功能）

    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        .box {
            position: relative;
            margin: 50px auto;
            padding: auto;
            width: 800px;
            height: 50px;
            border-bottom: 1px solid #222;
        }
        .box input {
            width: 700px;
            height: 100%;
            border: 0;
            outline: 0;
            font-size: 20px;
        }
        .box .eye {
            position: absolute;
            top: 14px;
            right: 30px;
        }
    </style>
</head>
<body>
    <div class="box">
        <label for="">
            <div class="eye" id="eye">&lg;</div>
        </label>
        <input type="password" name="" id="pwd">
    </div>
    <script>
        var eye = document.getElementById('eye');
        var pwd = document.getElementById('pwd');
        var flag = 0;
        eye.onclick = function() {
            if(flag == 0) {
                pwd.type = 'text';
                eye.innerHTML = '>';
                flag = 1;
            }else {
                pwd.type = 'password';
                eye.innerHTML = '&lg;';
                flag = 0;
            }
        }
    </script>

4.4 样式属性操作

在这里插入图片描述

(1) 行内样式操作

适用于修改样式比较少的情况！
在这里插入图片描述

在这里插入图片描述

案例–循环精灵图

在这里插入图片描述

案例–显示隐藏文本框内容

在这里插入图片描述

(2) 类名样式操作

适用于修改样式比较多的情况！
在这里插入图片描述
注意：className 会直接更改元素的类名，回复该原先的类名。
想要保留原来的类名，可以按照下面的方法操作：

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

在这里插入图片描述

4.5 排他思想

在这里插入图片描述

案例–换肤

在这里插入图片描述

使用img 和背景bacground 插入图片有什么不同？
在这里插入图片描述

案例–表格隔行变色

在这里插入图片描述

案例–表单全选取消全选

在这里插入图片描述

4.6 自定义属性操作

(1) 获取属性值

在这里插入图片描述

(2) 设置属性值

在这里插入图片描述

在这里插入图片描述
注意：
class 名称的修改：
第一种方法中是element.className = ’ ';
在第二种方法中是element.setAttribute(‘class’,‘name’)。

在这里插入图片描述

案例–tab栏切换(重点案例)

在这里插入图片描述

4.7 H5自定义属性

在这里插入图片描述

设置自定义属性
获取H5自定义属性

注意：
getAttribute() 无兼容性；
dateset 是ie11才支持，有兼容性。

原文地址:https://blog.csdn.net/2302_79523175/article/details/136418002 本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：https://www.suanlizi.com/kf/1766493162370633728.html 如若内容造成侵权/违法违规/事实不符，请联系《酸梨子》网邮箱：1419361763@qq.com进行投诉反馈，一经查实，立即删除！

阅读全部