（一）. DOM属性与操作
DOM（Document Object Model）： 文档对象模型- 其实就是操作
html中的标签的一些能力 - 我们可以操作哪些内容
- 获取一个元素
- 移除一个元素
- 创建一个元素
- 向页面里面添加一个元素
- 给元素绑定一些事件
- 获取元素的属性
- 给元素添加一些
css样式 - ...
DOM的核心对象就是docuemnt对象document对象是浏览器内置的一个对象，里面存储着专门用来操作元素的各种方法DOM： 页面中的标签，我们通过js获取到以后，就把这个对象叫做 DOM 对象
1. 获取一个元素
- 通过
js代码来获取页面中的标签 - 获取到以后我们就可以操作这些标签了
1-1. 获取html,head,body 非常规元素
1-2. 获取常规元素body里常规属性
1-2-1 getElementById
-
getElementById是通过标签的id名称来获取标签的 -
因为在一个页面中
id是唯一的，所以获取到的就是一个元素- 获取到的就是页面中的那个 id 为 box 的 div 标签
1-2-2 getElementsByClassName
-
getElementsByClassName是用过标签的class名称来获取标签的 -
因为页面中可能有多个元素的
class名称一样，所以获取到的是一组元素 -
哪怕你获取的
class只有一个，那也是获取一组元素，只不过这一组中只有一个 DOM 元素而已- 获取到的是一组元素，是一个长得和数组一样的数据结构，但是不是数组，是 伪数组
- 这个一组数据也是按照索引排列的，所以我们想要准确的拿到这个
div，需要用索引来获取
1-2-3 getElementsByTagName
-
getElementsByTagName是用过标签的 标签 名称来获取标签的 -
因为页面中可能有多个元素的 标签 名称一样，所以获取到的是一组元素
-
哪怕真的只有一个这个标签名，那么也是获取一组元素，只不过这一组中只有一个 DOM 元素而已
<body> <div></div> <script> var box = document.getElementsByTagName('div') console.log(box) // [<div></div>] console.log(box[0]) // <div></div> </script> </body>- 和
getElementsByClassName一样，获取到的是一个长得很像数组的元素 - 必须要用索引才能得到准确的
DOM元素
- 和
1-2-4 querySelector
-
querySelector是按照选择器的方式来获取元素 -
也就是说，按照我们写
css的时候的选择器来获取 -
这个方法只能获取到一个元素，并且是页面中第一个满足条件的元素
console.log(document.querySelector('div')) // 获取页面中的第一个 div 元素 console.log(docuemnt.querySelector('.box')) // 获取页面中第一个有 box 类名的元素 console.log(document.querySelector('#box')) // 获取页面中第一个 id 名为 box 的元素
1-2-5 querySelectorAll
-
querySelectorAll是按照选择器的方式来获取元素 -
这个方法能获取到所有满足条件的元素，以一个伪数组的形式返回
console.log(document.querySelectorAll('div')) // 获取页面中的所有的 div 元素 console.log(docuemnt.querySelectorAll('.box')) // 获取页面中所有有 box 类名的元素- 获取到的是一组数据，也是需要用索引来获取到准确的每一个
DOM元素
- 获取到的是一组数据，也是需要用索引来获取到准确的每一个
2. 操作属性
- 通过我们各种获取元素的方式获取到页面中的标签以后
- 我们可以直接操作
DOM元素的属性，就能直接把效果展示在页面上
2-1 innerHTML
2-2 innerText
- 获取元素内部的文本（只能获取到文本内容，获取不到
html标签）
2-3 getAttribute
- 获取元素的某个属性（包括自定义属性）
2-4 setAttribute
- 给元素设置一个属性（包括自定义属性）
2-5 removeAttribute
- 直接移除元素的某个属性
2-6 style
-
专门用来给元素添加
css样式的 -
添加的都是行内样式
2-7 获取元素的非行间样式
-
我们在操作
DOM的时候，很重要的一点就是要操作元素的css样式 -
在操作
css样式的时候，我们避免不了就要获取元素的样式 -
可以用
元素.style.xxx来获取 -
但是这个方法只能获取到元素 行间样式，也就是写在行内的样式
-
不管是外链式还是内嵌式，我们都获取不到该元素的样式
-
这里就要使用
getComputedStyle和currentStyle来获取了 -
这两个方法的作用是一样的，只不过一个在 非 IE 浏览器，一个在 IE 浏览器
getComputedStyle（非IE使用）
- 语法：
window.getComputedStyle(元素, null).要获取的属性
2-8 className
-
专门用来操作元素的 类名的
-
也可以设置元素的类名，不过是全覆盖式的操作
- 在设置的时候，不管之前有没有类名，都会全部被设置的值覆盖
案例
- 1.密码可视
- 2.购物车全选
3.操作元素文本内容
innerHTML
innerText
value
<body>
<div id="box">
hello world
<div>kerwin</div>
</div>
<input type="text" id="username" value="hello">
<select name="" id="select">
<option value="1">11111</option>
<option value="2" selected>2222</option>
<option value="3">3333</option>
</select>
<script>
// innerHTML
// innerText
// value
console.log(box.innerHTML)
// box.innerHTML = "<h1>11111111</h1>"
console.log(box.innerText) // 获取只有文本 获取box内全部内容 hello world
<div>kerwin</div>
box.innerText = "<h1>1111111</h1>" //不解析 html
获取为<h1>1111111</h1>
console.log(box.value)
username.value = "2222222"
console.log(select.value)
select.value = "3"
</script>
</body>
3-1.案例：渲染页面
4 操作元素样式
5 操作元素类名
5-1案例
简易选项卡
5-2案例
选项卡
（二）. DOM节点
6. DOM节点
DOM的节点我们一般分为常用的三大类 元素节点 / 文本节点 / 属性节点- 什么是分类，比如我们在获取元素的时候，通过各种方法获取到的我们叫做元素节点（标签节点）
- 比如我们 标签 里面写的 文字，那么就是文本节点
- 写在每一个 标签 上的 属性，就是属性节点
6-1 元素节点getElementBy...
- 我们通过
getElementBy...获取到的都是元素节点
6-2 属性节点 getAttribute
- 我们通过
getAttribute获取的就是元素的属性节点
6-3 文本节点innerText
- 我们通过
innerText获取到的就是元素的文本节点
6-4 获取节点
1 childNodes：获取某一个节点下 所有的子一级节点
- 我们会发现，拿到以后是一个伪数组，里面有三个节点
- 一个
text：从<div> 一直到 <p>中间有一个换行和一堆空格，这个是第一个节点，是一个文本节点 - 一个
p：这个p标签就是第二个节点，这个是一个元素节点 - 一个
text：从</p> 一直到 </div>中间有一个换行和一堆空格，这个是第三个节点，是一个文本节点 - 这个时候就能看到我们有不同的节点类型了
2 children ：获取某一节点下所有的子一级 元素节点
- 我们发现只有一个节点了，因为
children只要元素节点 - div 下面又只有一个元素节点，就是
p - 所以就只有一个，虽然只有一个，但是也是一个 伪数组
3 firstChild：获取某一节点下子一级的 第一个节点
- 这个是只获取一个节点，不再是伪数组了
- 获取的是第一个
- 第一个就是
<div> 一直到 <p>的那个换行和空格，是个文本节点
4 firstElementChild：获取某一节点下子一级 第一个元素节点
- 只获取一个节点，不在是伪数组
- 获取的是第一个 元素节点
- 第一个元素节点就是
p标签，是一个元素节点
5 lastChild：获取某一节点下子一级的 最后一个节点
- 只获取一个节点，不再是伪数组
- 获取的是最后一个
- 最后一个就是
</p> 一直到 </div>之间的换行和空格，是个文本节点
6 lastElementChild：获取某一节点下子一级 最后一个元素节点
- 只获取一个节点，不在是伪数组
- 获取的是最后一个 元素节点
- 最后一个元素节点是
<p>world</p>，是一个元素节点
7 previousSibling：获取某一个节点的 上一个兄弟节点
- 只获取一个节点，不在是伪数组
- 获取的是
id="b"这个li的上一个兄弟节点 - 因为
id="b"的上一个节点，是两个li标签之间的换行和空格，所以是一个文本节点
8 previousElementSibling：获取某一个节点的 上一个元素节点
- 只获取一个节点，不在是伪数组
- 获取的是
id="b"这个li的上一个兄弟元素节点 - 因为
id="b"的上一个兄弟元素节点就是id="a"的li，是一个元素节点
9 nextSibling：获取某一个节点的 下一个兄弟节点
- 只获取一个节点，不在是伪数组
- 获取的是
id="b"这个li的下一个兄弟节点 - 因为
id="b"的下一个节点，是两个li标签之间的换行和空格，所以是一个文本节点
10 nextElementSibling：获取某一个节点的 下一个元素节点
- 只获取一个节点，不在是伪数组
- 获取的是
id="b"这个li的下一个兄弟元素节点 - 因为
id="b"的下一个兄弟元素节点就是id="c"的li，是一个元素节点
11 parentNode：获取某一个节点的 父节点
- 只获取一个节点，不在是伪数组
- 获取的是当前这个
li的父元素节点 - 因为这个
li的父亲就是ul，所以获取到的就是ul，是一个元素节点
12 parentElement：获取某一个节点的 父元素节点
13 attributes：获取某一个 元素节点 的所有 属性节点
- 获取的是一组数据，是该元素的所有属性，也是一个伪数组
- 这个
li有三个属性，id/a/test三个，所以就获取到了这三个
7. 节点属性
-
我们已经知道节点会分成很多种，而且我们也能获取到各种不同的节点
-
接下来我们就来聊一些各种节点之间属性的区别
1.nodeType
nodeType：获取节点的节点类型，用数字表示nodeType === 1就表示该节点是一个 元素节点nodeType === 2就表示该节点是一个 属性节点nodeType === 3就表示该节点是一个 注释节点
2.nodeName
nodeName：获取节点的节点名称- 元素节点的
nodeName就是 大写标签名 - 属性节点的
nodeName就是 属性名 - 文本节点的
nodeName都是 #text
- 元素节点的
3.nodeValue
nodeValue： 获取节点的值- 元素节点没有
nodeValue - 属性节点的
nodeValue就是 属性值 - 文本节点的
nodeValue就是 文本内容
- 元素节点没有
汇总
| - | nodeType | nodeName | nodeValue |
|---|---|---|---|
| 元素节点 | 1 | 大写标签名 | null |
| 属性节点 | 2 | 属性名 | 属性值 |
| 文本节点 | 3 | #text | 文本内容 |
8. 操作 DOM 节点
- 我们所说的操作无非就是 增删改查（CRUD）
- 创建一个节点（因为向页面中增加之前，我们需要先创建一个节点出来）
- 向页面中增加一个节点
- 删除页面中的某一个节点
- 修改页面中的某一个节点
- 获取页面中的某一个节点
8-1 创建一个节点
createElement：用于创建一个元素节点
createTextNode：用于创建一个文本节点
8-2 向页面中加入一个节点
insertBefore：向某一个节点前插入一个节点
- 语法：
父节点.insertBefore(要插入的节点，插入在哪一个节点的前面)
appendChild：是向一个元素节点的末尾追加一个节点
- 语法：
父节点.appendChild(要插入的子节点)
8-3 删除页面中的某一个节点
removeChild：移除某一节点下的某一个节点
- 语法：
父节点.removeChild(要移除的字节点)
remove：删除自己以及后代
8-4 修改页面中的某一个节点
replaceChild：将页面中的某一个节点替换掉
- 语法：
父节点.replaceChild(新节点，旧节点)
8-5 克隆节点()
false 不克隆后代 （默认） true 克隆后代
- 案例 动态删除
（三）.懒加载及相关
9. 获取元素尺寸
- 就是获取元素的 "占地面积"
1.offsetWith 和 offsetHeight
offsetWidth： 获取的是元素 内容 + padding + border 的宽度offsetHeight： 获取的是元素 内容 + padding + border 的高度
2.clientWidth 和 clientHeight
-
clientWidth： 获取的是元素 内容 + padding 的宽度 -
clientHeight： 获取的是元素 内容 + padding 的高度
注意:
- 获取到的尺寸是没有单位的数字
- 当元素在页面中不占位置的时候， 获取到的是 0
display: none;元素在页面不占位visibility: hidden;元素在页面占位
10. 获取元素的偏移量
- 就是元素在页面上相对于参考父级的 左边 和 上边 的距离
offsetParent
- 获取元素的偏移量参考父级
- 其实就是假设你要给一个元素 绝对定位 的时候
- 它是根据谁来进行定位的
- 那么这个元素的偏移量参考父级就是谁
offsetLeft 和 offsetTop
- 获取的是元左边的偏移量和上边的偏移量
offsetLeft： 该元素相对于参考父级的左侧偏移量offsetTop： 该元素相对于参考父级的上侧偏移量
clientLeft和clientTop
- 内容距离自己左上角的距离
11. 获取浏览器窗口尺寸
-
我们之前学过一个
innerWidth和innerHeight -
他们获取到的是窗口包含滚动条的尺寸
-
下面我们学习两个不包含滚动条的尺寸获取方式
-
document.documentElement.clientWidth： 可视窗口的宽度 -
document.documentElement.clientHeight： 可视窗口的高度
