1.排他思想案例
如果有同一组元素,我们想要某一个元素实现某种样式, 需要用到循环的排他思想算法:
- 所有元素全部清除样式(干掉其他人)
- 给当前元素设置样式 (留下我自己)
- 注意顺序不能颠倒,首先干掉其他人,再设置自己
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
节点操作之克隆节点
- node.cloneNode()
案例动态生成表格