获取页面中的元素的方法
作用：通过各种方式获取页面中的元素
比如：id，类名，标签名，选择器 的方式来获取元素
伪数组：
长的和数组差不多，也是按照索引排列
也是有length属性，也可以使用for循环来遍历
但是就是不能使用数组常用方法
1.通过 id 获取元素的方法
语法：document.getElementById('你要获取的元素的 id')
返回值：是 dom 元素，也是叫做 dom 对象
如果页面上有对应的 id 的元素，那么就是这个元素
如果页面上没有对应的 id 的元素，那么就是 null
代码：
var box = document.getElementById('box')
console.log(box)
2.通过类名获取元素的方法
语法：document.getElementsByClassName('你要获取的元素的类名')
返回值：是一个 伪数组 ，伪数组里面包含着所有能获取到的元素
页面上有多少类名符合的，那么这个伪数组里面就有多少个元素
页面上没有类名符合的，那么就是一个空的伪数组
代码：
var boxs = document.getElementsByClassName
console.log(boxs)
3.通过标签名获取元素的方法
语法：document.getElementsByTagName('你要获取的元素的标签名')
返回值：是一个 伪数组 ，伪数组里面包含着所有能获取到的元素
页面上有标签名符合的元素, 那么有多少, 这个伪数组里面就有多少
页面上没有标签名符合的元素, 那么就是一个空的伪数组
代码：
var divs = document.getElementsByTagName
console.log(divs)
4.通过选择器获取一个元素的方法
语法：document.querySelector('你要获取的元素的选择器')
选择器 => 你 css 怎么捕获这个元素，那么这里就怎么写
返回值：满足选择器的第一个元素
如果页面上有满足选择器的元素，那么返回第一个满足条件的元素
如果页面上没有满足选择器的元素，那么就是 null
代码：
var div = document.querySelector('.box:last-child')
console.log(div)
5.通过选择器获取一组元素的方法
语法：document.querSelectorAll('你要获取的元素的选择器')
返回值：一个伪数组
如果页面上有满足选择器的元素, 有多少伪数组里面就有多少个
如果页面上没有满足选择器的元素, 那么就是空伪数组
代码：
var divs = document.querySelectorAll('.box')
console.log(divs)
操作元素的属性 - 文本属性
我们获取到的 dom 元素，本身也是一个对象
其实就是操作这个 dom 元素的某一个成员内容
三个操作文本属性的方式
1.innerHTML
是一个读写的属性
读：获取一个元素的所有后代元素内容，包含 html 结构
你得到的内容是一个字符串，不是 dom 元素了
语法：元素.innerHTML
写：设置这个元素的内容部分，会完全覆盖式的写入
语法：元素.innerHTML = '你要写入的内容'
特点：你写入的时候，如果写入一个 html 格式的字符串，他能解析出来
注意：使用 innerHTML 属性来写入内容
2.innerText
是一个读写的属性
读：获取一个元素内所有的文本内容，包含后代元素的文本内容
不包含 html 结构，是一个字符串
语法:元素.innerText
写：设置这元素的内容部分，完全覆盖式的写入
语法：元素.innerText = '你要写入的内容'
特点：你写入的时候，如果写入一个 html 格式的字符串，他不会解析
3.value
是一个独写的属性，专门用来个 表单元素 合作的
读：获取一个标签元素的 value 属性的值
语法：表单元素.value
写：给一个表单元素设置 value 属性的值，完全覆盖式的写入
语法：表单元素.value = '你要写入的内容'
操作元素的属性 - 原生属性
原生属性：元素自己本身就带有的属性
每个元素都有的 id
img 标签有的 src 属性
...
特别说明 : class (类) 属性不行
原生属性直接操作就可以了
读：元素.你要读取的属性名
写：元素.你要写入的属性名 = '你要写入的值'
1.操作原生属性的 id 属性
获取元素
var div = documnet.querySelector('div')
设置 id 属性的值
console.log(div.id)
把 div 元素的 id 名称设置为 box
div.id = 'box'
2.操作原生属性 src 属性
获取元素
var img = documnet.querySelector('img')
设置 src 属性
console.log(img.src)
给 img 标签的 src 属性换一下地址
img.src = '地址'
3.操作原生属性 type 属性
获取元素
inp 这个变量代表着 input 这个元素
var inp = document.querySelector('input')
设置 type 属性
console.log(inp.type)
把这个 input 元素的 type 属性设置为 password
inp.type = 'password'
操作元素属性 - 自定义属性
自定义属性：元素本身不带有的属性
是我们自己定义的属性
我们想在元素身上写上这些属性
1.setAttribute()
作用： 给元素设置一个自定义属性
语法： 元素.setAttribute(你要设置的属性名,你要设置的属性值)
设置的时候不管你写的是什么数据类型，到了元素身上的时候就 会被自动转换为 string 类型
2.getAttribute()
作用： 获取元素的属性(可以获取原生属性，也可以获取自定义属性)
语法：元素.getAttribute(你要获取的属性名)
返回值：这个属性的值
获取到的所有数据都是 string 数据类型
3.removeAttribute()
作用 ：删除元素的属性
语法 ：元素.removeAttribute(你要删除的属性名)
代码：
0.获取元素
var div =document.querySelector('div')
1.给元素设置自定义属性
div.setAttribute('hello','world')
div.setAttribute('num',10) (设置的时候赋值了一个 number 数据类型)
2.获取元素的属性
var res = div.getAttribute('hello')
console.log(res)
var res2 = div.getAttribute('num') (获取元素身上叫做 num 的属性的值)
console.log(res2)
3.删除元素属性
div.removeAttribute('num') (删除元素身上的 num 这个属性)
div.removeAttribute('hello') (删除元素身上的 hello 这个属性)
div.removeAttribute('class') (删除元素身上的 class 这个属性)
操作元素属性 - 类名
专门用来操作元素类名的一个属性
因为 class 在 JS 里面有特殊含义
所以我们操作类名使用 className 这个属性
1.className
是一个读写的属性
读 ：获取元素的类名
有多少类名获取多少个类名，以字符串的形式
语法：元素.className
写：设置元素的类名
完全覆盖式的写入
语法：元素.className = '你要设置的类名'
我想追加一个类名
就是在原有的基础上添加一个类名
可以使用 += 符号操作，并且在前面多添加一个 空格，和之前的类名隔开
0.获取元素
var div = document.querySelector('div')
1.获取元素的类名
var cn = div.className
console.log(cn) (以字符串的形式获取到了元素 class 属性的所有值)
2.设置元素的类名
div.className = 'box1 box2' (给元素设置两个类名，分别是 box1 和 box2)
3.追加一个类名
等价于 div.className = div.className + 'box1'
div.className += 'box1' (是不是追加一个类名？)
你原先的类名是 'a b c' + 'box1' === 'a b cbox1'
使用的时候要多加一个空格，把他们隔开
操作元素属性 - 样式
操作元素的 css 样式
1.style 属性
作用： 获取到元素所有可设置样式，值是一个对象
语法：元素.style
内容：是一个对象，里面有所有的元素可设置样式
但是有值只有 行内样式
想读取元素的样式
直接从对象中获取就可以了
能获取到的值，是带有单位的
能得到的值只有行内样式，非行内样式设置的值 style 拿不到
想设置元素的样式
直接给对象里面的某个成员修改值就可以了
JS 设置样式只能设置行内样式
注意：当你要操作一个带有 中划线(-)的样式的时候
比如：background-color,border-top,margin-top,...
你操作的时候要转换写成 驼峰 的形式
backgroud-color => bcakgrounColor
border-top => borderTop
margin-top => marginTop
DOM - 操作
DOM节点
DOM 树就是由各种各样的节点组成的
根节点：Document(文档)，用来承载所有节点的，组成一个页面
根元素节点：html 标签，页面上最大的元素节点，页面上最大的标签
普通元素节点：body / head / div / ul / li / script /...
文本节点：写在页面上的文本内容，有可能被任何元素节点包裹
属性节点：写在每一个标签上的每一个属性，必须依赖于元素存在
注释节点：单独书写的一个节点，表示注释内容，不显示在页面上
节点操作：对这些节点进行增删改查
获取节点的操作
获取某一个元素节点的相关节点
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 属性
作用: 获取到一个元素节点的 父节点
一般来说, 我们能作为父子关系的, 父亲一般就是元素节点
有特殊的, 但是很少, 比如 document 就可以作为父节点, 但是不是元素节点
语法: 元素.parentNode
得到: 一个节点(有可能是元素节点, 也有可能是根节点)
12. parentElement 属性
作用: 获取到一个元素的 父元素节点
语法: 元素.parentElement
得到: 一个元素节点
13. attributes 属性
作用: 获取一个元素的所有 属性节点
因为属性节点不作为独立节点存在, 必须依赖元素节点存在
所以他不和任何内容出现父子关系
语法: 元素.