Web api day2

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

1. 所有元素全部清除样式（干掉其他人）
2. 给当前元素设置样式 （留下我自己）
3. 注意顺序不能颠倒，首先干掉其他人，再设置自己
   
   2.百度换肤案例
   注意一定要加url
   ① 这个案例练习的是给一组元素注册事件
   ② 给4个小图片利用循环注册点击事件
   ③ 当我们点击了这个图片，让我们页面背景改为当前的图片
   ④ 核心算法： 把当前图片的src 路径取过来，给 body 做为背景即可
   
   3.表格高亮
   
   4.表单全选取消和全选
   
   

自定义属性的操作

1.获取属性值
element.属性
element.getAttribute(‘属性’)

区别：
element.属性 获取的是内置属性值（元素本身自带的属性）
element.getAttribute(‘属性’) 用来获取自定义属性的标准写法
2.修改元素属性和移除元素属性

案例：tab 栏切换（重点案例）
当鼠标点击上面相应的选项卡（tab），下面内容跟随变化


H5 新增的自定义属性获取data-开头 dataset

节点操作来获取元素

1.我们为什么要学习节点操作
获取元素通常有两大方法：
(1)利用DOM提供的方法获取元素

• document.getElementById()
• document.getElementsByTagName()
• document.querySelector 等
• 逻辑性不强、繁琐
  (2)利用节点层级关系获取元素
• 利用父子兄节点关系获取元素 
• 逻辑性强， 但是兼容性稍差
  这两种方式都可以获取元素节点，我们后面都会使用，但是节点操作更简单

2.节点概述
网页中的所有内容都是节点（标签、属性、文本、注释等），在DOM 中，节点使用node 来表示。
HTML DOM 树中的所有节点均可通过 JavaScript 进行访问，所有 HTML 元素（节点）均可被修改，也可以 创建或删除。
一般地，节点至少拥有nodeType（节点类型）、nodeName（节点名称）和nodeValue（节点值）这三个 基本属性。
 元素节点 nodeType 为 1
 属性节点 nodeType 为 2
 文本节点 nodeType 为 3 （文本节点包含文字、空格、换行等）
我们在实际开发中，节点操作主要操作的是元素节点,因为操作文本节点的空格换行注释啊，没太大意义

3.父节点的操作

4.子节点操作
children常用
下面的两个方法得到的都是亲儿子


获取第一和最后
新浪下拉菜单案例

5.兄弟节点操作
一般都不用，都有兼容问题创建元素节点
案例简单留言版

删除节点元素

删除留言案例
① 核心思路： 点击按钮之后，就动态创建一个li，添加到ul 里面。
② 创建li 的同时，把文本域里面的值通过li.innerHTML 赋值给 li
③ 如果想要新的留言后面显示就用 appendChild 如果想要前面显示就用insertBefore


节点操作之克隆节点

1. node.cloneNode()
   案例动态生成表格