DOM对象的深入理解

DOM是啥？

JS由三部分组成：

• ECMAScript
• DOM(Document Object Model): 文档对象模型，简单来说，就是提供一系列的属性和方法，让我们能够操作页面中的DOM元素(可以理解为HTML标签)。
• BOM(Browser Object Model): 浏览器对象模型

如何获取DOM元素？

这里先简单列举两个，用以探究DOM内部结构。

语法	含义
document.getElementById(“newsItem”)	通过元素的id获取一个元素对象
父元素.getElementsByTagName(“li”)	通过元素的标签名获取一组元素对象

得到的结果分别是什么呢？

通过id获取一个元素对象

通过console.log()输出的信息：

通过console.dir()输出的详细信息：(太长只截图了前面的一部分)

哈哈哈好了，这两张图都不重要，重要的是，获取到的内容包含许多键值对！ 说明——基于JS获取到的DOM元素本质上是一个对象！这些键值对就是DOM对象中自带的属性和方法。该对象保存在堆内存中。

值得一提的是，在这些键值对中，有许多属性的值——同样也是一个对象，比如style（敲黑板了！等会儿要用到！）

用堆栈内存图表示就是下面酱紫的：

注意：操作DOM对象与操作普通对象的方法一样。可以读取或设置对象中的属性和方法。在操作DOM对象的style属性时，影响的是元素的行内样式，也就是在元素标签上设置的样式，通过其他方式设置的样式均不会被这种方式读取和改写。

思考题：以下三种方式哪些可以将box元素背景颜色修改为红色？

box.style.backgroudColor = "red"                    √

let boxSty = box.style;
boxSty.backgroundColor = "red";                     √

let value = box.style.backgroundColor ;
value = "red";                                      ×

① 第一种修改方式首先通过栈内存中box对应的地址找到DOM元素对象，然后通过style属性值(地址)找到style对应的对象，最后找到样式对象中的backgroundColor属性，并将其值修改为红色。

② 第二种修改方式，将style属性对应的对象赋值给一个变量boxSty，然后通过该变量访问style对象中的backgroundColor属性，并将其值修改为红色。

③ 第三种修改方式，将DOM对象中——style属性所对应的对象中——的backgroundColor属性值赋值给了value变量，该value变量保存在栈内存中，修改时也是直接修改栈内存中value变量保存的值，并不会修改堆内存中backgroundColor属性对应的值。

通过标签名获取一组元素对象

首先还是通过输出的方式get一下结果是什么东东：

我们仿佛看到了一个数组~

没错，通过标签名获取一组对象的结果，就是得到一个类数组对象，它具有像数组一样的属性名(数字索引)和length属性，我们可以像操作数组一样操作它。每一个类数组元素都是一个具有内置属性和方法的对象。

注意：通过getElementsByTagName获取到的是一组对象，哪怕只有一个对象或没有，返回的也是一个类数组。

应用

通过JS实现列表的隔行变色

let itemList = newsItem.getElementsByTagName("li");     // 根据标签名获取一组对象
for(var i = 0; i < itemList.length; i++){         // 遍历这个类数组
	var itemLi = itemList[i];        // 当前对象
	if(i % 2){
		itemLi .style.color = "red";       // i为偶数，因此是奇数行，设置为红色
	}else{
		itemLi .style.color = "green";   // i为奇数，因此是偶数行，设置为绿色
	}
}

ps：神奇的配色