• Web APIs 第02天

    学习目标：

    能够说出排他操作的一般实现步骤

    能够使用html5中的dataset方式操作自定义属性

    能够根据提示完成百度换肤的案例

    能够根据提示完成全选案例

    能够根据提示完成tab栏切换案例

    能够区分元素节点、文本节点、属性节点

    能够获取指定元素的父元素

    能够获取指定元素的所有子元素

    能够说出childNodes和children的区别

    能够使用createElement创建页面元素

    1.1. 排他操作

    1.1.1 排他思想

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

    1. 所有元素全部清除样式（干掉其他人）

    2. 给当前元素设置样式 （留下我自己）

    3. 注意顺序不能颠倒，首先干掉其他人，再设置自己

    1.    <button>按钮1</button>
    2.     <button>按钮2</button>
    3.     <button>按钮3</button>
    4.     <button>按钮4</button>
    5.     <button>按钮5</button>
    6.     <script>
    7.         // 1. 获取所有按钮元素
    8.         var btns = document.getElementsByTagName('button');
    9.         // btns得到的是伪数组  里面的每一个元素 btns[i]
    10.         for (var i = 0; i < btns.length; i++) {
    11.             btns[i].onclick = function() {
    12.                 // (1) 我们先把所有的按钮背景颜色去掉  干掉所有人
    13.                 for (var i = 0; i < btns.length; i++) {
    14.                     btns[i].style.backgroundColor = '';
    15.                 }
    16.                 // (2) 然后才让当前的元素背景颜色为pink 留下我自己
    17.                 this.style.backgroundColor = 'pink';
    18.  
    19.             }
    20.         }
    21.     </script>

    1.2 案例：百度换肤

      

    1. <body>
    2.     <ul class="baidu">
    3.         <li><img src="images/1.jpg"></li>
    4.         <li><img src="images/2.jpg"></li>
    5.         <li><img src="images/3.jpg"></li>
    6.         <li><img src="images/4.jpg"></li>
    7.     </ul>
    8.     <script>
    9.         // 1. 获取元素 
    10.         var imgs = document.querySelector('.baidu').querySelectorAll('img');
    11.         // console.log(imgs);
    12.         // 2. 循环注册事件 
    13.         for (var i = 0; i < imgs.length; i++) {
    14.             imgs[i].onclick = function() {
    15.                 // this.src 就是我们点击图片的路径   images/2.jpg
    16.                 // console.log(this.src);
    17.                 // 把这个路径 this.src 给body 就可以了
    18.                 document.body.style.backgroundImage = 'url(' + this.src + ')';
    19.             }
    20.         }
    21.     </script>
    22. </body>

    1.3 案例：表格隔行变色

     

    1.     <script>
    2.         // 1.获取元素 获取的是 tbody 里面所有的行
    3.         var trs = document.querySelector('tbody').querySelectorAll('tr');
    4.         // 2. 利用循环绑定注册事件
    5.         for (var i = 0; i < trs.length; i++) {
    6.             // 3. 鼠标经过事件 onmouseover
    7.             trs[i].onmouseover = function() {
    8.                     // console.log(11);
    9.                     this.className = 'bg';
    10.                 }
    11.                 // 4. 鼠标离开事件 onmouseout
    12.             trs[i].onmouseout = function() {
    13.                 this.className = '';
    14.             }
    15.         }
    16.     </script>

    1.4 案例：全选

     

    1.     <script>
    2.         // 1. 全选和取消全选做法：  让下面所有复选框的checked属性（选中状态） 跟随 全选按钮即可
    3.         // 获取元素
    4.         
    5.         var j_cbAll = document.getElementById('j_cbAll'); 
    6.         var j_tbs = document.getElementById('j_tb').getElementsByTagName('input'); 
    7.         // 全选按钮注册事件
    8.         j_cbAll.onclick = function() {
    9.                 // this.checked 当前复选框的选中状态
    10.                 console.log(this.checked);
    11.                 for (var i = 0; i < j_tbs.length; i++) {
    12.                     j_tbs[i].checked = this.checked;
    13.                 }
    14.          }
    15.          // 给所有的子复选框注册单击事件
    16.         for (var i = 0; i < j_tbs.length; i++) {
    17.             j_tbs[i].onclick = function() {
    18.                 // flag 控制全选按钮是否选中
    19.                 var flag = true;
    20.                 // 每次点击下面的复选框都要循环检查者4个小按钮是否全被选中
    21.                 for (var i = 0; i < j_tbs.length; i++) {
    22.                     if (!j_tbs[i].checked) {
    23.                         flag = false;
    24.                         break; 
    25.                     }
    26.                 }
    27.                 // 设置全选按钮的状态
    28.                 j_cbAll.checked = flag;
    29.             }
    30.         }
    31.     </script>

     

    1.5. 自定义属性操作

    1.5.1 获取属性值

     

    1.   <div id="demo" index="1" class="nav"></div>
    2.     <script>
    3.         var div = document.querySelector('div');
    4.         // 1. 获取元素的属性值
    5.         // (1) element.属性
    6.         console.log(div.id);
    7.         //(2) element.getAttribute('属性')  get得到获取 attribute 属性的意思 我们程序员自己添加的属性我们称为自定义属性 index
    8.         console.log(div.getAttribute('id'));
    9.         console.log(div.getAttribute('index'));
    10. 	</script>

    1.5.2. 设置属性值

     

    1.         // 2. 设置元素属性值
    2.         // (1) element.属性= '值'
    3.         div.id = 'test';
    4.         div.className = 'navs';
    5.         // (2) element.setAttribute('属性', '值');  主要针对于自定义属性
    6.         div.setAttribute('index', 2);
    7.         div.setAttribute('class', 'footer'); // class 特殊  这里面写的就是

    1.5.3. 移出属性

    1.         // class 不是className
    2.         // 3 移除属性 removeAttribute(属性)    
    3.         div.removeAttribute('index');

    1.5.4. 案例：tab栏

    1.   <script>
    2.         // 获取元素
    3.         var tab_list = document.querySelector('.tab_list');
    4.         var lis = tab_list.querySelectorAll('li');
    5.         var items = document.querySelectorAll('.item');
    6.         // for循环，给选项卡绑定点击事件
    7.         for (var i = 0; i < lis.length; i++) {
    8.             // 开始给5个小li 设置索引号 
    9.             lis[i].setAttribute('index', i);
    10.             lis[i].onclick = function() {
    11.                 // 1. 上的模块选项卡，当前这一个底色会是红色，其余不变（排他思想）
    12.                 // 干掉所有人 其余的li清除 class 这个类
    13.                 for (var i = 0; i < lis.length; i++) {
    14.                     lis[i].className = '';
    15.                 }
    16.                 // 留下我自己 
    17.                 this.className = 'current';
    18.                 // 2. 下面的显示内容模块
    19.                 var index = this.getAttribute('index');
    20.                 console.log(index);
    21.                 // 干掉所有人 让其余的item 这些div 隐藏
    22.                 for (var i = 0; i < items.length; i++) {
    23.                     items[i].style.display = 'none';
    24.                 }
    25.                 // 留下我自己 让对应的item 显示出来
    26.                 items[index].style.display = 'block';
    27.             }
    28.         }
    29.     </script>

    1.5.5. H5自定义属性

    自定义属性目的：是为了保存并使用数据。有些数据可以保存到页面中而不用保存到数据库中。

    自定义属性获取是通过getAttribute(‘属性’) 获取。

    但是有些自定义属性很容易引起歧义，不容易判断是元素的内置属性还是自定义属性。

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

    1.     <div getTime="20" data-index="2" data-list-name="andy"></div>
    2.     <script>
    3.         var div = document.querySelector('div');
    4.         // console.log(div.getTime);
    5.         console.log(div.getAttribute('getTime'));
    6.         div.setAttribute('data-time', 20);
    7.         console.log(div.getAttribute('data-index'));
    8.         console.log(div.getAttribute('data-list-name'));
    9.         // h5新增的获取自定义属性的方法 它只能获取data-开头的
    10.         // dataset 是一个集合里面存放了所有以data开头的自定义属性
    11.         console.log(div.dataset);
    12.         console.log(div.dataset.index);
    13.         console.log(div.dataset['index']);
    14.         // 如果自定义属性里面有多个-链接的单词，我们获取的时候采取 驼峰命名法
    15.         console.log(div.dataset.listName);
    16.         console.log(div.dataset['listName']);
    17.     </script>

    1.6. 节点操作

    1.6.1. 节点概述

    网页中的所有内容都是节点（标签、属性、文本、注释等），在DOM 中，节点使用 node 来表示。

    HTML DOM 树中的所有节点均可通过 JavaScript 进行访问，所有 HTML 元素（节点）均可被修改，也可以创建或删除。

     

     

    一般地，节点至少拥有nodeType（节点类型）、nodeName（节点名称）和nodeValue（节点值）这三个基本属性。

     

     

    1.6.2. 节点层级

    利用 DOM 树可以把节点划分为不同的层级关系，常见的是父子兄层级关系。

     

    1.6.3. 父级节点

     

    1.     <div class="demo">
    2.         <div class="box">
    3.             <span class="erweima">×</span>
    4.         </div>
    5.     </div>
    6.     <script>
    7.         // 1. 父节点 parentNode
    8.         var erweima = document.querySelector('.erweima');
    9.         // var box = document.querySelector('.box');
    10.         // 得到的是离元素最近的父级节点(亲爸爸) 如果找不到父节点就返回为 null
    11.         console.log(erweima.parentNode);
    12.     </script>

    1.6.4. 子节点

    所有子节点

     

    子元素节点

    1.     <ul>
    2.         <li>我是li</li>
    3.         <li>我是li</li>
    4.         <li>我是li</li>
    5.         <li>我是li</li>
    6.     </ul>
    7.     <script>
    8.         // DOM 提供的方法（API）获取
    9.         var ul = document.querySelector('ul');
    10.         var lis = ul.querySelectorAll('li');
    11.         // 1. 子节点  childNodes 所有的子节点 包含 元素节点 文本节点等等
    12.         console.log(ul.childNodes);
    13.         console.log(ul.childNodes[0].nodeType);
    14.         console.log(ul.childNodes[1].nodeType);
    15.         // 2. children 获取所有的子元素节点 也是我们实际开发常用的
    16.         console.log(ul.children);
    17.     </script>

    第1个子节点

     

    最后1个子节点

     第1个子元素节点

     最后1个子元素节点

     实际开发中，firstChild 和 lastChild 包含其他节点，操作不方便，而 firstElementChild 和 lastElementChild 又有兼容性问题，那么我们如何获取第一个子元素节点或最后一个子元素节点呢？

     

    1.     <ol>
    2.         <li>我是li1</li>
    3.         <li>我是li2</li>
    4.         <li>我是li3</li>
    5.         <li>我是li4</li>
    6.         <li>我是li5</li>
    7.     </ol>
    8.     <script>
    9.         var ol = document.querySelector('ol');
    10.         // 1. firstChild 第一个子节点 不管是文本节点还是元素节点
    11.         console.log(ol.firstChild);
    12.         console.log(ol.lastChild);
    13.         // 2. firstElementChild 返回第一个子元素节点 ie9才支持
    14.         console.log(ol.firstElementChild);
    15.         console.log(ol.lastElementChild);
    16.         // 3. 实际开发的写法  既没有兼容性问题又返回第一个子元素
    17.         console.log(ol.children[0]);
    18.         console.log(ol.children[ol.children.length - 1]);
    19.     </script>

    1.6.5. 案例：新浪下拉菜单

     

     

     

    1.     <script>
    2.         // 1. 获取元素
    3.         var nav = document.querySelector('.nav');
    4.         var lis = nav.children; // 得到4个小li
    5.         // 2.循环注册事件
    6.         for (var i = 0; i < lis.length; i++) {
    7.             lis[i].onmouseover = function() {
    8.                 this.children[1].style.display = 'block';
    9.             }
    10.             lis[i].onmouseout = function() {
    11.                 this.children[1].style.display = 'none';
    12.             }
    13.         }
    14.     </script>

    1.6.6. 兄弟节点

    下一个兄弟节点

     上一个兄弟节点

    1.     <div>我是div</div>
    2.     <span>我是span</span>
    3.     <script>
    4.         var div = document.querySelector('div');
    5.         // 1.nextSibling 下一个兄弟节点 包含元素节点或者 文本节点等等
    6.         console.log(div.nextSibling);
    7.         console.log(div.previousSibling);
    8.         // 2. nextElementSibling 得到下一个兄弟元素节点
    9.         console.log(div.nextElementSibling);
    10.         console.log(div.previousElementSibling);
    11.     </script>

    下一个兄弟元素节点（有兼容性问题）

     上一个兄弟元素节点（有兼容性问题）

     注意：nextElementSibling和previousElementSibling有兼容性问题，IE9以上才支持。

     

    1.    function getNextElementSibling(element) {
    2.       var el = element;
    3.       while (el = el.nextSibling) {
    4.         if (el.nodeType === 1) {
    5.             return el;
    6.         }
    7.       }
    8.       return null;
    9.     }

    1.6.7. 创建节点

    1.6.8. 添加节点

    1.     <ul>
    2.         <li>123</li>
    3.     </ul>
    4.     <script>
    5.         // 1. 创建节点元素节点
    6.         var li = document.createElement('li');
    7.         // 2. 添加节点 node.appendChild(child)  node 父级  child 是子级 后面追加元素
    8.         var ul = document.querySelector('ul');
    9.         ul.appendChild(li);
    10.         // 3. 添加节点 node.insertBefore(child, 指定元素);
    11.         var lili = document.createElement('li');
    12.         ul.insertBefore(lili, ul.children[0]);
    13.         // 4. 我们想要页面添加一个新的元素 ： 1. 创建元素 2. 添加元素
    14.     </script>

     

    1.6.9. 案例：简单版发布留言

     

     

    1. <body>
    2.     <textarea name="" id=""></textarea>
    3.     <button>发布</button>
    4.     <ul>
    5.  
    6.     </ul>
    7.     <script>
    8.         // 1. 获取元素
    9.         var btn = document.querySelector('button');
    10.         var text = document.querySelector('textarea');
    11.         var ul = document.querySelector('ul');
    12.         // 2. 注册事件
    13.         btn.onclick = function() {
    14.             if (text.value == '') {
    15.                 alert('您没有输入内容');
    16.                 return false;
    17.             } else {
    18.                 // console.log(text.value);
    19.                 // (1) 创建元素
    20.                 var li = document.createElement('li');
    21.                 // 先有li 才能赋值
    22.                 li.innerHTML = text.value;
    23.                 // (2) 添加元素
    24.                 // ul.appendChild(li);
    25.                 ul.insertBefore(li, ul.children[0]);
    26.             }
    27.         }
    28.     </script>
    29. </body>

  • 相关阅读:
    使用Jenkins + docker打包部署后端服务
    2022 极术通讯-搭载“星辰”处理器的聆思科技CSK6视觉AI开发套件开发概览
    2022双十一有哪些数码好物值得入手？双11实用性强的数码装备推荐
    目标检测之概述-笔记整理
    【postgresql基础入门】 新建数据库服务集群目录，定制属于自己的独享数据区
    实验13 简单拓扑BGP配置
    PHP面向对象面试题
    STL源码阅读小记(六)——Any
    Ubuntu 微调训练ChatGLM3大语言模型
    CC攻击解决方案，如何处理CC攻击
  • 原文地址：https://blog.csdn.net/DIUDIUjiang/article/details/125415148