DOM知识1

于 2021-08-16 16:29:30 发布
阅读量60 收藏
点赞数
分类专栏： es6
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_48219937/article/details/119711256
版权

在这里插入图片描述
在这里插入图片描述

<!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>
</head>
<body>
    <div id="time">2019-9-9</div>
    <!-- 1.因为我们从文档页面从上往下加载，所以先得获取到标签，即把script写到标签的下面
    2.通过getElementById获得元素 
    3.参数 id是大小写敏感的字符串，所以要加引号
    4.返回的是元素对象
    -->
    <script>
        var timer = Document.getElementById('time');
        console.log(timer);
        console.log(typeof timer);
        // console.dir 打印我们返回的元素对象，更好的查看里面的属性和方法
        console.dir(timer);
    </script>
    

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

    </script>


</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>
</head>
<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>
        <li>生僻字5</li>
    </ol>

    <script>
        
        //获取父元素ol里面的li，就不能用document来获取，因为会把ul里面的同样获取到，而且父元素必须是指定的单个元素
        var ol = document.getElementsByTagName('ol');  //[ol] 伪数组是不能作为父元素的
        //[ol]这个伪数组里面只有ol一个元素，所以可以通过ol[0]来拿到第一个ol
        console.log(ol[0].getElementsByTagName('li'))
        //另：给ol标签添一个id
        var ol = document.getElementById('ol');
        console.log(ol.getElementsByTagName('id'));
        var 
    </script>


</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>
</head>
<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>
</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>
</head>
<body>
    <script>
        //1.获取body元素
        var bodyeEle = document.body;
        console.log(bodyeEle);
        console.dir(bodyeEle);
        //2.获取html元素
        var htmlEle = document.documentElement;
        console.log(htmlEle);
    </script>
</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>
</head>
<body>
    <button id="xiuxiu">程秀</button>
    <script>
        //点击一个按钮，弹出对话框
        //1.事件由三部分组成   事件源  事件类型  事件处理程序   也称为事件三要素
        //(1)事件源  是事件被触发的对象  即按钮
        var btn = document.getElementById('xiuxiu');
        //(2)事件类型  如何触发  什么事件  比如鼠标点击（onclick）鼠标经过，还是键盘按下
        //(3)事件处理过程  通过一个函数赋值的方式完成
        btn.onclick = function(){
            alert('大笨蛋');
        }
    </script>
</body>
</html>

在这里插入图片描述
在这里插入图片描述

操作元素（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>

    <style>
        div,p {
            width: 300px;
            height: 30px;
            line-height: 30px;
            color: blue;
            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 = '2019-5-8';//改变文字
            div.innerText = getDate();
        }
        
        //获取系统当前时间
        function getDate(){
            var date = new Date();
            var year = date.getFullYear();
            var month = date.getMonth()+1;
            var dates = date.getDate();
            var arr = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六']
            var day = date.getDate();
            return '今天是' + year + '年' + month + '月' + date + '日' + arr[day];
        }
        //元素不添加事件直接使用
        var p = document.querySelector('p');
        p.innerText = getDate();
    </script>
</body>
</html>

在这里插入图片描述

4.2、常用元素的属性操作（修改元素属性）

<!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>
</head>
<body>
    <button id="ldh">刘德华</button>
    <button id="zxy">张学友</button>
    <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>
</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>
        .box {
            position: relative;
            width: 74px;
            height: 88px;
            border:1px solid pink;
            margin: 100px auto;
            font-size: 12px;
            text-align: center;
            color: #f40;
        }

        .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/淘宝.png" alt="">
        <i class="close-btn">x</i>
    </div>

    <script>
        //1.获取元素
        var box = document.querySelector('.box');
        var btn = document.querySelector('.close-btn');
        //2.绑定事件
        btn.onclick = function(){
            box.style.display = 'none';
        }
    </script>



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

    <style>
        *{
            margin: 0;
            padding: 0;
        }

        li{
            list-style-type: none;
        }

        .box{
            width: 250px;
            height: 100px auto;
        }

        .box li{
            float: left;
            width: 24px;
            height: 24px;
            background-color: pink;
            margin: 15px;
        }
    </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.获取元素  所有的小li
        var lis = document.querySelectorAll('li');
        for(var i = 0; i < lis.length; i++){
            //让索引号 乘以 44 就是每个li得背景y坐标  
            var index = i * 44;
            lis[i].style.backgroundPosition = '0 -' + index + 'px';
        }
    </script>
   
</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>

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

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
案例：
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

wwaitings
关注
专栏目录
DOM 知识点汇总
01-18
以下是一些关键的DOM知识点： 1. **DOM元素选择**： - `getElementById()`：根据ID选取唯一的元素。 - `getElementsByClassName()`：根据类名选取所有元素。 - `getElementsByTagName()`：根据标签名选取所有...
DOM知识点汇总
01-18
javascript DOM知识点汇总，（需要使用xmind打开），xmind软件下载地址:
DOM知识总结
12-02
史上最详细的DOM笔记，最全DOM操作详解。
DOM基础知识（五）
01-08
在本篇【DOM基础知识（五）】中，我们将重点探讨日期对象Date()以及与时间相关的定时器。 日期对象Date()是JavaScript内置的一个对象，它的计算机纪元年始于1970年1月1日0时0分0秒（UTC）。每次创建一个新的Date...
Dom 结点创建 基础知识
09-05
Dom 结点创建基础知识 Dom 结点创建是 JavaScript 中的一种常见操作，用于创建新的 HTML 元素并将其添加到文档中。下面是关于 Dom 结点创建的基础知识回顾。 什么是 Dom 结点？ Dom 结点是文档对象模型（Document...
jdk-1.8(8u211-windows-x64)
10-07
jdk-8u211-windows-x64
光储并网直流微电网simulink仿真模型，光伏采用mppt实现最大功率输出 储能由蓄电池和超级电容构成的混合储能系统 为了
10-07
光储并网直流微电网simulink仿真模型，光伏采用mppt实现最大功率输出。 储能由蓄电池和超级电容构成的混合储能系统。 为了确保微网并网时电能质量，采用二阶低通滤波法对光伏输出功率进行抑制，
失物招领信息交互平台 SSM毕业设计 源码+数据库+论文（JAVA+SpringBoot+Vue.JS）.zip
10-07
失物招领信息交互平台 SSM毕业设计 源码+数据库+论文（JAVA+SpringBoot+Vue.JS） 启动教程：https://www.bilibili.com/video/BV1GK1iYyE2B
GTT2602-VB一种N-Channel沟道SOT23-6封装MOS管
10-07
30V;6A;RDS(ON)=30mΩ@VGS=10V;VGS=20V;Vth=1.2V
基于51单片机的水箱液位远程监测系统源代码+原理图+流程图+程序说明
10-07
1、使用单片机串口与模块通信；接法如下 STC单片机 GPRS模块 P3.0(RXD)->TXD P3.1(TXD)->RXD GND ->GND 晶振选用11.05926MHz 2、更改服务器地址，包括IP和端口号，要与实际服务器地址对应上。 3、测试此功能时，确保您的服务器是可用的。
GJ9563-VB一种P-Channel沟道TO252封装MOS管
10-07
-40V;-65A;RDS(ON)=10mΩ@VGS=10V;VGS=20V;Vth=-1.6V
DBO-BILSTM回归预测
10-07
用于深度学习项目，里面包含程序运行的所有代码，数据集可以关注我私我获取，这个很容易写毕业设计，只需把数据集换成自己想要预测的就可以了。
小区疫情防控管理系统 SSM毕业设计 源码+数据库+论文（JAVA+SpringBoot+Vue.JS）.zip
10-07
小区疫情防控管理系统 SSM毕业设计 源码+数据库+论文（JAVA+SpringBoot+Vue.JS） 启动教程：https://www.bilibili.com/video/BV1GK1iYyE2B
基于A算法的智能小车路径规划python源代码.rar
10-07
1.版本：matlab2014/2019a/2024a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。
上位机通过PCle把数据发送给FPGA，FPGA打包后通过光纤模块发送出去，同时FPGA保存光纤过来的数据到DDR3中，当DDR
10-07
上位机通过PCle把数据发送给FPGA，FPGA打包后通过光纤模块发送出去，同时FPGA保存光纤过来的数据到DDR3中，当DDR3中的数据存够一定数量把DDR3中的数据通过PCle发送给上位机。
MTB60N06J3-VB一种N-Channel沟道TO252封装MOS管
10-07
60V;45A;RDS(ON)=24mΩ@VGS=10V;VGS=20V;Vth=1.8V
双向广度优先搜索(BBFS)路径规划算法(Python实现).rar
10-07
1.版本：matlab2014/2019a/2024a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。
MySQL8.0数据库点击install快速安装，uninstall快速卸载
最新发布
10-07
MySQL8.0数据库点击install快速安装，uninstall快速卸载
Design and Analysis of Coupling Matrix for Microwave Filter App
10-07
This paper mainly analyzes the concepts of the Coupling Matrix and its application for microwave filter. Methods are presented for the generation of the transfer polynomials, and then the direct synthesis of the corresponding canonical network coupling matrices for Chebyshev (i.e., prescribed-equiripple) filtering functions of the most general kind. A simple recursion technique is described for the generation of the polynomials for even- or odd-degree Chebyshev filtering functions with symme
JavaScript DOM操作与基本知识点解析
"这篇资源主要介绍了JavaScript的基本操作，特别是与DOM（Document Object Model）相关的知识，包括节点操作、元素选择以及窗口加载事件的处理。通过示例代码解析了DOM节点的层次结构，以及如何通过JavaScript获取和...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值