DOM 进阶

HTML 属性操作（对象属性）

在 JavaScript 中，有两种操作 HTML 元素属性的方式：一种是使用“对象属性”，另外一种是使用“对象方法”。

不管是用“对象属性”的方式，还是用“对象方法”的方式，都涉及以下 2 种操作：

• 获取 HTML 属性值
• 设置 HTML 属性值

元素操作（第 09 章），准确地说，操作的是“元素节点”；属性操作（第 10 章），准确地说，操作的是“属性节点”。

• HTML 属性操作（对象属性）
  • obj.attr，无法获取自定义属性值
  • obj.attr = "值"，无法设定自定义属性的值

HTML 属性操作（对象方法）

• HTML 属性操作（对象方法）
  • getAttribute("attr")，获取自定义属性值
  • setAttribute("attr", "值")，设定自定义属性的值的
  • removeAttribute("attr")
  • hasAttribute("atrr")，返回一个布尔值：如果包含该属性，会返回 true；如果不包含该属性，会返回 false

最后，对于操作 HTML 属性的两种方式，总结如下：

• “对象属性方式”和“对象方法方式”，这两种方式都可以操作静态 HTML 的属性，也可以操作动态 DOM 的属性
• 只有“对象方法方式”才可以操作自定义属性

CSS 属性操作

CSS 属性操作，指的是使用 JavaScript 来操作一个元素的 CSS 样式。在 JavaScript 中，CSS 属性操作同样有两种：

• 获取 CSS 属性值
  • getComputedStyle(obj).attr
• 设置 CSS 属性值
  • obj.style.attr="值"，行内样式
  • obj.style.cssText="值"，行内样式，cssText 的值是一个字符串，使用原生 CSS 写法

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

DOM 遍历

DOM 遍历，也就是查找元素，主要以“当前所选元素”为基点，然后查找它的父元素、子元素或者兄弟元素。

• DOM 遍历（查找父、子、兄弟）：
  • obj.parentNode：获得某个元素的父元素
  • obj.childNodes、obj.firstChild、obj.lastChild：childNodes 获取的是所有的子节点，包括元素节点以及文本节点
  • obj.children、obj.firstElementChild、obj.lastElementChild：只针对元素节点的操作属性
  • obj.previousSibling、obj.nextSibling：查找前、后一个兄弟节点
  • obj.previousElementSibling、obj.nextElementSibling：查找前、后一个兄弟元素节点

innerHTML 和 innerText

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

• obj.innerHTML：获取的是元素内部所有的内容
• obj.innerText：获取的仅仅是文本内容