• JavaScript---DOM---DOM简介、获取元素、事件基础、操作元素---11.5

    DOM简介

    什么是DOM

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

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

    DOM树

    • 文档：一个页面就是一个文档，DOM中使用document表示。
    • 元素：页面中的所有标签都是元素，DOM中使用element表示。
    • 节点：网页中的所有内容都是节点（标签、属性、文本、注释等），DOM中使用node表示。

    DOM把以上内容都看做是对象

    获取元素

    如何获取页面元素

    DOM在我们实际开发中主要用来操作元素。我们如何来获取页面中的元素呢？

    • 根据ID获取：使用getElementByld()方法可以获取带有ID的元素对象。
    2.     <div id="time">2022div>
    3.     <script>
    4.         //1.文档页面从上往下加载，所以先有标签  script写到标签的下面
    5.         //2.get获得  element元素  by通过   驼峰命名法
    6.         //3.参数 id是大小写敏感的字符串   返回的是一个元素对象
    7.         var timer = document.getElementById('time').
    8.         console.log(timer);// 
      2022
    9.         console.log(typeof timer);//object
    10.         console.dir(timer);//返回的元素对象  更好的查看里面的属性和方法
    11.     script>
    • 根据标签名获取：使用getElementsByTagName()方法可以返回带有指定标签名的对象的集合。
      •      <li>1li><li>2li><li>3li>
  • <script>
  • //1.返回的是获取过来元素对象的集合 以伪数组的形式存储
  • var lis = document.getElementsByTagName('li');
  • console.log(lis);
  • console.log(lis[0]);
  • //2.想要依次打印里面的元素对象, 我们可以采取遍历的方式
  • for (var i=0; ilength; i++) {
  • console.log(lis[i]);
  • }
  • script>
    2.     <div class="box">盒子1div>
    3.     <div class="box">盒子2div>
    4.     <div id="nav">
    5.         <ul>
    6.             <li>首页li>
    7.             <li>产品li>
    8.         ul>
    9.     div>
    10.     <script>
    11.         //1.getElementsByClassName  根据类名获得某些元素集合
    12.         var boxs = document.getElementsByClassName('box');
    13.         console.log(boxs);//HTMLCollection(2) [div.box, div.box]
    14.         //2.querySelector 返回指定选择器的第一个元素对象
    15.         var firstBox = document.querySelector('.box');
    16.         console.log(firstBox);//
      盒子1
    17.         var nav = document.querySelector('#nav');
    18.         console.log(nav);//
    19.         var li = document.querySelector('li');
    20.         console.log(li);//
    21. ...
  • //3.querySelectorAll()返回指定选择器的所有元素对象集合
  • var allBox = document.querySelectorAll('.box');
  • console.log(allBox);//NodeList(2) [div.box, div.box]
  • var lis = document.querySelectorAll('li');
  • console.log(lis);//NodeList(2) [li, li]
  • script>

    事件基础

    事件概述

    JavaScript使我们有能力创建动态页面，而事件是可以被JavaScript侦测到的行为。简单理解：触发----响应机制。网页中的每个元素都可以产生某些可以触发JavaScript的事件，例如，我们可以在用户点击某按钮时产生一个事件，然后去执行某些操作。

    事件三要素

    2. <script>
    3.     var btn = document.getElementById('btn');
    4.     btn.onclick = function() {
    5.         alert('点秋香');
    6.     }
    7. script>

    执行事件的步骤

    1. 获取事件源
    2. 注册事件（绑定事件）
    3. 添加事件处理程序（采取函数赋值形式）
    2. <div>123div>
    3. <script>
    4.     var div = document.querySelector('div');//获取事件源
    5.     div.onclick = function() { //绑定事件 添加事件处理程序
    6.         console.log('我被选中了');
    7.     }
    8. script>

    常见的鼠标事件

    操作元素

    JavaScript的DOM操作可以改变网页内容、结构和样式，我们可以利用DOM操作元素来改变元素里面的内容、属性等。注意以下都是属性。

    改变元素内容：

    element.innerText：从起始位置到终止位置的内容，但不识别html标签，同时空格和换行也会去掉
    element.innerHTML：起始位置到终止位置的全部内容，包括html标签，同时保留空格和换行

    2.     <button>显示当前系统时间button>
    3.     <div>某个时间div>
    4.     <p>123p>
    5.     <script>
    6.         //当我们点击按钮，div的文字会改变
    7.         var btn = document.querySelector('button');
    8.         var div = document.querySelector('div');
    9.         btn.onclick = function() {
    10.             div.innerHTML = getDate();
    11.         }
    12.         function getDate() {
    13.             var date = new Date();
    14.             var year = date.getFullYear();
    15.             var month = date.getMonth()+1;
    16.             var dates = date.getDate();  
    17.             var arr=['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];
    18.             var day = date.getDay();
    19.             return '今天是：'+year+'年'+month+'月'+dates+'日 '+arr[day];
    20.         }
    21.         //元素也可以不添加事件
    22.         var p = document.querySelector('p');
    23.         p.innerHTML = getDate();
    24.     script>

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

    1. <body>
    2.     <img src="images/keli.jpg" alt="">
    3.     <div>上午好div>
    4.     <script>
    5.         var img = document.querySelector('img');
    6.         var div = document.querySelector('div');
    7.         var data = new Date();
    8.         var h = data.getHours();
    9.         if(h<12) {
    10.             img.src = 'images/keli.jpg';
    11.             div.innerHTML = '亲，上午好，好好写代码';
    12.         }else if(h<18) {
    13.             img.src = 'images/keli1.jpg';
    14.             div.innerHTML = '亲，下午好，休息一会吧';
    15.         }else{
    16.             img.src = 'images/keli2.jpg';
    17.             div.innerHTML = '亲，晚上好，晚安';
    18.         }
    19.     script>
    20. body>

    表单元素的属性操作

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

    1. <button>按钮button>
    2. <input type="text" value="请输入内容">
    3. <script>
    4.     var btn = document.querySelector('button');
    5.     var input = document.querySelector('input');
    6.     btn.onclick = function() {
    7.         input.value = '被点击了';
    8.         btn.disabled = true;//禁用button按钮
    9.         //this.disabled = true;//this指向的是事件函数的调用者btn
    10.     }
    11. script>

    案例：仿京东显示密码
    点击按钮将密码框切换为文本框，并可以查看密码明文。

    1. <div class="box">
    2.     <label for="">
    3.         <img src="images/close.jpg" alt="" id="eye">
    4.     label>
    5.     <input type="password" name="" id="pwd">
    6. div>
    7. <script>
    8.     var eye = document.getElementById('eye');
    9.     var pwd = document.getElementById('pwd');
    10.     var flag = 0;
    11.     eye.onclick = function() {
    12.         if(flag == 0) {
    13.             pwd.type = 'text';
    14.             eye.src = 'images/open.jpg';
    15.             flag = 1;
    16.         }else {
    17.             pwd.type = 'password';
    18.             eye.src = 'images/close.jpg';
    19.             flag = 0;
    20.         }
    21.     }
    22. script>

    样式属性操作

    我们可以通过JS修改元素的大小，颜色、位置等样式。JS修改style样式操作，产生的是行内样式，css权重比较高。

    element.style  行内样式操作
    element.className  类名样式操作

    element.style  行内样式操作

    1. <style>
    2.     div {width: 200px;height: 200px;background-color: pink;}
    3. style>
    4. <div>div>
    5. <script>
    6.     var div = document.querySelector('div');
    7.     div.onclick = function() {
    8.         //JS里面的样式采取驼峰命名法比如fontSize、backgroundColor
    9.         this.style.backgroundColor = 'purple';
    10.         this.style.width = '300px';
    11.     }
    12. script>

    案例：淘宝点击关闭二维码

    核心思路：利用样式的显示和隐藏完成，display.none隐藏元素   display:block显示元素。点击按钮，就让这个二维码盒子隐起来即可。

    1. <style>
    2.     .box {
    3.         position: relative;
    4.         width: 74px;height: 88px;border: 1px solid #ccc;
    5.         margin: 100px auto;font-size: 14px;text-align: center;
    6.         color: #f40;display: block;
    7.     }
    8.     .box img {width: 60px;margin-top: 5px;}
    9.     .close-btn {
    10.         position: absolute;top: 1px;left: -20px;
    11.         width: 14px;height: 14px;border: 1px solid #ccc;
    12.         line-height: 14px;cursor: pointer;
    13.     }
    14. style>
    15. <body>
    16.     <div class="box">
    17.         淘宝二维码
    18.         <img src="images/logo.jpg" alt="">
    19.         <i class="close-btn">×i>
    20.     div>
    21.     <script>
    22.         var btn = document.querySelector('.close-btn');
    23.         var box = document.querySelector('.box');
    24.         btn.onclick = function() {
    25.             box.style.display = 'none';
    26.         }
    27.     script>
    28. body>

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

    首先表单需要2个新事件，获得焦点onfocus、失去焦点onblur。
    如果获得焦点，判断表单里面内容是否为默认文字，如果是默认文字，就清空表单内容。
    如果失去焦点，判断表单内容是否为空，如果为空，则表单内容改为默认文字。

    1. "text" value="手机">
    2. <script>
    3.     var text = document.querySelector('input');
    4.     text.onfocus = function() {
    5.         if(this.value === '手机') {
    6.             this.value = '';
    7.         }
    8.     }
    9.     text.onblur = function() {
    10.         if(this.value === '') {
    11.             this.value = '手机';
    12.         }
    13.     }
    14. script>

    使用className 修改样式属性

    适合于样式较多或者功能复杂的情况。className会覆盖原先的类名。 

    1. <style>
    2.     .change {width: 200px;height: 200px;background-color: pink;}
    3. style>
    4.  
    5. <div>文本div>
    6. <script>
    7. var test = document.querySelector('div');
    8.     test.onclick = function() {
    9.         this.className = 'change';
    10.     }
    11. script>

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

    用户如果离开密码框，里面输入个数如果不是6~16，则提示错误信息，否则提示输入正确信息。

    1. <style>
    2.     div {width: 600px;margin: 100px auto;}
    3.     .message {
    4.         display: inline-block;font-size: 12px;color: #999;
    5.         background: url(images/en.png) no-repeat left center ;
    6.         padding-left: 25px;
    7.     }
    8.     .wrong {
    9.         color: red;
    10.         background: url(images/no.png) no-repeat left center ;
    11.     }
    12.     .true {
    13.         color: green;
    14.         background: url(images/yes.png) no-repeat left center ;
    15.     }
    16. style>
    17.  
    18. <div>
    19.     <input type="password" class="ipt">
    20.     <p class="message">请输入6~16位密码p>
    21. div>
    22. <script>
    23.     var ipt = document.querySelector('.ipt');
    24.     var message = document.querySelector('.message');
    25.     ipt.onblur = function() {
    26.         if(this.value.length < 6 || this.value.length > 16) {
    27.             message.className = 'message wrong';
    28.             message.innerHTML = '您输入的位数不正确';
    29.         }else {
    30.             message.className = 'message true';
    31.             message.innerHTML = '输入正确';
    32.         }
    33.     }
    34. script>

    操作元素总结

    操作元素是DOM核心内容

    排他思想（算法）

    如果有同一组元素，我们想要某一个元素实现某种样式，需要用到循环的排他思想算法：

    1. 所有元素全部清除样式（干掉其他人）
    2. 给当前元素设置样式（留下我自己）
    1. <button>按钮1button>
    2. <button>按钮2button>
    3. <button>按钮3button>
    4. <button>按钮4button>
    5. <button>按钮5button>
    6. <script>
    7.     var btns = document.getElementsByTagName('button');
    8.     for(var i=0; ilength; i++) {
    9.         btns[i].onclick = function() {
    10.             //先清除所有按钮的背景色
    11.             for(var i=0; ilength; i++) {
    12.                 btns[i].style.backgroundColor = '';
    13.             }
    14.             this.style.backgroundColor = 'pink';
    15.         }
    16.     }
    17. script>

    案例：百度换肤

    给一组小图片利用循环注册点击事件，当我们点击图片，让页面背景改为当前的图片，核心算法：把当前图片的src路径取过来，给body做为背景即可。

    1. <style>
    2.     body {background: url(images/keli.jpg) no-repeat center top;}
    3.     .baidu {
    4.         overflow: hidden;margin: 100px auto;background-color: #fff;width: 410px;
    5.         padding-top: 3px;
    6.     }
    7.     .baidu li {float: left;margin: 0 auto;cursor: pointer;}
    8.     .baidu img {width: 100px;}
    9. style>
    10. <ul class="baidu">
    11.     <li><img src="images/keli.jpg" alt="">li>
    12.     <li><img src="images/keli1.jpg" alt="">li>
    13.     <li><img src="images/keli2.jpg" alt="">li>
    14.     <li><img src="images/yuanshen.jpg" alt="">li>
    15. ul>
    16. <script>
    17.     var imgs = document.querySelector('.baidu').querySelectorAll('img');
    18.     for(var i=0; ilength; i++) {
    19.         imgs[i].onclick = function() {
    20.             document.body.style.backgroundImage = 'url(' + this.src + ')';
    21.         }
    22.     }
    23. script>

    案例：表格隔行变色

    1. <style>
    2.    table {width: 800px;text-align: center;border-collapse: collapse;}
    3.    thead tr {height: 30px;background-color: skyblue;}
    4.    tbody td {border-bottom: 1px solid #000;color: blue;}
    5.    .bg {background-color: pink;}
    6. style>
    7.  
    8. <table>
    9.   <thead>
    10.     <tr><th>代码th><th>名称th><th>最新净值th>tr>
    11.   thead>
    12.   <tbody>
    13.     <tr><td>1td><td>3td><td>4td>tr>
    14.     <tr><td>1td><td>3td><td>4td>tr>
    15.   tbody>
    16. table>
    17. <script>
    18.    var trs = document.querySelector("tbody").querySelectorAll("tr");
    19.    for (var i = 0; i < trs.length; i++) {
    20.      trs[i].onmouseover = function () {
    21.        this.className = "bg";
    22.      };
    23.      trs[i].onmouseout = function () {
    24.        this.className = "";
    25.      };
    26.    }
    27. script>

    案例：表单全选取消全选案例

    1. <style>
    2.      div {border: 1px solid #ccc;width: 300px;}
    3.      thead {width: 300px;height: 30px;background-color: skyblue;}
    4.      thead tr td,
    5.      tbody tr td {width: 100px;text-align: center;}
    6. style>
    7. <div>
    8.   <table>
    9.     <thead id="h_th">
    10.       <tr><td><input type="checkbox" id="j_cbAll"/>td><td>型号td><td>价格td>tr>
    11.     thead>
    12.     <tbody id="j_tb">
    13.       <tr><td><input type="checkbox" />td><td>iphone12td><td>8000td>tr>
    14.       <tr><td><input type="checkbox" />td><td>iphone13td><td>9000td>tr>
    15.     tbody>
    16.   table>
    17. div>
    18. <script>
    19.     var j_cbAll = document.getElementById('j_cbAll');
    20.     var j_tbs = document.getElementById('j_tb').getElementsByTagName('input');
    21.     j_cbAll.onclick = function() {
    22.       for(var i=0; ilength; i++) {
    23.         j_tbs[i].checked = this.checked; 
    24.       }
    25.     }
    26.     for(var i=0; ilength; i++) {
    27.       j_tbs[i].onclick = function() {
    28.         var flag = true;
    29.         for(var i=0; ilength; i++) {
    30.           if(!j_tbs[i].checked) {
    31.             flag = false;
    32.             break;
    33.           }
    34.         }
    35.         j_cbAll.checked = flag;
    36.       }
    37.     }
    38. script>

    自定义属性的操作

    获取属性值

    设置属性值

    移除属性值

    案例：tab栏切换（重点！！！！！）

    1. <style>
    2.     * {padding: 0;margin: 0;}
    3.     .tab_list {
    4.         width: 310px;height: 30px;
    5.         border: 1px solid #ccc;
    6.         background-color: pink;
    7.     }
    8.     .tab_list ul li {
    9.         width: 100px;height: 30px;line-height: 30px;
    10.         text-align: center;display: inline-block;
    11.         cursor: pointer;
    12.     }
    13.     .tab_list .current {
    14.         background-color: #c81623;color: #fff;
    15.      }
    16.     .item {display: none;}
    17. style>
    18.  
    19. <div class="tab">
    20.    <div class="tab_list">
    21.        <ul>
    22.            <li class="current">商品介绍li>
    23.            <li>规格与包装li>
    24.            <li>售后保障li>
    25.        ul>
    26.    div>
    27.    <div class="tab_con">
    28.        <div class="item" style="display: block;">商品介绍模块内容div>
    29.        <div class="item">商品包装规格模块内容div>
    30.        <div class="item">商品售后模块内容div>
    31.    div>
    32. div>
    33. <script>
    34.     var tab_list = document.querySelector('.tab_list');
    35.     var lis = tab_list.querySelectorAll('li');
    36.     var items = document.querySelectorAll('.item');
    37.     for(var i=0; ilength; i++) {
    38.         lis[i].setAttribute('index', i)
    39.         lis[i].onclick = function() {
    40.             for(var i=0; ilength; i++) {
    41.                  lis[i].className = '';
    42.             }
    43.             this.className = 'current';
    44.             var index = this.getAttribute('index');
    45.             for(var i=0; ilength; i++) {
    46.                 items[i].style.display = 'none';    
    47.             }
    48.             items[index].style.display = 'block';
    49.         }
    50.     }
    51. script>

    H5自定义属性

    H5给我们新增了自定义属性：

  • 相关阅读:
    Nacos注册中心
    py5_重要的缩进以及初识 Python 函数
    java任务跟踪系统
    Unity技术手册-UGUI零基础详细教程-Button按钮
    Apache + svn 服务搭建
    力扣labuladong一刷day13天双指针8道链表题
    leetcode-693.交替位二进制数
    java计算机毕业设计飞羽羽毛球馆管理系统源码+mysql数据库+系统+lw文档+部署
    DataX数据同步实战案例
    前 3 名突然变了？揭秘 7 月编程语言最新排行榜
  • 原文地址：https://blog.csdn.net/weixin_50768118/article/details/127745350