JavaScript学习（DOM对象）（一）

常见概念

JavaScript的组成

JavaScript基础分为三个部分：

• ECMAScript：JavaScript的语法标准，包括变量、表达式。运算符、函数、if语句等。
• DOM：文档对象模型（Document object Model），操作网页上的元素API。比如让盒子移动，变色，轮播图等。
• BOM：浏览器对象模型，操作浏览器部分功能的API。比如让浏览器自动滚动。

节点

节点（Node）：构成HTML网页的最基本单元。网页中的每一部分都可以称为是一个节点，比如：html标签、属性、文本、注释、整个文档都是一个节点。
虽然都是节点，但是实际上他们的具体类型是不同的。常见节点分为四类：

• 文档节点（文档）：整个HTML文档，整个HTML文档就是一个文档节点。
• 元素节点（标签）：HTML标签。
• 属性节点（属性）：元素的属性。
• 文本节点（文本）：HTML标签中的文本内容（包括标签之前的空格、换行）。
  节点的类型不同，属性和方法也都不尽相同。所有的节点都是Object。

什么是DOM

DOM：Document Object Model，文本对象模型。DOM为文档提供例如结构化表示，并定义了如何通过脚本来访问文档结构。目的是其实就是为了能让js操作html元素而定制的一个规范。
DOM就是由节点组成的。

解析过程：HTML加载完毕，渲染引擎会在内存中把HTML文档，生成一个DOM树，getElementByld是获取DOM上的元素节点。然后操作的时候修改的是该元素的属性。

DOM树：（一切都是节点）

DOM的数据结构如下：

上图可知：在HTML当中，一切都是节点（非常重要）。
整个HTML文档就是一个文档节点。所有的节点都是object。

DOM可以做什么

• 找对象（元素节点）
• 设置元素的属性
• 设置元素的样式
• 动态创建和删除元素
• 事件的触发响应：事件源、事件、事件的驱动程序。

元素节点的获取

DOM节点的获取方式其实就是获取事件源的方式。
想要操作元素节点，必须首先要找到该节点。有三种方式可以获取DOM节点：

es5之前获取元素

	<h1>helloworld1</h1>
	<h1>helloworld2</h1>
	<script type="text/javascript">
	//es5（2009年发布的）之前获取元素获取多个元素
	//通过标签名称获取多个元素
	var h1s = document.getElementsByTagName('h1')
	console.log(h1s)
	
	var ann= Array.from(h1s)//将h1s转为数组形式
	console.log(ann)
			
	h1s.__proto__.__proto__ = Array.prototype//将数组原型添加到h1s中去
	console.log(h1s)
	</script>
			

打印结果：

es5之后获取元素用documemt.querySelector()
举例：

原图如上，通过获取元素改变上图导航栏的背景颜色

通过上图可以看出导航栏的名称为 .site-topbar，因此改变背景颜色方式如下：

页面效果：
改变背景颜色成功。
但是也会出现其他情况，比如：改变“小米秒杀”字样，颜色改为 red


该字样的class为title

页面效果：
修改不成功
但是
这个地方被修改为红色，检查 “手机 电话卡”字样的名称，发现这个地方也叫title

当出现名字重复的时候就需要获取元素时更加精细，获取元素的代码应该换为：

此时页面显示 “小米秒杀” 字样为红色，修改成功。