两类标签，非常规标签，常规标签
1. 非常规标签
{
html
=> doucument.documentElement
head
=> doucument.head
body
=> doucument.body
}
2. 常规标签
{
不是不能获取，而是一般不用
1. document.getElementById();
查找范围.getElementById("id名称");
查找范围：doucument 或者一个元素
返回值：
如果有这个id 匹配的元素，就是这个元素
如果没有这个id 匹配的元素，就是null
2. doucument.getElementsByTagName()
查找范围.getElementsByTageName("标签名")
返回值
是一个伪数组（数组常用方法用不了）
如果有这个标签名匹配的元素，有多少获取多少
如果没有这个标签匹配的元素，返回一个空的伪数组
3. document.getElementsByClassName("类名");
查找范围：getElementsByClassName();
返回值：
是一个伪数组（数组常用方法用不了）
如果有这个类名匹配的元素，有多少获取多少
如果没有这个类名匹配的元素，返回一个空的伪数组
4. document.getElementsByName("元素name属性的值")
查找范围.getElementsByName()
返回值：
是一个伪数组（数组常用方法用不了）
如果有这个name匹配的元素，有多少获取多少
如果没有这个name匹配的元素，返回一个空的伪数组
5. document.querySelector("选择器")
查找范围.querySelector()
返回值：
如果找到选择器匹配的元素，返回第一个找到的内容
如果没有找到选择器匹配的元素，返回null
6. document.qureySelectorAll("选择器")
查找范围.querySelectorAll()
返回值：
如果找到选择器匹配的元素，有多少获取多少
如果没有找到选择器匹配的元素，返回一个空的伪数组
}
+ js语法操作标签上的三种属性
1. 原生属性
2. 自定义属性
3. H5 自定义属性
+ 原生属性
语法：元素.属性名
=> 读 元素.属性名
=> 写 元素.属性名 = '值'
注意：class除外，操作 类名使用 元素.className
+ 自定义属性
语法：不能直接点语法操作
三个方法
1. setAttrubute('属性名', '属性值')
=> 给元素标签上设置属性
2. getAttribute('属性名')
=> 获取元素上的值
3. removeAttribute('属性名')
=> 删除元素上的属性
+ H5 自定义属性
每一个元素身上都有一个属性叫做 dataset
里面包含了H5的自定义属性
=> 里面的key 就是除了 data- 以外的内容
=> value 就是这个属性的值
操作 H5 的自定义属性
=> 直接在dataset 里面操作就可以
获取 H5 的自定义属性
=>元素.dataset.名字
-> 名字: data-a 使用a就可以了
设置 H5 的自定义属性
=> 元素.dataset.名字 = '值'
-> 名字 这里写a，那么映射在标签上是 data-a
删除dataset对象的hello成员
delete div.dataset.hello
+ 两种方式操作元素类名
1. 按照原生属性来操作类名
=> 设置类名
-> 元素.className= 'box'
=> 修改类名
-> 元素.className = '新值'
=> 追加类名
-> 元素.className = 元素.className + ' 新类名'
-> 注意，需要添加一个空格
=> 删除类名 比较麻烦
-> 获取类名
-> 1. 截取字符串
-> 2. 按照空格切开 循环遍历，删除你想删除的
-> 3. 再写一遍
2. H5 标准提供给我们的API
=> 元素身上有一个属性叫做classList
=> 添加类名： add()
-> 元素.classList.add("你要添加的类名");
=> 移除类名： remove()
-> 元素.classList.remove("你要移除的类名");
=> 切换的类名： toggle()
-> 元素.classList.toggle("你要切换的类名");
-> 当元素有这个类名的时候，就删除
-> 当元素没有这个类名的时候，就添加
+ 三种
1. innerHTML
=> 一个读写的属性
=> 操作元素的超文本内容
=> 读 获取元素内部的所有内容
-> 语法 元素.innerHTML
=> 写 设置元素内部的超文本内容
-> 完全覆盖式的写
-> 元素.innerHTML = ""
-> 字符串为浏览器html结构，自动解析
2. innerText
=> 一个读写的属性
=> 操作元素的超文本内容
=> 读 获取元素内部的所有文本内容
-> 语法 元素.innerText
-> 包括子元素所有后代元素里面的文本内容
-> 标签内容不获取
=> 写 设置元素的超文本内容
-> 完全覆盖式的写
-> 元素.innerText = "你要写的内容"
-> 字符串为浏览器html结构， 不会解析，原样输出
3. value
=> 一个读写的属性
=> 操作表单的vale值
=> 读 获取元素内部的所有文本内容
-> 语法 元素.value
=> 写 设置表单的vale值
-> 元素.innerText = "你要设置的值"
1. style 的方式
=> 利用原生属性的方式
=> 元素.style
=> 获取到的内容是一个对象，里面包含元所有可是设置的样式
=> 你想获取哪一个样式的值，就从对象里面获取就可以
2. 获取非行内样式
2-1. window.getComputedStyle() 方法
=> 标准浏览器
=> 语法 window.getComputedStyle(要获取样式的元素)
=> 返回值： 一个对象，里面包含所有可设置样式，每一个样式都有值，你不设置的有默认值
=> 你需要哪一个样式，直接在对象里访问就可以了
2-2. currentStyle 属性
=> IE低版本
=> 语法 要获取样式的元素.currentStyle
=> 得到的就是一个对象，里面包含元素的所有可设置样式
=> 你需要哪一个样式，直接咋对象里面查找就可以了
说明：
+ 当你获取样式的时候
+ 若果使用.点语法
-> 你获取带有中划线的样式要转化成驼峰的样式
+ 如果使用 数组关联语法，
-> 你可以写 中划线
兼容 段落运算符：
+ 什么情况下用短路表达式兼容
=> 方法或属性执行没有问题，只是拿不到值的时候
+ 前提 你的代码执行不报错
这里的兼容，自己封装一个函数
3. 设置元素的样式
+ 只有一种方式
=> 设置元素的行内样式
=> 前端JS理论上是不可以设置元素的非行内样式的
-> 要修改非行内样式
-> 需要修改html文件或者css文件的
-> 前端js不能操作电脑上的文件
+ 设置行内样式
语法 元素.style.样式名 = 值
var style = window. getComputedStyle ( div) ;
console. log ( style. backgroundColor) ;
console. log ( style[ 'background-color' ] ) ;
var style2 = div. currentStyle;
console. log ( style. width)
console. log ( style. height)
1. 准备一个函数接收几个参数
=> 获取什么样式的元素
=> 要获取什么样式
2. 函数内部处理兼容
=> 报错原因
=> window. getComputedStyle ( )
- > IE 报错，对象不支持 getComputedStyle ( )
- > 谷歌报错，window. getComputedStyle is not a function => 判断 getComputedStyle是不是在window里面
function getStyle ( ele, style ) {
if ( 'getComputedStyle' in window) {
return window. getComputedStyle ( ele) [ style] ;
} else {
return ele. currentStyle[ style] ;
}
}
+ 我们页面市有一个一个节点组成
+ 页面的每一个组成部分都是一个节点
1. document
=> 一个页面中最大的节点
=> 承载所有的节点容器
=> 根节点
2. html
=> 一个页面中最大的元素节点
=> 承载所有其他节点
=> 根元素节点
3. 元素节点
=> head / body / div / ul / table..
=> 只是不同的标签子啊页面中的表现形式不一样
=> 特点 是页面的标签
4. 文本节点
=> 每段文本内容都是一个文本节点
=> 包含换行 空格
=> 一般作为元素节点的子节点存在，用来表示该元素节点在页面上显示的内容
5. 属性节点
=> 注意 属性系欸但不作为独立节点出现 必须依赖元素
=> 因为没有元素，属性节点就是文本
6. 注释节点
=> 作为独立节点出现
=> 作为说明文本使用
节点操作
+ 操作元素
+ 操作 注释节点 文本节点 属性节点
+ 获取节点
=> 获取节点 包含不限于元素节点
+ 创建节点
=> 通过JS的语法来制造一个标签 文本 注释 ...
+ 插入节点
=> 把我创造的一个节点插入到另一个节点中 出现了父子结构
+ 删除节点
=> 把一个已经存在的节点移出
+ 替换节点
=> 我创造一个节点替换一个以经存在的节点
+ 克隆节点
=> 把一个以经存在的节点复制一份一摸一样的
1. childNodes
+ 语法：元素.childNodes
+ 得到：元素的所有子节点（伪数组）
2. children
+ 语法：元素.children
+ 得到：元素的所有 子元素节点（伪数组）
3. firstChild
+ 语法：元素.firstChild
+ 得到：元素的第一个节点
4. firstElementChild
+ 语法：元素.firstElementChild
+ 得到：元素的第一个 子元素节点
5. lastChild
+ 语法：元素.lastChild
+ 得到：元素的最后一个 子节点
6. lastElementChild
+ 语法：元素.lastElementChild
+ 得到：元素的最后一个 子元素节点
7. previousSibling
+ 语法：元素.previousSibling
+ 得到：元素的上一个 兄弟节点(哥哥节点)
8. previousElementSibling
+ 语法：元素.previousElementSibling
+ 得到：元素的上一个 兄弟元素节点(哥哥元素)
9. nextSibling
+ 语法：元素.nextSibling
+ 得到：元素的下一个 兄弟节点(弟弟节点)
10. nextElementSibling
+ 语法：元素.nextElementSibling
+ 得到：元素的下一个 兄弟元素节点(弟弟元素)
11. parentNode
+ 语法：元素.parentNode
+ 得到：元素的 父节点
+ 大部分是元素，有特殊的 document
12. parentElement
+ 语法：元素.parentElement
+ 得到：元素的 父元素
+ 大部分是元素，有特殊的 document
13. attributes
+ 语法：元素.attributes
+ 得到：元素的所有 属性节点
+ 属性节点
=> 元素身上放的属性
=> 每一个属性是一个节点
+ 节点属性
=> 用来描述这个节点信息
=> 不同节点有相同的属性名，但是值不一样
=> 例子：
-> 元素节点: 编号 001
-> 属性节点: 编号 002
+ 节点属性有三个
1. nodeType
=> 以数字的形式来表示一个节点类型
=> 一种节点编号
=> 元素节点：1
=> 属性节点：2
=> 文本节点：3
=> 注释节点：8
2. nodeName
=> 节点的名称
=> 元素节点 ： 大写标签名(全大写)
=> 属性节点 ： 属性名
=> 文本节点 ： 所有文本节点叫做#test
=> 注释节点 ： 所有注释节点全部叫做 #comment
3. nodeValue
=> 节点的值
=> 元素节点 null
=> 属性节点 属性值
=> 文本节点 文本内容（包含换行和空格）
=> 注释节点 注释内容（包含换行和空格）
1. 创建标签节点
+ createElement()
+ 语法：document.createElement('标签名')
2. 创建文本节点
+ createTextNode()
+ document.createTextNode("文本内容")
返回值：一个文本节点，不是字符串
3. createComment()
+ 语法：document.createComment("注释内容");
+ 返回值：一个注释节点
4. createAttribute()
+ document.createAttribute("属性名")
+ 添加属性值， 节点.value = "属性值"
+ 返回值 ： 一个属性节点
+ 把一个节点插入到另一个节点里面
1. appendChild()
语法：父节点.appendChild(子节点)
作用：把子节点插入到父节点里面，放在最后一个节点位置
2. innsertBefore()
语法：父节点.innserBefore(要插入的子节点，哪一个子节点前面)
作用：把子节点插入到指定父节点的子节点前面
+ 删除一个已经存在的节点
+ 可以在创建的节点里面删除，也可以直接在页面元素里面删除
1. removeChild()
+ 语法：父节点.removeChild(子节点)
+ 作用：把子节点从父结点里面移除
2. reove()
+ 语法：节点.remove()
+ 作用：把自己移出父节点
+ 用一个节点替换一个以经存在的节点
+ 可以直接替换页面元素，也可以直接替换我们自己创建的节点
1. replaceChild()
+ 语法：父节点.replaceChild(新节点，旧节点)
+ 作用：字符节点下，用新节点替换旧节点
+ 把谋一份节点复制一份一模一样的
1.cloneNode()
+ 语法：节点.cloneNode(参数)
-> 参数选填，默认值是 false 不克隆后代节点
-> 我们可以选填true 克隆所有子节点
+ 作用：一个克隆好的节点
+ 元素的尺寸
+ 占地面积 内容区域 + padding + border
两组方式：
1. offsetWidth 和 offsetHeight
+ 语法：
-> 元素.offsetWidth
-> 元素.offsetHeight
+ 得到：
-> 元素的内容 + padding + border 区域的尺寸
+ 注意：
-> display 是0
2. clientWidth 和 clientHeight
+ 语法：
-> 元素.clientWidth
-> 元素.clientHeight
+ 得到：
-> 元素的 内容 + padding 区域的尺寸
+ 注意：
-> display 是0
一个元素相对于参考系的坐标
1. offsetParent
+ 语法：元素.offsetParent
+ 作用：拿到该元素获取偏移量的时候的参考父级
=> 当你给这个元素设置一个绝对定位的时候，它会根据谁来定位，他的offsetParent 就是谁
2. offsetLeft 和 offsetTop
+ 语法：
-> 元素.offsetLeft
-> 元素.offsetTop
+ 得到：
-> 元素相对于参考父级的左边和上边的偏移量
+ BOM 级别的获取
=> innerWidth
=> innerHeight
=> 拿到的时包含滚动条的尺寸
+ DOM 级别的获取
=> 其实是获取页面的那一部分尺寸
=> document.documentElement.clientWidth
=> document.documentElement.clientHeight
+ JS 里面， 事件分为几个大类
1. 鼠标事件
1.1 click =>鼠标左键单击
1.2 dblclick =>鼠标左键双击
1.3 contextmenu =>鼠标右键单击
1.4 mousewhell =>鼠标滚动事件
1.5 mousedown =>鼠标按下事件
左键，右键，滚轮，功能键都能触发
1.6 mouseup =>鼠标抬起事件
1.7 mousemove =>鼠标移动事件
1.8 mouseover =>鼠标移入事件
1.9 mouseout =>鼠标移出事件
1.10 mouseenter =>鼠标移入事件
1.11 mouseleave =>鼠标移出事件
2. 键盘事件
+ 不是所有元素都能触发
+ 表单元素又选中效果，documetn, window
1. keydown => 键盘按下
2. keyup => 键盘抬起
3. keypress=> 键盘按下
必须要准确的嵌入到文本框里面的内容才会触发
3. 浏览器事件
3.1 load => 页面加载完毕
3.2 scroll => 滚动
3.3 resize => 窗口尺寸改变
3.4 offline=> 网络断开
3.5 online => 网络恢复
3.6 hashchange => 当哈希值改变了
4. 表单事件
表单事件绑定给 表单元素 和form 标签的
4.1 change => 表单内容改变
表单失焦和聚焦不一样才会触发
4.2 input => 表单内部输入内容就会触发
只要你在里面写就触发
4.3 focus => 表单聚焦事件
4.4 blur => 表单失焦事件
4.5 submit => 表单提交事件
绑定给form标签使用的的
当你点击form里的submit的时候触发
4.6 reset => 表单重置事件
-> 事件是绑定给form标签使用的
-> 当你点击 reset 按钮才能触发
5. 拖拽事件
一般元素想发生拖拽事件，要给元素加一个属性
draggable='true';
需要两个元素才能完成一个完整的拖拽
5.1 dragstart => 拖拽开始
绑定给拖拽元素的
5.2 drag => 拖拽移动
绑定给拖拽元素
5.3 ragend => 拖拽结束
绑定给拖拽元素
5.4 dragenter => 拖拽进入目标元素
绑定给目标元素的
光标进入到目标元素
5.5 dragleave => 拖拽离开目标元素
绑定给目标元素的
5.6 dragover => 拖拽元素在目标元素里移动
5.7 drop => 拖拽元素在目标元素内放手
绑定给目标元素的
必须要在dragover 事件里阻止默认行为
6. 触摸事件
只能在移动端使用
6.1 touchstart => 触摸开始
6.2 touchmove => 触摸移动
6.3 touchend => 触摸结束
7. 其他事件
7.1 transitionend => 过度结束
当你有过度属性的时候
过度结束触发，你过度几属性，触发几次
7.2 selectstart 开始选择
当你想在页面中框选文档的时候触发
7.3 visiblitychange => 窗口隐藏和显示
只绑定给document
+ JS 里面原生事件没有大写字母
4695
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
