web api 概述

标准库：ECMAScript中的对象和函数

Web Api：浏览器宿主环境中的对象和函数

  1. 知识繁杂
  2. 成体系的知识
  3. 程序思维：知识+程序思维 = 应用
  4. 兼容性：了解，不记忆

Web Api：

  • BOM：Browser Object Model，浏览器对象模型
  • DOM：Document Object Model，文档对象模型

BOM：控制浏览器本身

DOM：控制HTML文档

ES 由 ECMAScript 规定的

WebApi 由 W3C（万维网联盟） 制定

关于DOM

  • DOM 0
  • DOM 1
  • DOM 2
  • DOM 3
  • DOM 4 2015年

DOM是什么

DOM的核心理念，是将一个HTML或XML文档，用对象模型表示，每个对象称之为dom对象

dom对象又称之为节点Node

节点的类型：

  • DocumentType，文档类型节点
  • Document，文档节点，表示整个文档
  • Comment，注释节点
  • Element，元素节点
  • Text，文本节点
  • Attribute，属性节点
  • DocumentFragment，文档片段节点

dom树：文档中不同的节点形成的树形结构。

test.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <title>标题</title>
  7. </head>
  9. <body>
  10.     <!-- 注释 -->
  11.     <p>lorem</p>
  12. </body>
  14. </html>

js DOM（notes） - 图1

获取dom节点

获取dom对象

全局对象 window 中有属性document，代表的是整个文档节点

旧的获取元素节点的方式

dom 0

  • document.body：获取body元素节点
  • document.head：获取head元素节点
  • document.links：获取页面上所有的超链接元素节点，类数组

获取多个节点 返回的一般都是伪数组

  • document.anchors：获取页面上所有的锚链接(具有name属性)元素节点

最早的时候 锚链接并不是 id 而是 name

  • document.forms：获取页面中所有的form元素节点
  • document.documentElement: 获取根元素html

新的获取元素节点的方式

通过方法获取

  • document.getElementById：通过id获取对应id的元素
  • document.getElementsByTagName(链): 通过元素名称获取元素
  • document.getElementsByClassName(链)：通过元素的类样式获取元素，IE9以下无效
  • document.getElementsByName：通过元素的name属性值获取元素
  • document.querySelector(链)：通过CSS选择器获取元素，得到匹配的第一个，IE8以下无效
  • document.querySelectorAll(链)：通过CSS选择器获取元素，得到所有匹配的结果，IE8以下无效

细节：

  1. 在所有的得到类数组的方法中，除了querySelectorAll，其他的方法都是实时更新的。
  2. getElementById 得到元素执行效率最高。
  3. 书写了id的元素，会自动成为window对象的属性。它是一个实时的单对象。事实上的标准。不推荐使用。导致的主要问题: 1. 全局污染; 2. 实时单对象...被删除导致对象消失...无法获取数据
  4. getElementsByTagName、getElementsByClassName、querySelector、querySelectorAll，可以作为其他元素节点对象的方法使用==> 链式操作

根据节点关系获取节点

  • parentNode：获取父节点（元素、文档）==> 获取到的是元素节点 因为是父级 比较特殊... 下面其他的则不同 获取到的就不一定是元素节点了 文本 注释 啥的都有可能
  • previousSibling：获取上一个兄弟节点
  • nextSibling：获取下一个兄弟节点
  • childNodes：获取所有的子节点
  • firstChild：获取第一个子节点
  • lastChild：获取最后一个子节点
  • attributes: 获取某个元素的属性节点

获取元素节点这个才是咋们需要的 因为我们需要操作的一般都是dom元素 没事获取文本节点, 注释节点干啥..

  • parentElement：获取父元素
  • previousElementSibling：获取上一个兄弟元素IE9
  • nextElementSibling：获取下一个兄弟元素IE9
  • children：获取子元素
  • firstElementChild：获取第一个子元素IE9
  • lastElementChild：获取最后一个子元素IE9

js DOM（notes） - 图2

获取节点信息

  • nodeName：获取节点名称获取到的dom节点名称 是大写的字符串形式 如:'DIV'
  • nodeValue：获取节点的值
  • nodeType：节点类型，是一个数字

不要记

js DOM（notes） - 图3

test.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>旧的获取元素节点的方式</title>
  8. </head>
  10. <body>
  11.     <form action="">
  12.         <a href="">Lorem.</a>
  13.         <a href="">Beatae?</a>
  14.         <a href="">At.</a>
  15.         <a href="" name="abc">Inventore.</a>
  16.         <a href="">Facere.</a>
  17.         <a href="">Magnam.</a>
  18.         <a href="">Voluptate?</a>
  19.         <a href="">Consequatur.</a>
  20.         <a href="">Temporibus?</a>
  21.         <a href="">Quos!</a>
  22.     </form>
  24.     <form action="">
  25.         <ul>
  26.             <li><a href="">Lorem.</a></li>
  27.             <li><a href="">Suscipit.</a></li>
  28.             <li><a href="" name="bcd">Corrupti.</a></li>
  29.             <li><a href="">Ut!</a></li>
  30.             <li><a href="">Explicabo!</a></li>
  31.             <li><a href="">Dignissimos.</a></li>
  32.             <li><a href="">Quaerat!</a></li>
  33.             <li><a href="">Non?</a></li>
  34.             <li><a href="">Facilis?</a></li>
  35.             <li><a href="">Magnam!</a></li>
  36.         </ul>
  37.     </form>
  40.     <script>
  41.         // 旧的获取元素节点的方式 目前只有 ==> document.body 还有点用 别的基本没啥用
  42.         console.log(document.body) // ==> 获取body节点
  43.         console.log(document.head) // ==> 获取head节点
  44.         console.dir(document.head) // ==> dir ==> 打印对象结构 log 打印元素结构
  46.         console.log(document.links, Array.isArray(document.links)) // ==> 获取页面上所有的超链接元素节点，类数组
  47.         console.log(document.anchors) // ==> 获取页面上所有的锚链接(具有name属性)元素节点
  48.         console.log(document.forms) // ==> 获取页面中所有的form元素节点
  49.     </script>
  50. </body>
  52. </html>
  56. <!DOCTYPE html>
  57. <html lang="en">
  59. <head>
  60.     <meta charset="UTF-8">
  61.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  62.     <title>新的获取元素节点的方式</title>
  63. </head>
  65. <body>
  66.     <div name="n" id="score" class="abc">123</div>
  68.     <div id="mydiv2" class="abc">456</div>
  70.     <div name="n">asdfasdfasf</div>
  72.     <ul>
  73.         <li>
  74.             <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur reprehenderit nobis expedita
  75.                 quibusdam nulla sapiente amet nam iusto id neque in, laborum optio repellendus rerum quos est laboriosam
  76.                 tempore cum?</div>
  77.         </li>
  78.         <li>
  79.             <div>Quos, quibusdam nobis consectetur quis quae maxime ad culpa eligendi ut, nisi totam, assumenda magni
  80.                 adipisci fugiat rem beatae minima aliquam odio vitae earum deleniti! Consectetur perferendis distinctio
  81.                 reiciendis! Magnam!</div>
  82.         </li>
  83.         <li>
  84.             <div>Mollitia iure tempora rem nemo dignissimos necessitatibus, modi est harum amet cumque? Facere eaque
  85.                 provident excepturi, labore blanditiis voluptatibus cumque autem sed beatae atque eos tenetur, quasi,
  86.                 quidem rem vel?</div>
  87.         </li>
  88.         <li>
  89.             <div>Nisi consequatur eveniet ea? Nesciunt, laborum minima soluta quasi facilis eligendi aspernatur
  90.                 accusamus quod quidem corporis perferendis ut accusantium? Inventore quam enim sed non nulla aspernatur
  91.                 architecto maxime, sit vitae?</div>
  92.         </li>
  93.         <li>
  94.             <div>Natus, hic dolorum? Harum maiores, laudantium error quod quia laborum. Fugit reiciendis ipsum cumque
  95.                 placeat numquam asperiores optio harum quibusdam consequatur eveniet doloribus officiis eum earum alias,
  96.                 tenetur vero quis.</div>
  97.         </li>
  98.         <li>
  99.             <div>Eligendi a voluptates alias praesentium libero, necessitatibus deserunt quia est laudantium nihil, at
  100.                 dolorem consequatur esse molestiae totam tempore eos commodi. Tempore, non quo. Autem dignissimos
  101.                 deleniti velit non nulla!</div>
  102.         </li>
  103.         <li>
  104.             <div>Ex eveniet in iste esse? Distinctio ratione animi nemo quisquam molestias id similique dignissimos
  105.                 suscipit asperiores? Dignissimos, natus itaque, quod autem aut voluptatum, neque quisquam expedita odit
  106.                 enim laudantium esse.</div>
  107.         </li>
  108.         <li>
  109.             <div>Optio, natus aut. Quas eaque officia, esse facere architecto, quia ut laboriosam commodi exercitationem
  110.                 totam quis voluptas, accusamus dolorum illo. Alias at iste, est hic obcaecati reprehenderit veniam saepe
  111.                 veritatis.</div>
  112.         </li>
  113.         <li>
  114.             <div>Quos soluta provident nisi corporis mollitia harum distinctio laborum doloremque? Aperiam quam corrupti
  115.                 deserunt odit voluptates iusto nemo officiis dolor consequatur maxime molestiae minus in totam, quia
  116.                 quibusdam modi laudantium!</div>
  117.         </li>
  118.         <li>
  119.             <div>Veritatis, nisi. In nam, ratione incidunt aut minus quod eius placeat dicta hic! Eum laboriosam error
  120.                 molestiae provident sequi. Labore cumque deleniti corporis commodi quibusdam vero? Excepturi fugit culpa
  121.                 autem.</div>
  122.         </li>
  123.     </ul>
  124.     <script>
  125.         // document.getElementById ==> 通过id获取对应id的元素 ==> 细节: 1. 多个同id的节点 只选中第一个; 2. 找不到对应id的节点 则返回 null; 3. 兼容性很好
  126.         console.log(document.getElementById('mydiv2'))
  127.         // document.getElementsByTagName: 通过元素名称获取元素
  128.         console.log(document.getElementsByTagName('div')[0])
  129.         // document.getElementsByClassName ==> 通过元素的类样式获取元素 ==> 细节: 1. IE9以下无效(兼容性)
  130.         console.log(document.getElementsByClassName('abc'))
  131.         // document.getElementsByName ==> 通过元素的name属性值获取元素
  132.         console.log(document.getElementsByName('n'))
  133.         // document.querySelector ==> 通过CSS选择器获取元素 ==> 细节: 1. IE8以下无效(兼容性); 2. 得到匹配的第一个
  134.         console.log(document.querySelector("#mydiv2"))
  135.         console.log(document.getElementsByClassName('abc')[0] === document.querySelector(".abc")); // true
  136.         // document.querySelectorAll ==> 通过CSS选择器获取元素 ==> 细节: 1. IE8以下无效(兼容性); 2. 得到所有的匹配结果
  137.         console.log(document.querySelectorAll("ul li div")[0]);
  138.         // document.documentElement ==> 获取根元素
  141.         //  细节：
  142.         // 1. 在所有的得到类数组的方法中，除了querySelectorAll，其他的方法都是实时更新的。
  143.         // 2. getElementById 得到元素执行效率最高。
  144.         // 3. 书写了id的元素，会自动成为window对象的属性。它是一个实时的单对象。事实上的标准。不推荐使用。
  145.         // 4. getElementsByTagName、getElementsByClassName、querySelector、querySelectorAll，可以作为其他元素节点对象的方法使用
  146.     </script>
  147. </body>
  149. </html>
  153. <!DOCTYPE html>
  154. <html lang="en">
  156. <head>
  157.     <meta charset="UTF-8">
  158.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  159.     <title>根据节点关系获取节点</title>
  160. </head>
  162. <body>
  163.     <div class="container">
  164.         <ul class="list">
  165.             <li><a href="">Lorem ipsum dolor sit.</a></li>
  166.             <li>
  168.                 <!-- 注释 -->
  169.                 啊手动阀手动阀 <a href="https://www.baidu.com" title="阿三发射点发 撒旦发生">Laboriosam commodi quis at!</a>
  170.             </li>
  171.             <li><a href="">Placeat sit quae necessitatibus.</a></li>
  172.             <li><a href="">Rem ducimus adipisci impedit.</a></li>
  173.             <li><a href="">Facere corrupti qui consequatur?</a></li>
  174.             <li><a href="">Molestias rerum aperiam eveniet.</a></li>
  175.             <li><a href="">Quas assumenda quae cumque!</a></li>
  176.             <li><a href="">Unde quas exercitationem corrupti.</a></li>
  177.             <li><a href="">Necessitatibus nobis tempore dolorum.</a></li>
  178.             <li><a href="">Accusamus excepturi iusto corporis.</a></li>
  179.         </ul>
  180.     </div>
  182.     <script>
  183.         var a = document.querySelectorAll('.container .list li a')[1]
  184.         // parentNode ==> 获取父节点（元素、 文档） ==> 获取到的一般是元素
  185.         console.log(a);
  186.         console.log(a.parentNode); // a
  187.         console.log(a.parentNode.parentNode); // li
  188.         console.log(a.parentNode.parentNode.parentNode); // ul.list
  189.         console.log(a.parentNode.parentNode.parentNode.parentNode); // div.container
  190.         console.log(a.parentNode.parentNode.parentNode.parentNode.parentNode); // body
  191.         console.log(a.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode); // html
  192.         console.log(a.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode); // null
  193.         // previousSibling ==> 获取上一个兄弟节点
  194.         console.log(a.previousSibling); // TextNode
  195.         console.log(a.previousSibling.previousSibling); // CommentNode
  196.         console.log(a.previousSibling.previousSibling.previousSibling); // TextNode ==> 空白也算是文本节点
  197.         console.log(a.previousSibling.previousSibling.previousSibling.previousSibling); // null
  199.         console.log(document.documentElement.previousSibling); // DocumentType 文档类型节点
  200.         // nextSibling ==> 获取下一个兄弟节点
  201.         // childNodes ==> 获取所有的子节点
  202.         // firstChild ==> 获取第一个子节点
  203.         // lastChild ==> 获取最后一个子节点
  204.         // attributes ==> 获取某个元素的属性节点
  207.         /* 获取元素节点 */
  208.         // parentElement ==> 获取父元素
  209.         // previousElementSibling ==> 获取上一个兄弟元素
  210.         // nextElementSibling ==> 获取下一个兄弟元素
  211.         // children ==> 获取子元素
  212.         // firstElementChild ==> 获取第一个子元素
  213.         // lastElementChild ==> 获取最后一个子元素
  214.     </script>
  215. </body>
  217. </html>

[作业讲解]获取dom节点

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.     <title>Document</title>
  9. </head>
  11. <body>
  12.     <ul id="list1">
  13.         <li><a href="">Lorem ipsum dolor sit.</a></li>
  14.         <li><a href="">Doloremque fuga amet hic.</a></li>
  15.         <li><a href="">Officia incidunt veritatis provident?</a></li>
  16.         <li><a href="">Repellat eum exercitationem voluptatum?</a></li>
  17.         <li><a href="">Soluta repellendus nobis maiores.</a></li>
  18.         <li><a href="">Doloribus minima voluptas rerum!</a></li>
  19.         <li><a href="">Molestiae nulla doloremque dicta.</a></li>
  20.         <li><a href="">Molestiae at sequi corporis.</a></li>
  21.         <li><a href="">Atque perspiciatis quaerat quisquam!</a></li>
  22.         <li><a href="">Totam fugiat alias officiis?</a></li>
  23.     </ul>
  25.     <ul id="list2">
  26.         <li><a href="">Lorem ipsum dolor sit.</a></li>
  27.         <li><a href="">Ipsa quam neque repudiandae.</a></li>
  28.         <li><a href="">Tenetur accusantium illo quam!</a></li>
  29.         <li><a href="">Quibusdam odit repellendus non.</a></li>
  30.         <li><a href="">Placeat officia aut dolores!</a></li>
  31.         <li><a href="">Cum nostrum facere nemo.</a></li>
  32.         <li><a href="">Impedit nisi nobis quaerat!</a></li>
  33.         <li><a href="">Quis nemo tempore ullam.</a></li>
  34.         <li><a href="">Voluptate aliquid sed quod.</a></li>
  35.         <li><a href="">Nihil mollitia dolores quae!</a></li>
  36.     </ul>
  38.     <script>
  39.         // 准备两个数组，分别存放list1和list2中所有超链接的内容
  41.         var list1Links, list2Links;
  43.         // 得到某个元素下面的所有a元素的内容数组
  44.         function getLinkContents(dom) {
  45.             return Array.from(dom.getElementsByTagName("a")).map(function(a) {
  46.                 return a.firstChild.nodeValue;
  47.             })
  48.             // var arr = dom.getElementsByTagName("a"); //a元素数组
  49.             // var newArr = [];
  50.             // for (var i = 0; i < arr.length; i++) {
  51.             //     var a = arr[i];
  52.             //     newArr.push(a.firstChild.nodeValue);
  53.             // }
  54.             // return newArr;
  55.         }
  57.         list1Links = getLinkContents(document.getElementById("list1"))
  58.         console.log(list1Links);
  59.         list2Links = getLinkContents(document.getElementById("list2"))
  60.         console.log(list2Links);
  61.     </script>
  62. </body>
  64. </html>
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>Document</title>
  8. </head>
  9. <body>
  10.     <div class="container">
  11.         <ul>
  12.             <li><a href="">Lorem ipsum dolor sit.</a></li>
  13.             <li><a href="">Laboriosam esse voluptatibus accusamus!</a></li>
  14.             <li><a href="">Minima cumque alias numquam!</a></li>
  15.             <li><a href="">Beatae sit quod earum?</a></li>
  16.             <li><a href="">Doloremque vitae totam pariatur.</a></li>
  17.             <li><a href="">Autem ab iusto quae.</a></li>
  18.             <li><a href="">Mollitia accusamus iure maxime.</a></li>
  19.             <li><a href="">Sapiente vitae nostrum ex?</a></li>
  20.             <li><a href="">Aut quos est amet!</a></li>
  21.             <li><a href="">Laudantium dicta fuga debitis.</a></li>
  22.         </ul>
  23.     </div>
  25.     <div class="container2">
  26.         <span>asdfasfd</span>
  27.         <strong>asdfasdfgasdfa</strong>
  28.         <i>asadfasfas</i>
  29.         <p>aasdfdasf</p>
  30.         <div class="c3">
  31.             <p>dfgasdfasfaf</p>
  32.         </div>
  33.     </div>
  35.     <script>
  36.     // 写一个函数，传入一个dom对象，返回该对象的第一个div容器
  37.         function getDivContainer(dom) {
  38.             // var parent = dom.parentElement;
  39.             // while (parent && parent.nodeName !== "DIV") {
  40.             //     parent = parent.parentElement;
  41.             // }
  42.             // return parent;
  43.             for (var parent = dom.parentElement; parent && parent.nodeName !== "DIV"; parent = parent.parentElement) {}
  44.             // 注意 这里不能使用 let 因为其具有块级作用域
  45.             return parent;
  46.         }
  48.         var div = getDivContainer(test);
  49.         console.log(div);
  50.     </script>
  51. </body>
  52. </html>

dom元素操作

初识元素事件

元素事件：某个元素发生一件事 如: 被点击 click

事件处理程序：是一个函数，发生了一件事，应该做什么事情

注册(绑定)事件：将事件处理程序与某个事件关联

this关键字在事件处理程序中指代当前发生的事件元素

获取和设置元素属性

  • 通用方式：getAttribute、setAttribute

可识别属性

正常的HTML属性

  • dom对象.属性名推荐

细节：

  1. 正常的属性即使没有赋值，也有默认值
  2. 布尔属性在dom对象中，得到的是boolean如: checked= "checked"
  3. 某些表单元素可以获取到某些不存在的属性
  4. 某些属性与标识符冲突，此时，需要更换属性名

自定义属性

HTML5 建议自定义属性使用data-作为前缀

如果遵从HTML5 自定义属性规范，可以使用dom对象.dataset.属性名控制属性

删除自定义属性可识别的属性删不掉

  • removeAttribute(“属性名”);
  • delete dom.dataset.属性名

获取和设置元素内容

  • innerHTML：获取和设置元素的内部HTML文本
  • innerText：获取和设置元素内部的纯文本，仅得到元素内部显示出来的文本
  • textContent：获取和设置元素内部的纯文本，textContent得到的是内部源代码中的文本

元素结构重构

  • 父元素.appendChild(元素)：在某个元素末尾加入一个子元素
  • 父元素.insertBefore(待插入的元素, 哪个元素之前)
  • 父元素.replaceChild(替换的元素, 被替换的元素)

细节：

更改元素结构效率较低，尽量少用。

创建和删除元素

创建元素


document.createElement(“元素名”)：创建一个元素对象

  • document.createTextNode(“文本”)
  • document.createDocumentFragment(): 创建文档片段
  • … 还有注释呀啥的… 不过基本都不会用

dom.cloneNodes(是否深度克隆)：复制一个新的dom对象并返回

childNodes 也是实时集合

删除元素

  • removeChild：父元素调用，传入子元素
  • remove：把自己删除

test.html

  1. <!-- 事件.html ==> 认识 1. 元素事件 2. 事件处理程序 3. 注册(绑定)事件 -->
  2. <!DOCTYPE html>
  3. <html lang="en">
  5. <head>
  6.     <meta charset="UTF-8">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  9.     <title>事件.html</title>
  10. </head>
  12. <body>
  13.     <button id="btn">点我</button>
  14.     <script>
  15.         var btn = document.getElementById("btn");
  16.         var count = 0;
  17.         //注册事件
  18.         btn.onclick = function() {
  19.             console.log(count++);
  20.             console.log(this, this === btn);
  21.         }
  22.     </script>
  23. </body>
  25. </html>
  30. <!-- 属性.html ==> 认识可识别属性1 -->
  31. <!DOCTYPE html>
  32. <html lang="en">
  34. <head>
  35.     <meta charset="UTF-8">
  36.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  37.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  38.     <title>属性.html ==> 认识可识别属性</title>
  39. </head>
  41. <body>
  42.     <input type="text" value="abc123">
  43.     <button id="btnGetTxt">获取文本框内容</button>
  44.     <button id="btnSetTxt">设置文本框内容</button>
  45.     <script>
  46.         var input = document.querySelector("input[type=text]");
  47.         document.getElementById("btnGetTxt").onclick = function () {
  48.             // 获取文本框的值 ==> input元素中 value 是它的正常属性(可识别属性)
  49.             console.log(input.value, typeof input.value); // abc123 string
  50.         }
  52.         document.getElementById("btnSetTxt").onclick = function () {
  53.             input.value = "请输入文本";
  54.             console.log('设置后文本框内容为: ', input.value); // 设置后文本框内容为:  请输入文本
  55.         }
  56.     </script>
  57. </body>
  59. </html>
  63. <!-- 属性.html ==> 认识可识别属性2 -->
  64. <!DOCTYPE html>
  65. <html lang="en">
  67. <head>
  68.     <meta charset="UTF-8">
  69.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  70.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  71.     <title>属性.html</title>
  72.     <style>
  73.         img {
  74.             width: 300px;
  75.             height: 300px;
  76.             border: 2px solid;
  77.             object-fit: contain;
  78.             /*
  79.             object-fit CSS 属性指定可替换元素的内容应该如何适应到其使用的高度和宽度确定的框。
  80.             您可以通过使用 object-position 属性来切换被替换元素的内容对象在元素框内的对齐方式。 */
  81.             /* contain ==> 图片的 长-宽 比 保持不变 并尽可能的填满 */
  82.             display: block;
  83.         }
  84.     </style>
  85. </head>
  87. <body>
  88.     <img src="1.jpg" alt="">
  89.     </div>
  90.     <script>
  91.         // 点击图片切换
  92.         var i = 1; // 第几张图片
  93.         var img = document.querySelector("img");
  94.         img.onclick = function () {
  95.             i++;
  96.             if (i === 3) {
  97.                 i = 1;
  98.             }
  99.             img.src = i + ".jpg"; // img元素中 src 是它的正常属性(可识别属性)
  100.         }
  101.     </script>
  102. </body>
  104. </html>
  108. <!-- 属性.html ==> 细节 ==> 1. 正常的(可识别的)属性即使没有赋值 也有默认值 -->
  109. <!DOCTYPE html>
  110. <html lang="en">
  112. <head>
  113.     <meta charset="UTF-8">
  114.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  115.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  116.     <title>属性.html ==> 正常的(可识别的)属性即使没有复制 也有默认值</title>
  117. </head>
  119. <body>
  120.     <input type="text">
  121.     <button id="btnGetTxt">获取文本框内容</button>
  122.     <button id="btnSetTxt">设置文本框内容</button>
  123.     <script>
  124.         var input = document.querySelector("input[type=text]");
  125.         document.getElementById("btnGetTxt").onclick = function () {
  126.             // 获取文本框的值 ==> input元素中 value 是它的正常属性(可识别属性)
  127.             // 此时没有给 value 属性赋值 但是由于它是正常的属性 所以依旧能获取到它的值 ==> 空字符串 ==> ""
  128.             // 所以对于可识别的属性而言 即便一开始没有给它赋值 再后续读取它的值时 也不会报错 而是读到它的默认值
  129.             console.log(input.value, typeof input.value); // "" string
  130.         }
  132.         document.getElementById("btnSetTxt").onclick = function () {
  133.             input.value = "请输入文本";
  134.             // 对于可识别的属性而言 即便一开始在写元素的时候 没写上该属性(value)
  135.             // 后续再对其进行赋值时 依旧不会有影响 不会报错
  136.             // 通过js对该属性进行赋值 依旧有效 ==> 见: 页面上的输入框
  137.             console.log('设置后文本框内容为: ', input.value); // 设置后文本框内容为:  请输入文本
  138.         }
  139.     </script>
  140. </body>
  142. </html>
  147. <!-- 属性.html ==> 细节 ==> 2. 布尔属性在dom对象中, 得到的是 boolean 值 -->
  148. <!DOCTYPE html>
  149. <html lang="en">
  151. <head>
  152.     <meta charset="UTF-8">
  153.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  154.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  155.     <title>属性.html ==> 布尔属性在dom对象中, 得到的是 boolean 值</title>
  156. </head>
  158. <body>
  159.     <input type="checkbox" checked="checked">
  161.     <button id="btnGetTxt">yes</button>
  162.     <button id="btnSetTxt">no</button>
  163.     <script>
  164.         var input = document.querySelector("input[type=checkbox]");
  165.         document.getElementById("btnGetTxt").onclick = function () {
  166.             input.checked = true; // 也可以直接写成 input.checked = 'checked' 赋值符号右边的值先会隐式的转换为 boolean值之后再进行赋值 所以写个 1 也ok
  167.             // 获取复选框的值 ==> input[type=checkbox]元素中 value checked 是它的正常属性(可识别属性)
  168.             // 而且 checked 是一个布尔属性 ==> 布尔属性就两种写法: 1. 不写属性值 ==> checked 2. 写属性值则只能写一个值,也就是字符串形式的属性名 checked="checked"
  169.             // 如果一个可识别属性 是一个布尔属性 那么 get 到的将会是一个 Boolean 类型的值
  170.             console.log(input.checked, typeof input.checked);
  171.         }
  173.         document.getElementById("btnSetTxt").onclick = function () {
  174.             input.checked = false;
  175.             console.log(input.checked, typeof input.checked);
  176.         }
  177.     </script>
  178. </body>
  180. </html>
  184. <!-- 属性.html ==> 细节 ==> 3. 某些表单元素可以获取到某些不存在的属性
  185. 下拉列表的读写操作 -->
  186. <!DOCTYPE html>
  187. <html lang="en">
  189. <head>
  190.     <meta charset="UTF-8">
  191.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  192.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  193.     <title>属性.html</title>
  194. </head>
  196. <body>
  197.     <select class="sel">
  198.         <option value="chengdu">成都</option>
  199.         <option value="beijing">北京</option>
  200.         <option value="haerbin">哈尔滨</option>
  201.     </select>
  202.     <button class="btn1">成都</button>
  203.     <button class="btn2">北京</button>
  204.     <button class="btn3">哈尔滨</button>
  205.     <button class="getValue">get</button>
  206.     <button class="getNodeValue">getNodeValue</button>
  207.     <script>
  208.         var oSel = document.querySelector("select.sel")
  209.         var Obtn1 = document.querySelector('button.btn1')
  210.         var Obtn2 = document.querySelector('button.btn2')
  211.         var Obtn3 = document.querySelector('button.btn3')
  212.         var getValueBtn = document.querySelector('button.getValue')
  213.         var getNodeValueBtn = document.querySelector('button.getNodeValue')
  215.         // 注意 js 操作下拉列表 操作的是 option 元素中的 value 属性 而不是 nodeValue
  216.         Obtn1.onclick = function () {
  217.             oSel.value = 'chengdu'
  218.         }
  219.         Obtn2.onclick = function () {
  220.             oSel.value = 'beijing'
  221.         }
  222.         Obtn3.onclick = function () {
  223.             oSel.value = 'haerbin'
  224.         }
  227.         // 读取下拉列表中当前选中的值
  228.         getValueBtn.onclick = function () {
  229.             // select 元素 自身不带value属性 ==> 判断某个属性是否是自身带有 ==> 可以利用在该元素身上输入属性 看是否有智能提示
  230.             // 但是由于某些表单元素(如 select)可以获取到某些不存在的属性
  231.             // 也就是说 select元素 比较特殊 虽然自身不带有 value 属性 但是通过它来读取属性值很方便 所以...
  232.             // 所以 可以通过该属性来读取相应的 option 元素的 value 属性值
  233.             console.log(oSel.value)
  234.         }
  237.         // 尝试获取 当前 option 下的 nodeValue
  238.         getNodeValueBtn.onclick = function () {
  239.             var opts = oSel.querySelectorAll('option')
  240.             for (var i = 0; i < opts.length; i++) {
  241.                 var item = opts[i]
  242.                 if (item.selected) {
  243.                     // item.firstChild ==> TextNode
  244.                     console.log(item.firstChild.nodeValue)
  245.                 }
  246.             }
  247.         }
  248.     </script>
  249. </body>
  251. </html>
  255. <!-- 属性.html ==> 细节 ==> 3. 某些表单元素可以获取到某些不存在的属性
  256. 读多行文本框的内容 -->
  257. <!DOCTYPE html>
  258. <html lang="en">
  260. <head>
  261.     <meta charset="UTF-8">
  262.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  263.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  264.     <title>属性.html</title>
  265. </head>
  267. <body>
  268.     <button id="btnGetTxt">获取文本框内容</button>
  269.     <button id="btnSetTxt">设置文本框内容</button>
  270.     <p>
  271.         <textarea>哈哈哈哈哈哈哈</textarea>
  272.     </p>
  274.     </div>
  275.     <script>
  276.         var txt = document.querySelector("textarea");
  277.         document.getElementById("btnGetTxt").onclick = function () {
  278.             // 获取多行文本框的值 ==> textarea元素也一样 自身不带有 value 属性
  279.             // 但是可以通过 value 来实现读写操作
  280.             console.log(txt.value, typeof txt.value);
  281.         }
  283.         document.getElementById("btnSetTxt").onclick = function () {
  284.             txt.value = "请输入文本";
  285.         }
  286.     </script>
  287. </body>
  289. </html>
  295. <!-- 属性.html ==> 某些属性与标识符冲突, 此时, 需要更换属性名 ==> 这样的属性并不多 下面先来认识俩
  296. 1. for ==> htmlFor -->
  297. <!DOCTYPE html>
  298. <html lang="en">
  300. <head>
  301.     <meta charset="UTF-8">
  302.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  303.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  304.     <title>属性.html</title>
  305. </head>
  307. <body>
  308.     <input id="cbgender" type="checkbox" checked="checked">
  309.     <label for="cbgender">男</label>
  310.     <button id="btnGetTxt">获取复选框的值</button>
  311.     <button id="btnSetTxtYes">yes</button>
  312.     <button id="btnSetTxtNo">no</button>
  313.     <script>
  314.         var input = document.querySelector("input[type=checkbox]");
  315.         document.getElementById("btnGetTxt").onclick = function () {
  316.             console.log(input.checked, typeof input.checked);
  317.         }
  319.         document.getElementById("btnSetTxtYes").onclick = function () {
  320.             input.checked = true;
  321.         }
  323.         document.getElementById("btnSetTxtNo").onclick = function () {
  324.             input.checked = false;
  325.         }
  327.         var lbl = document.querySelector("label")
  328.         // 读取label的for属性值
  329.         // 错误写法: lbl.for 正确写法: lbl.htmlFor
  330.         // 因为for这个属性名和关键字重复了 所以不能直接使用for属性名带读
  331.         // 其他的情况 ==> 无法直接用属性名来读取 ==> 除了和关键字重复 这个原因 还有可能是 这个属性名是将来要使用的保留字
  332.         console.log(lbl.for) // undefined
  333.         console.log(lbl.htmlFor) // cbgender
  334.     </script>
  335. </body>
  337. </html>
  340. <!-- 属性.html ==> 某些属性与标识符冲突, 此时, 需要更换属性名
  341. 2. class ==> className -->
  342. <!DOCTYPE html>
  343. <html lang="en">
  345. <head>
  346.     <meta charset="UTF-8">
  347.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  348.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  349.     <title>属性.html</title>
  350.     <style>
  351.         div {
  352.             height: 100px;
  353.             width: 100px;
  354.         }
  356.         .red {
  357.             background: red;
  358.         }
  360.         .blue {
  361.             background: blue;
  362.         }
  363.     </style>
  364. </head>
  366. <body>
  367.     <div class="red"></div>
  368.     <button id="btnGetClassName">读取方块class属性值</button>
  369.     <button id="btnSetClassName1">设置方块class属性值 ==> blue</button>
  370.     <button id="btnSetClassName2">设置方块class属性值 ==> red</button>
  371.     <script>
  372.         var oDiv = document.querySelector(".red");
  373.         document.getElementById("btnGetClassName").onclick = function () {
  374.             // 读取dom元素的class属性 不能直接通过属性名来读取
  375.             // class ==> className
  376.             console.log(oDiv.className, typeof oDiv.className);
  377.         }
  378.         document.getElementById("btnSetClassName1").onclick = function () {
  379.             oDiv.className = 'blue'
  380.         }
  381.         document.getElementById("btnSetClassName2").onclick = function () {
  382.             oDiv.className = 'red'
  383.         }
  385.     </script>
  386. </body>
  388. </html>
  393. <!-- 获取和设置元素属性 ==> 通用方式 ==> dom.getAttribute('attr') dom.setAttribute('attr','newVlaue')
  394.     对于正常的(可识别的)属性 不要使用通用方式来进行读写操作...
  395. 因为这里面有很多细节... 比如
  396. 1. input.setAttribute('value', 'abc') ==> 打开控制台 看Element选项卡下找到对应的input元素 会发现对应的value值已经被修改了 但是页面上并没有刷新过来...
  397. 2. input.getAttribute('value') ==> 要求input元素上必须手动写上value属性 否则即便value属性是有值的 也无法get到
  398. 3. 假设 input 此时是一个复选框
  399. input.getAttribute('checked') ==> 得到的是写在该元素上的checked属性上的值 而不是一个boolean
  400. ...
  401. 小结: 这里的细节特多. 不过不需要记 只要注意不要使用这两种通用方法来读写可识别属性即可
  402. 可识别属性 ==> 直接 ==> dom.attr ==> 实现读写操作
  404. 但是 通用方式 ==> dom.getAttribute('attr') dom.setAttribute('attr','newVlaue')
  405. 也并不是一无是处 ==> 对于非正常的(可识别的)属性而言 ==> 也就是自定义属性 ==> 通用方式还是很有效的
  406. 因为自定义属性 一般都是手动写到元素上的 这样正好可以直接通过 dom.getAttribute('attr') 来读取属性值
  407.  -->
  410. <!-- 内容.html ==> dom.innerHTML ==> 获取和设置元素的内部HTML文本
  411.     1. 获取到的是对应dom下面的全部节点 包括 TextNode ElementNode 等...
  412.     2. dom.innerHTML可读可写 -->
  413. <!DOCTYPE html>
  414. <html lang="en">
  415. <head>
  416.     <meta charset="UTF-8">
  417.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  418.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  419.     <title>Document</title>
  420.     <style>
  421.         .div1{
  422.             width:300px;
  423.             height: 300px;
  424.             border: 2px solid;
  425.         }
  426.     </style>
  427. </head>
  428. <body>
  429.     <div class="div1">123abc</div>
  430.     <button class="btnAdd">添加内容</button>
  432.     <script>
  433.         var div1 = document.querySelector(".div1");
  434.         console.log(div1.innerHTML === div1.firstChild.nodeValue) // true
  435.         // 注意: 之前在写作业的时候 用的写法 ==> firstChild.nodeValue 基本在实际开发中 不会这么使用的
  436.         document.querySelector(".btnAdd").onclick = function(){
  437.             div1.innerHTML += `<span style="color: red;">添加了一个span标签 并带有红色样式</span>`
  438.         }
  439.     </script>
  440. </body>
  441. </html>
  446. <!-- 内容.html
  447.     1. dom.innerText ==> 获取和设置元素内部的纯文本, 仅得到元素内部显示出来的文本
  448.     2. dom.textContent ==> 获取和设置元素内部的纯文本, 得到的是内容源代码中的文本
  449.     小结 ==> 了解即可 一般不会使用到 使用到最多的也就是 innerHTML
  450. -->
  451. <!DOCTYPE html>
  452. <html lang="en">
  453. <head>
  454.     <meta charset="UTF-8">
  455.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  456.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  457.     <title>Document</title>
  458.     <style>
  459.         .div1{
  460.             width:300px;
  461.             height: 300px;
  462.             border: 2px solid;
  463.         }
  464.     </style>
  465. </head>
  466. <body>
  467.     <div class="div1">
  468.         <p>
  469.             Lorem ipsum dolor sit.
  470.         </p>
  471.         <style>
  472.             .div1{
  473.                 color: black;
  474.             }
  475.         </style>
  476.         <p style="display: none">
  477.             哈哈哈哈哈哈哈
  478.         </p>
  479.         <img src="1.jpg" alt="">
  480.     </div>
  482.     <script>
  483.         var div1 = document.querySelector(".div1");
  484.         console.log(div1.innerText); // Lorem ipsum dolor sit.
  485.         console.log(div1.textContent);
  486. /*
  489.             Lorem ipsum dolor sit.
  492.             .div1{
  493.                 color: black;
  494.             }
  497.             哈哈哈哈哈哈哈
  501. */
  502.     </script>
  503. </body>
  504. </html>
  512. <!-- 想起了一件事.html ==> 在页面上编辑样式 -->
  513. <!DOCTYPE html>
  514. <html lang="en">
  516. <head>
  517.     <meta charset="UTF-8">
  518.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  519.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  520.     <title>想起了一件事</title>
  521. </head>
  523. <body>
  524.     <style contenteditable="true" style="display: block; white-space: pre;">
  525.         /* 写在body内的style元素 在浏览器中有一个默认样式 ==> display: none; */
  526.         .container {
  527.             color: red;
  528.         }
  530.         .container a {
  531.             color: inherit;
  532.             /* 浏览器样式表中 有给a添加样式 */
  533.         }
  534.     </style>
  535.     <div class="container">
  536.         <ul>
  537.             <li><a href="">Lorem.</a></li>
  538.             <li><a href="">Aliquam.</a></li>
  539.             <li><a href="">Sed.</a></li>
  540.             <li><a href="">Maiores!</a></li>
  541.             <li><a href="">Reprehenderit.</a></li>
  542.             <li><a href="">Vel.</a></li>
  543.             <li><a href="">Culpa?</a></li>
  544.             <li><a href="">Voluptate?</a></li>
  545.             <li><a href="">Quis!</a></li>
  546.             <li><a href="">Eaque!</a></li>
  547.         </ul>
  548.     </div>
  549. </body>
  551. </html>
  556. <!-- 元素结构1.html ==> 父元素.appendChild(dom) ==> 将dom添加到父元素的末尾
  557. 也可以直接用 append ==> 而且用append可以一次添加多个 而 appendChild 一次只能添加一个
  558. 但是 append 这还不是一个标准 尽力少用 -->
  559. <!DOCTYPE html>
  560. <html lang="en">
  562. <head>
  563.     <meta charset="UTF-8">
  564.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  565.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  566.     <title>append 和 appendChild</title>
  567.     <style>
  568.         .red {
  569.             color: red;
  570.         }
  571.     </style>
  572. </head>
  574. <body>
  575.     <ul id="ul1">
  576.         <li>选项1-1</li>
  577.         <li>选项1-2</li>
  578.         <li>选项1-3</li>
  579.         <li data-1-abc-1="123" class="red">选项1-4</li>
  580.         <li>选项1-5</li>
  581.     </ul>
  582.     <ul id="ul2">
  583.         <li>选项2-1</li>
  584.         <li>选项2-2</li>
  585.         <li>选项2-3</li>
  586.         <li>选项2-4</li>
  587.         <li>选项2-5</li>
  588.     </ul>
  589.     <script>
  590.         // 将 1-4 插入到 2-5 之后
  591.         var li = ul1.getElementsByTagName('li')[3]
  592.         ul2.appendChild(li)
  593.     </script>
  594. </body>
  596. </html>
  600. <!-- 元素结构1.html ==> 父元素.insertBefore(待插入的元素, 哪个元素之前) -->
  601. <!DOCTYPE html>
  602. <html lang="en">
  604. <head>
  605.     <meta charset="UTF-8">
  606.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  607.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  608.     <title>Document</title>
  609.     <style>
  610.         .red {
  611.             color: red;
  612.         }
  613.     </style>
  614. </head>
  616. <body>
  617.     <ul id="ul1">
  618.         <li>选项1-1</li>
  619.         <li>选项1-2</li>
  620.         <li>选项1-3</li>
  621.         <li data-1-abc-1="123" class="red">选项1-4</li>
  622.         <li>选项1-5</li>
  623.     </ul>
  624.     <ul id="ul2">
  625.         <li>选项2-1</li>
  626.         <li>选项2-2</li>
  627.         <li>选项2-3</li>
  628.         <li>选项2-4</li>
  629.         <li>选项2-5</li>
  630.     </ul>
  631.     <script>
  632.         var li1_4 = ul1.getElementsByTagName('li')[3]
  633.         var li2_2 = ul2.getElementsByTagName('li')[1]
  635.         ul2.insertBefore(li1_4, li2_2) // 将 1-4 插入到 2-2 之前
  636.         ul2.insertBefore(li1_4, li2_2.nextElementSibling) // 将 1-4 插入到 2-2 之前
  637.         // ==> bug 如果2-2是最后一项咋办 ==> 实际上这个bug并不存在
  638.         // 因为如果 li2_2 是最后一项 那么 li2_2.nextElementSibling ==> null ==> 也就是说第二个参数是 null
  639.         // 第二个参数若为 null , 那么 insertBefore(参数1, null) 会将 参数1 也就是需要插入的节点 直接插入到父元素的最后
  640.     </script>
  641. </body>
  643. </html>
  648. <!-- 元素结构1.html ==> 父元素.replaceChild(替换的元素, 被替换的元素) -->
  649. <!DOCTYPE html>
  650. <html lang="en">
  652. <head>
  653.     <meta charset="UTF-8">
  654.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  655.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  656.     <title>Document</title>
  657.     <style>
  658.         .red {
  659.             color: red;
  660.         }
  661.     </style>
  662. </head>
  664. <body>
  665.     <ul id="ul1">
  666.         <li>选项1-1</li>
  667.         <li>选项1-2</li>
  668.         <li>选项1-3</li>
  669.         <li data-1-abc-1="123" class="red">选项1-4</li>
  670.         <li>选项1-5</li>
  671.     </ul>
  672.     <ul id="ul2">
  673.         <li>选项2-1</li>
  674.         <li>选项2-2</li>
  675.         <li>选项2-3</li>
  676.         <li>选项2-4</li>
  677.         <li>选项2-5</li>
  678.     </ul>
  679.     <script>
  680.         var li1_4 = ul1.getElementsByTagName('li')[3]
  681.         var li2_2 = ul2.getElementsByTagName('li')[1]
  683.         ul2.replaceChild(li1_4, li2_2) // 用 1-4 替换 2-2
  684.     </script>
  685. </body>
  687. </html>
  690. <!-- 元素结构重构 ==> 效率较低 ==> 尽量少用 -->
  693. <!-- 创建元素.html
  694.     1. document.createElement("元素名") ==> 创建一个元素对象
  695.     2. document.createTextNode("文本") ==> 创建一个文本节点对象 ==> 很少用
  696.     3. document.createDocumentFragment() ==> 创建文档片段 ==> 很少用 -->
  697. <!DOCTYPE html>
  698. <html lang="en">
  700. <head>
  701.     <meta charset="UTF-8">
  702.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  703.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  704.     <title></title>
  705. </head>
  707. <body>
  708.     <ul id="ul1">
  709.         <li>Lorem, ipsum.</li>
  710.         <li>Quas, vero.</li>
  711.         <li>Laborum, totam.</li>
  712.         <li>Fugit, a.</li>
  713.         <li>Beatae, ipsum.</li>
  714.         <li>Odit, quas.</li>
  715.         <li>Sunt, unde.</li>
  716.         <li>Soluta, in!</li>
  717.         <li>Blanditiis, repellat!</li>
  718.         <li>Eius, iusto.</li>
  719.     </ul>
  721.     <script>
  722.         var ul = document.getElementById("ul1");
  723.         var newLi = document.createElement('li')
  724.         newLi.innerHTML = '<span style="color: red">程序创建的li</span>'
  725.         // 上述代码创建了一个 dom 元素 ==> li ==> 与页面中的li唯一不同的就是它此时还位于内存中
  726.         // 需要通过下面这行代码将其添加到页面中 页面上才会显示这个li
  727.         ul.appendChild(newLi)
  729.         newLi.appendChild(document.createTextNode("abc"))
  730.     </script>
  731. </body>
  733. </html>
  736. <!-- 创建元素.html ==> 3. document.createDocumentFragment() ==> 创建文档片段 ==> 很少用 -->
  737. <!DOCTYPE html>
  738. <html lang="en">
  740. <head>
  741.     <meta charset="UTF-8">
  742.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  743.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  744.     <title>Document</title>
  745. </head>
  747. <body>
  748.     <ul id="ul1">
  749.         <li>Lorem, ipsum.</li>
  750.         <li>Quas, vero.</li>
  751.         <li>Laborum, totam.</li>
  752.         <li>Fugit, a.</li>
  753.         <li>Beatae, ipsum.</li>
  754.         <li>Odit, quas.</li>
  755.         <li>Sunt, unde.</li>
  756.         <li>Soluta, in!</li>
  757.         <li>Blanditiis, repellat!</li>
  758.         <li>Eius, iusto.</li>
  759.     </ul>
  761.     <script>
  762.         var ul = document.getElementById("ul1");
  763.         for (var i = 1; i <= 100; i++) {
  764.             var li = document.createElement("li");
  765.             li.innerText = "选项" + i;
  766.             ul.appendChild(li);
  767.         }
  768.         // 这种做法 ==> 页面重构了 100次 ==> 也就是页面重新渲染了 100次
  771.         // 更好的做法 ==> 先将100项装到一个容器(文档片段)中 ==> 然后一次性加入到页面中
  772.         // 文档片段可以理解为一个没有名儿的 div ...
  773.         var ul = document.getElementById("ul1");
  774.         var frag = document.createDocumentFragment();
  775.         for (var i = 1; i <= 100; i++) {
  776.             var li = document.createElement("li");
  777.             li.innerText = "选项" + i;
  778.             frag.appendChild(li);
  779.         }
  781.         ul.appendChild(frag);
  782.     </script>
  783. </body>
  785. </html>
  789. <!-- 创建元素.html ==> dom.cloneNode(是否深度克隆) ==> 复制一个新的dom对象并返回
  790. 注意: childNodes 也是一个实时集合 -->
  791. <!DOCTYPE html>
  792. <html lang="en">
  794. <head>
  795.     <meta charset="UTF-8">
  796.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  797.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  798.     <title>Document</title>
  799.     <style>
  800.         .red {
  801.             color: red;
  802.         }
  803.     </style>
  804. </head>
  806. <body>
  807.     <ul id="ul1">
  808.         <li>选项1-1</li>
  809.         <li>选项1-2</li>
  810.         <li>选项1-3</li>
  811.         <li data-1-abc-1="123" class="red">选项1-4</li>
  812.         <li>选项1-5</li>
  813.     </ul>
  814.     <ul id="ul2">
  815.         <li>选项2-1</li>
  816.         <li>选项2-2</li>
  817.         <li>选项2-3</li>
  818.         <li>选项2-4</li>
  819.         <li>选项2-5</li>
  820.     </ul>
  821.     <script>
  822.         // 需求: 将 1-4插入到2-5后面 要求原来的 1-4 不被删除 依旧存在
  823.         // "笨"办法 ==> 在内存中创建一个li元素 然后将其赋值为 1-4 并将这个新创建的li插入即可
  824.         // var li1_4 = ul1.getElementsByTagName('li')[3]
  825.         // var newLi = document.createElement('li')
  826.         // newLi.innerHTML = li1_4.innerHTML
  827.         // ul2.appendChild(newLi)
  828.         // bug ==> 1-4 自身设置的 属性 还需要手动转过去..
  831.         // "新"办法 ==>
  832.         var li1_4 = ul1.getElementsByTagName('li')[3]
  833.         var newLi1 = li1_4.cloneNode(true) // true ==> 深克隆
  834.         console.log(newLi1, li1_4 === newLi1); // <li data-1-abc-1="123" class="red">选项1-4</li>  false
  835.         var newLi2 = li1_4.cloneNode(false) // false ==> 浅克隆 (内部的东西全部忽略)
  836.         console.log(newLi2); // <li data-1-abc-1="123" class="red"></li>
  837.         ul2.appendChild(newLi1)
  838.         ul2.appendChild(newLi2)
  840.     </script>
  841. </body>
  843. </html>
  846. <!-- 删除元素 ==> removeChild 谋杀 ==> 父元素.removeChild(dom) -->
  847. <!DOCTYPE html>
  848. <html lang="en">
  850. <head>
  851.     <meta charset="UTF-8">
  852.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  853.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  854.     <title>Document</title>
  855.     <style>
  856.         .red {
  857.             color: red;
  858.         }
  859.     </style>
  860. </head>
  862. <body>
  863.     <ul id="ul1">
  864.         <li>选项1-1</li>
  865.         <li>选项1-2</li>
  866.         <li>选项1-3</li>
  867.         <li data-1-abc-1="123" class="red">选项1-4</li>
  868.         <li>选项1-5</li>
  869.     </ul>
  870.     <ul id="ul2">
  871.         <li>选项2-1</li>
  872.         <li>选项2-2</li>
  873.         <li>选项2-3</li>
  874.         <li>选项2-4</li>
  875.         <li>选项2-5</li>
  876.     </ul>
  877.     <script>
  878.         // 需求: 将 1-4 从页面中删除
  879.         // 1. 谋杀
  880.         var li1_4 = ul1.getElementsByTagName('li')[3]
  881.         var remLi1 = ul1.removeChild(li1_4) // 返回值是被删除的元素
  882.         console.log(remLi1, li1_4) // <li data-1-abc-1="123" class="red">选项1-4</li> <li data-1-abc-1="123" class="red">选项1-4</li>
  883.         console.log(remLi1 === li1_4) // true 被删除的元素只是在页面上无法显示了 在内存中占的实际空间还是依旧的 所以说在合适的时候 完全可以再添加回去
  885.         // 2. 自杀
  886.         var li2_1 = ul2.getElementsByTagName('li')[0]
  887.         var remLi2 = li2_1.remove() // 返回值是 undefined
  888.         console.log(remLi2, li2_1) // undefined <li>选项2-1</li>
  889.         console.log(remLi2 === li2_1) /// false
  890.     </script>
  891. </body>
  893. </html>
  897. <!-- 删除自定义属性
  898. 1. removeAttribute("属性名")
  899. 2. delete dom.dataset.属性名 -->
  900. <!DOCTYPE html>
  901. <html lang="en">
  903. <head>
  904.     <meta charset="UTF-8">
  905.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  906.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  907.     <title>Document</title>
  908.     <style>
  909.         .red {
  910.             color: red;
  911.         }
  912.     </style>
  913. </head>
  915. <body>
  916.     <ul id="ul1">
  917.         <li>选项1-1</li>
  918.         <li>选项1-2</li>
  919.         <li>选项1-3</li>
  920.         <li data-1-abc-1="123" class="red">选项1-4</li>
  921.         <li>选项1-5</li>
  922.     </ul>
  923.     <ul id="ul2">
  924.         <li data-bcd>选项2-1</li>
  925.         <li>选项2-2</li>
  926.         <li>选项2-3</li>
  927.         <li>选项2-4</li>
  928.         <li>选项2-5</li>
  929.     </ul>
  930.     <script>
  931.         // 需求1: 删除 1-4 的自定义属性
  932.         var li1_4 = ul1.getElementsByTagName('li')[3]
  933.         // 1. removeAttribute("属性名")
  934.         // li1_4.removeAttribute("data-1-abc-1")
  937.         // 2. delete dom.dataset.属性名
  938.         // console.log(li1_4.dataset) // 先打印出来 展开看一下 需要删除的属性长啥样..
  939.         // delete li1_4.dataset["1Abc-1"] // 此时不能用 .属性名 的形式来获取属性 而需要通过对象字面量的形式来获取
  941.         // 细节 1. 若自定义属性 写在了元素身上 但是没有对其进行赋值 那么get到的是一个空字符串 如: li2_1.dataset.bcd 若get的属性没有写在元素身上 那么get到的将会是一个 undefined
  942.         // 这就类似于从一个空对象中读取一个不存在的属性
  943.         // var obj = {} ==> obj.bcd ==> undefined
  944.     </script>
  945. </body>
  947. </html>

[作业讲解]dom元素操作

test.html

<!-- 作业1 ==> 删除列表.html -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>删除列表</title>
    <style>
        .container {
            width: 400px;
            margin: 0 auto;
        }

        .container li {
            margin: 20px 0;
        }

        .container button {
            margin-left: 10px;
        }
    </style>
</head>

<body>
    <div class="container">
        <p>
            <button id="btnClear">清空</button>
        </p>
        <ul class="list">
            <li>项目1<button>删除1</button></li>
            <li>项目2<button>删除2</button></li>
            <li>项目3<button>删除3</button></li>
            <li>项目4<button>删除4</button></li>
            <li>项目5<button>删除5</button></li>
            <li>项目6<button>删除6</button></li>
            <li>项目7<button>删除7</button></li>
            <li>项目8<button>删除8</button></li>
            <li>项目9<button>删除9</button></li>
            <li>项目10<button>删除10</button></li>
        </ul>
    </div>
    <script>
        var ul = document.querySelector(".list")
        var btnClear = document.querySelector("#btnClear")
        btnClear.onclick = function () {
            ul.innerHTML = ''
        }

        // 得到 ul 下的所有按钮
        var btns = ul.querySelectorAll('button')

        // 给按钮绑定事件处理函数
        // 写法1 ==> 经典的由变量声明提升所导致的一种错误写法
        // for (var i = 0; i < btns.length; i++) {
        //     var b = btns[i]
        //     b.onclick = function () {
        //         b.parentNode.remove()
        //         console.log(b, b.parentNode, i) // 以下是输出的三个值
        //         // <button>删除10</button>
        //         // <li>项目10<button>删除10</button></li>
        //         // 10
        //     }
        // }


        // 第一种解决方法 ==> 利用函数 ==> 固定变量值
        // for (var i = 0; i < btns.length; i++) {
        //     var b = btns[i]
        //     regEvent(b) // 固定变量值
        // }

        // function regEvent(btn) {
        //     btn.onclick = function () {
        //         btn.parentNode.remove()
        //         console.log(btn, btn.parentNode)
        //     }
        // }



        // 第二种解决方法 ==> 立即执行函数
        // for (var i = 0; i < btns.length; i++) {
        //     var b = btns[i]; // 得到当前按钮
        //     (function (b) {
        //         b.onclick = function () {
        //             b.parentNode.remove();
        //         }
        //     }(b));
        // }

        // 问题: 由分号导致的一个bug
        // for (var i = 0; i < btns.length; i++) {
        //     var b = btns[i]; // 该语句后面如果不加分号 那么会有bug 不清楚为什么
        //     (function (b) {
        //         b.onclick = function () {
        //             b.parentNode.remove()
        //         }
        //     }(b))
        // }


        // 第三种解决方法 ==> 使用this关键字
        // for (var i = 0; i < btns.length; i++) {
        //     var b = btns[i]; //得到当前按钮
        //     b.onclick = function () {
        //         this.parentNode.remove();
        //     }
        // }



        // 写法二 ==> 下面这种写法多练练
        /* 回顾: 伪数组 ==> 真数组
         * 1. [].slice.call(arr) ==> [].slice() === Array.prototype.slice(); // true
         * 2. Array.from(arr)
         */
        // 1. [].slice.call(arr)
        // var abc = [].slice.call(btns).filter(function (item) { // 这里如果不写成一个表达式(也就是省略"var abc = ") 会报错 应该是语法上的错误... 但是写成表达式后 反而特别的鸡肋...
        //     item.onclick = function () {
        //         item.parentNode.remove()
        //     }
        // })



        // Array.prototype.slice.call(btns).filter(function (item) {
        //     item.onclick = function () {
        //         item.parentNode.remove()
        //     }
        // })



        // 2. Array.from(arr)
        // Array.from(btns).forEach(function (b) {
        //     b.onclick = function () {
        //         b.parentNode.remove();
        //     }
        // })
    </script>
</body>

</html>




<!-- 作业2 ==> 图片切换器.html -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>图片切换器</title>
    <style>
        .banner {
            width: 500px;
            margin: 0 auto;
            text-align: center;
        }

        .banner img {
            width: 100%;
            height: 300px;
            object-fit: contain;
            border: 1px solid;
            display: block;
        }
    </style>
</head>

<body>
    <div class="banner">
        <img id="img" src="img/1.jpg" alt="">
        <p>
            <button id="btnPrev">上一张</button>
            <button id="btnNext">下一张</button>
        </p>
    </div>

    <script>
        var i = 1;
        var img = document.getElementById("img"),
            btnPrev = document.getElementById("btnPrev"),
            btnNext = document.getElementById("btnNext");

        /* 回顾 ==> img元素中的src属性是一个正常属性 即: 可识别属性
        可以直接通过 imgDom.src 对该属性的属性值进行读写操作 */

        // btnPrev.onclick = function () {
        //     i--;
        //     if (i === 0) {
        //         i = 5;
        //     }
        //     img.src = `img/${i}.jpg`;
        // }

        // btnNext.onclick = function () {
        //     i++;
        //     if (i === 6) {
        //         i = 1;
        //     }
        //     img.src = `img/${i}.jpg`;
        // }
    </script>
</body>

</html>




<!-- 作业3 ==> 库存变更器 -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        span {
            min-width: 50px;
            display: inline-block;
            text-align: center;
            color: red;
        }
    </style>
</head>

<body>
    <p>
        库存的最小值为0
    </p>
    <div>
        库存：
        <button data-plus="-1000">-1000</button>
        <button data-plus="-100">-100</button>
        <button data-plus="-10">-10</button>
        <button data-plus="-1">-1</button>
        <span id="spanNumber">10</span>
        <button data-plus="1">+1</button>
        <button data-plus="10">+10</button>
        <button data-plus="100">+100</button>
        <button data-plus="1000">+1000</button>
    </div>

    <script>
        // 学会使用自定义属性 ==> 查看自定义属性对象 ==> dom.dataset
        var btns = document.querySelectorAll("button");
        var span = document.getElementById("spanNumber");

        /* 第一次练习 */
        for (var i = 0; i < btns.length; i++) {
            var b = btns[i]
            b.onclick = function () {
                var iCur = parseInt(span.innerText)
                // console.log(iCur)
                var changeNum = parseInt(this.innerText)
                var result = iCur + changeNum
                if (result < 0) {
                    result = 0
                }
                span.innerText = result
            }
        }




        // for (var i = 0; i < btns.length; i++) {
        //     var b = btns[i];
        //     b.onclick = function () {
        //         // 每次点击按钮之前 先获取到当前值
        //         var num = parseInt(span.innerText); // span.innerText 获取到的是一个字符串类型的数据
        //         // 加某个数
        //         // console.log(this.dataset) // 可以把这个对象输出  看看自定义属性 及 其值 组成的键值对
        //         var plus = parseInt(this.dataset.plus);
        //         // var plus = parseInt(this.innerText); // 换成这种写法实际上也能实现
        //         var result = num + plus;
        //         if (result < 0) {
        //             result = 0;
        //         }
        //         span.innerHTML = result;
        //         // span.innerText = result; // ==> 这么写也行
        //     }
        // }
    </script>
</body>

</html>




<!-- 作业4 ==> 添加列表 -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .container {
            width: 400px;
            margin: 0 auto;
        }

        p {
            text-align: center;
        }

        p.error {
            color: red;
        }
    </style>
</head>

<body>
    <div class="container">
        <p>不能添加空的文本</p>
        <div class="input">
            <input type="text">
            <button id="btnAdd">添加</button>
        </div>
        <ul class="list">
            <li>项目1</li>
            <li>项目2</li>
        </ul>
    </div>
    <script>
        var btnAdd = document.getElementById("btnAdd");
        var ul = document.querySelector(".list");
        var inp = document.querySelector("input");
        var p = document.querySelector("p");


        /* 第一次练习 */
        // btnAdd.onclick = function () {
        //     // 若输入内容有误
        //     if (!(inp.value.trim())) {
        //         p.className = 'error'
        //     } else {
        //         p.className = ''
        //         var li = document.createElement('li')
        //         li.innerText = inp.value
        //         inp.value = ''
        //         ul.appendChild(li)
        //     }
        // }



        btnAdd.onclick = function () {
            // 若输入框内的内容为空
            if (!inp.value.trim()) {
                p.className = "error";
                return;
            }
            // 若输入内容正常 ==> 去掉p元素上的className ==> 清除由于输入错误而给p元素添加上的样式
            p.className = "";
            // 每次点击 都创建一个新的 li
            var li = document.createElement("li");
            // 先将当前文本框的内容 ==> 文本框的值 ==> inp.value ==> 赋值给 之前创建的 li 的 innerText
            li.innerText = inp.value;
            // 再清空文本框内容
            inp.value = "";
            // 最后将创建好的li插入到ul的底部即可
            ul.appendChild(li);
        }
    </script>
</body>

</html>




<!-- 作业5 ==> 穿梭框 -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .container {
            overflow: hidden;
            width: 550px;
            margin: 0 auto;
        }

        .container .left {
            float: left;
            margin: 0 30px;
        }

        .container select {
            width: 100%;
            height: 200px;
        }

        .container .mid {
            padding-top: 70px;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="left">
            <h2>成哥的现任女友</h2>
            <select id="sel1" multiple>
                <option value="1">幂幂</option>
                <option value="2">花花</option>
                <option value="3">春春</option>
                <option value="4">盈盈</option>
                <option value="5">红红</option>
            </select>
        </div>
        <div class="left mid">
            <p>
                <button id="btnToRight" title="右移动选中的">&gt;&gt;</button>
            </p>
            <p>
                <button id="btnToRightAll" title="右移动全部">&gt;&gt;|</button>
            </p>
            <p>
                <button id="btnToLeft" title="左移动选中的">&lt;&lt;</button>
            </p>
            <p>
                <button id="btnToLeftAll" title="左移动全部">|&lt;&lt;</button>
            </p>
        </div>
        <div class="left">
            <h2>成哥的前女友</h2>
            <select id="sel2" multiple>
                <option value="6">坤坤</option>
            </select>
        </div>

    </div>

    <script>
        var btnLeft = document.getElementById("btnToLeft"),
            btnRight = document.getElementById("btnToRight"),
            btnLeftAll = document.getElementById("btnToLeftAll"),
            btnRightAll = document.getElementById("btnToRightAll"),
            selLeft = document.getElementById("sel1"),
            selRight = document.getElementById("sel2");

        //得到某个select元素内部被选中的option数组
        function getSelectedOptions(sel) {
            return Array.from(sel.children).filter(function (item) {
                return item.selected;
                // 被选中的 option 元素的 selected 属性 的属性值是 true
            });
            // var opts = [];
            // for (var i = 0; i < sel.children.length; i++) {
            //     if (sel.children[i].selected) {
            //         opts.push(sel.children[i]);
            //     }
            // }
            // return opts;
        }

        //将option数组中的东西添加到制定的select中
        //opts: 要添加的option数组
        //sel：要添加到的select元素
        function appendToSelect(opts, sel) {
            opts = Array.from(opts);
            var frag = document.createDocumentFragment();
            for (var i = 0; i < opts.length; i++) {
                opts[i].selected = false;
                frag.appendChild(opts[i]);
            }
            sel.appendChild(frag);
        }

        btnLeft.onclick = function () {
            //获取右边选中的
            var opts = getSelectedOptions(selRight);
            //循环将该数组添加到左边的select中
            appendToSelect(opts, selLeft);
        }

        btnRight.onclick = function () {
            //获取右边选中的
            var opts = getSelectedOptions(selLeft);
            //循环将该数组添加到左边的select中
            appendToSelect(opts, selRight);
        }

        btnLeftAll.onclick = function () {
            appendToSelect(selRight.children, selLeft);
        }

        btnRightAll.onclick = function () {
            appendToSelect(selLeft.children, selRight);
        }
    </script>
</body>

</html>

dom元素样式

控制dom元素的类样式

  • className： 获取或设置元素的类名
  • classList： dom4的新属性IE10以下不兼容，是一个用于控制元素类名的对象第二个参数(true/false)在IE中不兼容
    • add：用于添加一个类名
    • remove：用于移除一个类名
    • contains：用于判断一个类名是否存在
    • toggle：用于添加/移除一个类名

获取样式

CSS的短横线命名，需要转换为小驼峰命名

  • dom.style：得到行内样式对象
  • window.getComputedStyle(dom元素)：得到某个元素最终计算的样式
    • 可以有第二个参数，用于得到某个元素的某个伪元素样式

设置样式

dom.style.样式名 = 值

设置的是行内样式。

test.html

<!-- 控制DOM元素的类样式
1. className
2. classList (可以打印出来看看)
    add ==> 用于添加一个类名
    remove ==> 用于移除一个类名
    contains ==> 用于判断一个类名是否存在
    toggle ==> 用于添加/移除一个类名 -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>点击切换颜色</title>
    <style>
        .item {
            width: 100px;
            height: 100px;
        }

        .red {
            background: red;
        }

        .green {
            background: green;
        }
    </style>
</head>

<body>
    <div class="item red"></div>

    <script>
        var div = document.querySelector(".red");
        div.onclick = function () {
            // if (this.className.search(/\bred\b/) !== -1) {
            //     this.className = this.className.replace(/\bred\b/, "green")
            // } else {
            //     this.className = this.className.replace(/\bgreen\b/, "red")
            // }


            // if (this.className.includes("red")) {
            //     this.classList.remove("red")
            //     this.classList.add("green")
            // } else {
            //     this.classList.remove("green")
            //     this.classList.add("red")
            // }


            if (this.classList.contains("red")) {
                this.classList.remove("red");
                this.classList.add("green");
            } else {
                this.classList.remove("green");
                this.classList.add("red");
            }
        }
    </script>
</body>

</html>




<!-- 控制DOM元素的类样式
2. classList ==> toggle ==> 两种状态(添加/移除)之间切换 -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>toggle</title>
    <style>
        .item {
            width: 100px;
            height: 100px;
            background: gray;
        }

        .red {
            background: red;
        }
    </style>
</head>

<body>
    <div class="item red"></div>

    <script>
        var div = document.querySelector(".item");
        div.onclick = function () {
            this.classList.toggle("red");
            // this.classList.toggle("red", true); // 强制添加 相当于 add 不再具备移除功能
            // this.classList.toggle("red", false); // 强制移除 相当于 remove 不再具备添加功能
        }
    </script>
</body>

</html>




<!-- 获取样式
1. dom.style ==> 得到 行内样式 对象
2. window.getComputedStyle() ==> 得到某个元素最终计算的样式值
    可以有第二个参数 ==> 用于得到某个元素的某个伪元素样式
注意: CSS的短横线命名 ==> 需要转换为小驼峰命名 -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>获取样式</title>
    <style>
        .item {
            width: 8em;
            height: 100px;
            background: gray;
        }

        .red {
            background: red !important;
        }
    </style>
</head>

<body>
    <div class="item red" style="background-color: green; width:auto">

    </div>

    <script>
        var div = document.querySelector(".item");
        console.log(div.style.backgroundColor) // green ==> 虽然页面上显示的是红色 但是该div的行内样式 ==> background-color: green; ==> 所以读取到的依旧是行内的 "green"
        // 得到div最终计算的样式
        var style = getComputedStyle(div);
        console.log(style.backgroundColor) // rgb(255, 0, 0) 其实就是红色 但是这是最终的计算结果 颜色最终的计算结果是以rgb函数的形式来表示的
    </script>
</body>

</html>



<!-- 获取样式
2. window.getComputedStyle() ==> 得到某个元素最终计算的样式值
    可以有第二个参数 ==> 用于得到某个元素的某个伪元素样式 -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>window.getComputedStyle() 第二个参数 ==> 用于得到某个元素的某个伪元素样式</title>
    <style>
        .item {
            width: 8em;
            height: 100px;
            background: gray;
        }

        .red {
            background: red !important;
        }

        .item::before {
            content: "";
            display: block;
            width: 50px;
            height: 50px;
            background: #008c8c;
        }
    </style>
</head>

<body>
    <div class="item red" style="background-color: green; width:auto">

    </div>

    <script>
        var div = document.querySelector(".item");
        //得到div 的伪元素 before 的最终计算的样式值
        var style = getComputedStyle(div, "before");
        // console.log(style.content)
        // console.log(style.display)
        // console.log(style.width)
        // console.log(style.height)
        // console.log(style.background)
    </script>
</body>

</html>



<!-- 设置样式 ==> dom.style.样式名 = 样式值
    注意: 1. 设置 ==> 设置的一定是行内样式
          2. 获取 ==> 获取的可以是最终计算的值 也可以是行内样式
 -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>设置样式 dom.style.样式名</title>
</head>

<body>
    <div></div>

    <script>
        var div = document.querySelector("div")
        div.style.width = '100px'
        div.style.height = '100px'
        div.style.border = '10px solid #008c8c'
    </script>
</body>

</html>

[作业讲解]dom元素样式

test.html

<!-- 作业1 ==> 选中效果 -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>选中效果</title>
    <style>
        body {
            margin: 0;
        }

        header {
            width: 100%;
            background: #333;
            color: #eee;
        }

        nav {
            overflow: hidden;
            /* 为什么"overflow:hidden"能清除浮动的影响 */
            /* [BFC](https://www.jianshu.com/p/7e04ed3f4bea) */
        }

        span {
            float: left;
            /* 回顾 bfc 设置了 float ==> display的属性值必为block
            若不设置 float: left; 那么下面给span设置行高为 50px 将失效 */
            line-height: 50px;
            margin: 0 15px;
            cursor: pointer;
        }

        span.active {
            color: gold;
        }
    </style>
</head>

<body>
    <header>
        <nav>
            <span>Lorem.</span>
            <span>Explicabo.</span>
            <span>Harum?</span>
            <span>Delectus?</span>
            <span>Commodi.</span>
            <span>Ullam!</span>
            <span>Tempora!</span>
        </nav>
    </header>

    <script>
        var spans = document.getElementsByTagName("span");
        // Array.prototype.slice.call(spans).forEach(function (spanDom) {
        //     spanDom.onclick = function () {
        //         var span = document.querySelector('span.active')
        //         if (span) {
        //             span.classList.remove("active")
        //             // this.classList.remove("active") // 注意 ==> 这里不能写成 this.
        //         }
        //         this.classList.add("active")
        //     }
        // })


        // Array.from(spans).forEach(function (sp) {
        //     sp.onclick = function () {
        //         //去掉之前的所有具有active的类样式
        //         var span = document.querySelector("span.active");
        //         if (span) {
        //             span.classList.remove("active");
        //         }
        //         this.classList.add("active");
        //     }
        // })
    </script>
</body>

</html>





<!-- 作业2 ==> 随机背景色 -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>随机背景色</title>
    <style>
        .container {
            width: 200px;
            height: 200px;
            border: 2px solid;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <p>
        点击div，设置div的背景色为随机颜色
    </p>
    <div class="container">

    </div>
    <script src="../../common/BetterFunction.js"></script>
    <script>
        var MyFunctions = {
            getRandom: function (a, b) {
                return Math.floor(Math.random() * (b - a)) + 1
            }
        }
        var div = document.querySelector(".container");
        div.onclick = function () {
            // 0 - 255
            this.style.background =
                `rgb(${MyFunctions.getRandom(0, 255)},${MyFunctions.getRandom(0, 255)},${MyFunctions.getRandom(0, 255)})`;
        }

        // setInterval(() => {
        //     div.style.background =
        //         `rgb(${MyFunctions.getRandom(0, 255)},${MyFunctions.getRandom(0, 255)},${MyFunctions.getRandom(0, 255)})`
        // }, 1000);
    </script>
</body>

</html>






<!-- 作业3 ==> 文字放大和缩小 -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>放大和缩小</title>
    <style>
        .container {
            overflow: hidden;
            border: 2px solid;
            width: 200px;
            height: 200px;
            position: relative;
            line-height: 200px;
            text-align: center;
            font-size: 100px;
            font-family: 宋体;
        }
    </style>
</head>

<body>
    <div class="container">袁</div>
    <p>
        <button id="btnbig">放大</button>
        <button id="btnsmall">缩小</button>
    </p>

    <script>
        var btnBig = document.getElementById("btnbig"),
            btnSmall = document.getElementById("btnsmall"),
            div = document.querySelector(".container");


        if (!("currentStyle" in Element.prototype)) {
            Object.defineProperty(Element.prototype, "currentStyle", {
                get: function () {
                    return window.getComputedStyle(this);
                }
            });
        }

        btnBig.onclick = function () {
            var size = parseInt(div.currentStyle['fontSize'])
            div.style.fontSize = size + 10 + 'px'
        }

        btnSmall.onclick = function () {
            var size = parseInt(div.currentStyle['fontSize'])
            result = size - 10
            if (result < 10) {
                result = 10
            }
            div.style.fontSize = result + 'px'
        }

        // btnBig.onclick = function () {
        //     // 得到当前的字体大小
        //     var size = parseInt(getComputedStyle(div).fontSize);
        //     div.style.fontSize = size + 10 + "px";
        // }



        // btnSmall.onclick = function () {
        //     //得到当前的字体大小
        //     var size = parseInt(getComputedStyle(div).fontSize);
        //     var result = size - 10;
        //     if (result < 10) {
        //         result = 10;
        //     }
        //     div.style.fontSize = result + "px";
        // }
    </script>
</body>

</html>



<!-- 作业4 ==> 扑克牌 -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>扑克牌</title>
</head>

<body>
    <p>
        利用pokers文件夹中的图片，用纯JS生成图片依次排列到页面上。不允许使用样式表
    </p>
    <div id="divcontainer">

    </div>

    <script>
        var div = document.getElementById("divcontainer");
        var imgs = [];
        // A-K
        for (var i = 1; i <= 13; i++) {
            for (var j = 1; j <= 4; j++) {
                imgs.push(createImg(`pokers/${i}_${j}.jpg`));
                // createImg ==> 创建img元素 ==> 传入的参数作为 img的src属性
            }
        }
        // 大小王
        imgs.push(createImg(`pokers/14_1.jpg`));
        imgs.push(createImg(`pokers/15_1.jpg`));
        // 乱序
        imgs.sort(function () {
            return Math.random() - 0.5;
        });

        // 将每一张图片插入到页面中
        imgs.forEach(function (img) {
            div.appendChild(img);
        });

        // createImg ==> 创建img元素 ==> 传入的参数作为 img的src属性
        function createImg(src) {
            var img = document.createElement("img");
            img.src = src;
            img.style.margin = "30px";
            return img;
        }
    </script>
</body>

</html>

练习：拼图游戏

很早之前写过 不记得丢哪了… 找时间在写一遍 再丢上来