API : 接口
Web API: 浏览器功能和页面元素的API,浏览器提供的接口,一般针对于浏览器交互效果
任何一门语言都有API ,一般都有输入输出
如: 获取页面元素等
学习思路: 是干什么的 需要参数吗 返回值是什么 代码验证一下
查询: MDN:developer.mozilla.org/en-US/docs/…
中文网站:developer.mozilla.org/zh-CN/ 搜索
DOM
==文档对象模型==: dom接口可以改变网页的内容,结构和样式,标准编程接口
文档:document,页面就是文档
元素: element,标签就是元素
节点: node 页面所有内容都是节点
获取元素->选择事件类型->操纵元素
获取元素
ID getElementById()
标签名
类名选择器
事件类型
事件源 事件类型 事件处理程序
操作元素
改变元素的内容 innerHTML innerText
改变样式属性 this.style.background
改变后是行内样式,优先级非常高
样式优先级：
！import > 行内样式 > ID选择器 > 类选择器=伪类选择器=属性选择器 > 标签选择器=伪元素选择器
| 选择器 | 权重 |
|---|---|
| 行内样式 | 1，0，0，0 |
| ID选择器 | 0，1，0，0 |
| 类选择器，伪类选择器，属性选择器 | 0，0，1，0 |
| 标签选择器，伪元素选择器 | 0，0，0，1 |
| 其他选择器 | 0，0，0，0 |
默认的background-position的值是background-position:0% 0%;
background-position属性可以只写一个值。
比如，background-position:50px;
那么50px表示水平方向的值，垂直方向的值默认为center。 相当于
background-position:50px center; 或 background-position:50px 50%;
例:密码框验证信息:
用到获取input的值,
修改p标签内容和样式 包括背景图及颜色
message设置了一个inline-block?
例: 排他思想? 看视频看为啥要排他? 啥时候能用
比如点击按钮改变颜色 先把所有按钮的颜色置空, 再设置单个颜色
换肤效果
点击图片修改外层class的样式
小知识: id获取方式可以嵌套使用
获取全部img: document.querySelector('').querySelectorAll('')
当img变化 给他加个事件 改变背景图为本图片的图,参数为img的url
四个img都是一样的写法 所以用for循环简写 url的值为this.src
鼠标悬停改变当前行颜色
table thead tr th
tbody tr td td td tr td
当前行 ==定位到tbody 的全部tr 全部行==
==遍历全部行== 当鼠标经过时 改变这个当前行的样式
鼠标经过事件: ==onmouseover==
鼠标离开事件: ==onmouseout==
获取属性 修改属性 删除属性
tab工具栏切换实例
首先是tab样式
其次是控制显隐 display:block显示 display:none隐藏
点击 修改当前tab的ul的li的class
list-style-type属性可以设置列表项标记的类型:
li::before{ content: "★"; color: red; }
批量生成精灵图标练习
节点操作
父节点
子节点
兄弟节点
创建 添加 删除 复制克隆节点
事件高级
注册/绑定事件
事件监听
删除/解绑事件
DOM事件流
捕获阶段
冒泡阶段
事件对象
事件对象组织默认行为
阻止事件冒泡
事件委托
常见的鼠标事件
禁止鼠标右键与鼠标选中
鼠标事件对象
