DOM是什么？
DOM的全称叫Document Object Model（文档对象模型）。他提供了js一个能力：获取网页上的元素并且操作它们。
复习一下对象的操作
对象中的方法怎么调用
对象.方法名()
对象中的方法怎么变成新的方法
对象.方法名 = function () {}
对象中的属性怎么使用
console.log(对象.属性名)
对象中的属性怎么覆盖变成新的值
obj.属性名 = 新的值
为什么我们要复习对象的用法，因为DOM皆为对象。所谓操作元素，就是在调用对象的方法和属性，覆盖原有的属性值。
DOM树
我们把一个网页抽象为DOM树，在DOM树上的元素我们成为DOM元素，都是有互相之间的关系。
如何使用DOM
获取DOM
在之前的方法中，获取DOM需要用不同的方法
document.getElementById('id值') // 单个DOM对象
document.getElementsByName('name属性') // 下面三个全是集合
document.getElementsByTagName('标签名')
document.getElementsByClassName('class值')
这些方法在现在不推荐使用，不好用。现在一般使用下面的方法
document.querySelector('选择器') // 得到的是第一个DOM对象
document.querySelectorAll("选择器") // 得到符合条件的所有的DOM对象的集合
在控制台上打印获取到的DOM，展示出来的是对应元素的标签
但是实际上，这个东西是个对象。怎么样才能看到对应的对象中的属性和方法呢？？？
console.log([DOM])
DOM对象就是一个对象，里面包含了属性和方法。
改变网页元素的内容
- innerHTML
- innerText
既然这两个是DOM的属性，那么是不是可以通过DOM.innerText获取到网页上的内容。同理，我们可以通过DOM.innerText = "新的值"来修改网页上的内容
let 变量名 = document.querySelector("选择器")
console.log(变量名.innerText) // 获取到对应元素上的内容
变量名.innerText = "值" // 设置DOM对象上的内容，因为这个DOM对象和网页有关联，所以网页上对应的内容改变。
innerText和innerHTML的区别
在获取内容过程，前者只会获取到文本，后者可以获取到内部的标签。
在设置内容过程，前者会把文本中的标签直接展示在页面上，后者会渲染称真实的标签。
注意！！！！！！！！！！！！！！！！！！！！！！！！！不是受我们信任的带HTML标签的字符串，不要用innerHTML。innerHTML会有XSS攻击风险
除了inner还是有outer
- outerHTML
- outerText
不常用，和前者的区别在于，带的有父元素的标签。
表单元素中的内容
- value
value属性表示表单中的值
let input = document.querySelector('input')
console.log(input.value) // 获取到最初的value值
input.value = "新的value值" // 将input中的内容设置成新的值
设置value的操作，一般只在可输入框中进行设置。比如：把输入框中的内容清空
let input = document.querySelector('input')
input.value = "" // 清空输入框
textarea元素虽然是个双标签，同时内容也是出现在标签中，但是获取到对应的值还是要用.value获取。
属性
HTML属性分为两种：原生属性和自定义属性
DOM对象会对HTML中原生属性有对应的映射，如果原生属性名不是关键字或者保留字，则直接用对应属性名，例如id
DOM.id // 获取到对应元素的id值 DOM.id = "新的值" // html的id属性就会变成新的值
如果原生属性是关键字或者保留字，则会提供新的名字进行映射，例如：class变成了className
DOM.className // 获取到对应的元素的class值 DOM.className = "新的值" // 设置新的class
例如：label的 for 变成了 htmlFor
当我们对这些DOM对象中的属性进行修改时，就会改变HTML上的原属性。
DOM对象对于自定义属性不会使其出现在DOM对象（在DOM对象上，没有自定义属性的映射）。我们就需要借助想关的方法
- getAttribute(属性名) 获取对应的属性的属性值
- setAttribute(属性名, 值) 添加/修改对应的属性的值
- removeAttribute(属性名) 删除对应的属性
let dom = document.querySelector("选择器")
dom.getAttribute("x")
dom.setAttribute("x", 10)
dom.removeAttribute('x')
如果我们直接给DOM上添加要给属性值，这个值会不会映射到HTML上。
DOM.aaa = "值" // 这个属性就是DOM对象上的属性，和HTML无关
- html上有的原生属性，在DOM也会有对应的属性名
- 原生属性在js是关键子或者保留字，DOM中有替代属性名
- html上有自定义属性，DOM可以通过getAttribute获取
- 给DOM添加一个随意的属性，只能在JS中获取，HTML上没有
样式
我们css可以设置HTML的样式，我们可以用js来设置CSS，依靠js对样式的抽象的对象dom.style
dom.style中包含了对应dom的所有的css样式，是一个对象。
- 复合属性例如background-color在js中要用驼峰命名 backgroundColor
利用DOM.style只能获取到行内的样式，设置也只能设置到行内。
设置到行内无所谓，但是因为写css的时候不建议写到行内，所以获取操作在大部分情况下，使用这个操作不合适。
如果我们想要用这个属性获取样式，需要确保已经用js设置过了。
设置样式
dom.style.样式名 = "值"
获取样式
dom.style.样式名 // 不一定能获取到，得看行内有没有对应的样式
既然上面的操作不能获取到我们想要的样式，js提供了一个全局方法叫getComputedStyle
获取样式的操作不常用，最多用的获取宽高，获取宽高我们会用其他的属性，不会用样式。
getComputedStyle(DOM对象) // 计算后的样式对象
let 变量名 = getComputedStyle(dom) console.log(变量名.css属性名)
getComputedStyle可以用来获取伪元素样式
let 变量 = getComputedStyle(dom, 'after') // 变量就是一个对象，after伪元素所有的样式 after可以换成before
我们能不能封装一个函数getStyle，用来获取某个元素的某个样式
function getStyle (ele, style) {
return getComputedStyle(ele)[style]
}
未来我们会学习很多的属性用来获取特定的css值。
可以同时设置多个样式的操作
cssText
通过DOM.style.cssText进行获取和设置操作，它用来获取到style中的文本。
<div style="width: 200px; height: 200px;"></div>
dom.style.cssText // width: 200px; height: 200px; dom.style.cssText = "height: 300px;" // 直接把所有的style都给覆盖 // 如果要在原有基础上增加对应的样式，需要使用 += dom.style.cssText += "新的样式"
如果有相同属性，则新属性会覆盖旧属性。
类名的设置和获取
如果想要获取到所有的类名，需要通过dom.className通过这样的方式获取到className之后，我们也可以设置
console.log(dom.className) // 对应元素上所有的类名 dom.className = "类名" // 把元素之前类名全部删除，设置为新的类名 // 如果不想覆盖 dom.className += " 类名"
但是这种操作很容易出现问题所以在后续js更新中，推出了新的方法dom.classList
- add
- remove
- toggle
- replace
- contains
如果我们想要添加相关的类名
dom.classList.add('类名', "类名2", "类名n")
会依次给对应的元素上添加对应的类名。
如果我们想要移除相关类名
dom.classList.remove('类名', "类名2", "类名n")
会删除对应元素上对应的类名
切换类名有无
当一个元素上有对应的类名时，就删除，如果没有，就添加
dom.classList.toggle("类名")
替换类名
把旧的类名替换为新的类名
dom.classList.replace("已有的类名", "新的类名")
有没有类名
用于判断元素中有没有某个类名，一般在判断条件中用
dom.classList.contains("类名") // true 或者 false
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
