2021.11.17--10.DOM对象进阶

10.1 HTML属性操作（对象属性）
（1）获取HTML属性值
获取HTML元素的属性值，一般都是通过属性名，来找到该属性对应的值。
（2）设置HTML属性值
tips: 对于自定义属性的值设置，我们也只能用setAttribute()方法来实现。同样，使用obj.attr（也就是对象属性方式）是无法实现的，只能用getAttribute(“attr”)（也就是对象方法方式）来实现。【对于自定义属性的值设置，只能用setAttribute或者getAttribute】

最后，对于操作HTML属性的两种方式，我们来总结一下。
（1）“对象属性方式”和“对象方法方式”，这两种方式都不仅可以操作静态HTML的属性，也可以操作动态DOM的属性。
（2）只有“对象方法方式”才可以操作自定义属性。

10.3 CSS属性操作
（1）获取CSS属性值。

getComputedStyle(obj).attr

（2）设置CSS属性值。
1．style对象：使用style对象来设置一个CSS属性的值，其实就是在元素的style属性来添加样式，这个设置的是“行内样式”。

obj.style.attr = "值";

obj.style.attr等价于obj.style[“attr”]
attr表示CSS属性名。我们要特别注意一点，这里的属性名使用的是“骆驼峰型”的CSS属性名。何为“骆驼峰型”呢？举个例子，font-size应该写成fontSize，border-bottom-width应该写成borderBottomWidth（有没有感觉像骆驼峰），以此类推。
Tip: obj.style.attr只可以获取元素style属性中设置的CSS属性，对于内部样式或者外部样式，它是没办法获取的。请看下面例子。
2．cssText属性
在JavaScript中，我们可以使用cssText属性来同时设置多个CSS属性，这也是在元素的style属性来添加的

oDiv.style.cssText = "width:100px;height:100px;border:1px solid gray;";

在实际开发的时候，如果想要为一个元素同时设置多个CSS属性，我们很少使用cssText来实现，更倾向于使用操作HTML属性的方式给元素加上一个class属性值，从而把样式整体给元素添加上。这个技巧非常棒，在实际开发中经常用到。

tips: getComputedStyle()，从名字上就可以看出来：get computed style（获取计算后的样式）。所谓“计算后的样式”，即不管是内部样式，还是行内样式，最终获取的是根据CSS优先级计算后的结果。CSS优先级是相当重要的，也是属于CSS进阶的技巧，我们在CSS进阶教程中详细介绍。

常见问题：

1．使用style对象来设置样式时，为什么我们不能使用background-color这种写法，而必须使用backgroundColor”这种骆驼峰型写法呢？

大家别忘了，在obj.style.backgroundColor中，backgroundColor其实也是一个变量，变量中是不允许出现中划线的，因为中划线在JavaScript中是减号的意思。

10.4 DOM遍历
（1）查找父元素

obj.parentNode

（2）查找子元素。
在JavaScript中，我们可以使用以下两组方式来获得父元素中的所有子元素或某个子元素。
（1）childNodes、firstChild、lastChild
（2）children、firstElementChild、lastElementChild
childNodes获取的是所有的子节点。注意，这个子节点是包括元素节点以及文本节点的。而children获取的是所有的元素节点，不包括文本节点。
tips: JavaScript为了让我们可以快速开发，提供了新的方法，也就是只针对元素节点的操作属性：children、firstElementChild、lastElementChild。
（3）查找兄弟元素。
在JavaScript中，我们可以使用以下2组方式来获得兄弟元素。
（1）previousSibling、nextSibling
（2）previousElementSibling、nextElementSibling
tips: previousSibling查找前一个兄弟节点，nextSibling查找后一个兄弟节点。previousElementSibling查找前一个兄弟元素节点，nextElementSibling查找后一个兄弟元素节点。跟查找子元素的两组方式一样，previousSibling和nextSibling查找出来的可能是文本节点（一般是空白节点），因此如果你希望只操作元素节点，建议使用previousElementSibling和nextElementSibling

10.5 innerHTML和innerText
innerHTML属性很方便地获取和设置一个元素的“内部元素”，也可以使用innerText属性获取和设置一个元素的“内部文本”。

tips: innerHTML获取的是元素内部所有的内容，而innerText获取的仅仅是文本内容。