【JS实战01】js实现背景颜色改变

利用原生js的方式，我们只需要熟练掌握DOM树相关知识点，并通过方法选择到相关节点，最后修改样式即可。

一 知识点

访问指定节点

1. 使用getElement 系列方法访问指定节点

三种方法：

1. getElementByld：是 HTML DOM 提供的查找方法，它是按 id 属性查找的。
2. getElementsByName（)：是HTML DOM提供的查找方法，它是按name 属性查找的，由于一个文档中可能会有多个同名节点(如复选框、单选按钮,所以该方法返回的是元素数组。
3. getElementsByTagName （）：是 Core DOM 提供的查找方法,它是按标签名
4. TagName 查找的，由于一个文档中可能会有多个同类型的标签节点(如图片组、文本输人框），所以返回元素数组。

2使用querySelector()、querySelectorAll（）方法访问节点

querySelector()方法仅仅返回匹配指定选择器的第一个元素。如果你需要返回所有的元素，请使用 querySelectorAll() 方法替代。此题，只有一个表单控件button按钮，和一个div盒子。所以使用querySelector（）方法。

二 添加事件

事件监听器

1 为节点添加侦听时间时，我们通常使用:EventTarget.addEventListener()的方式

具体原因：

备注： 推荐使用 addEventListener() 来注册一个事件监听器，理由如下：

• 它允许为一个事件添加多个监听器。特别是对库、JavaScript 模块和其他需要兼容第三方库/插件的代码来说，这一功能很有用。
• 相比于 onXYZ 属性绑定来说，它提供了一种更精细的手段来控制 listener 的触发阶段。（即可以选择捕获或者冒泡）。
• 它对任何事件都有效，而不仅仅是 HTML 或 SVG 元素。

此问题，可以翻阅我博客js专栏，有详细介绍

2 代码

• 下图展示了通过修改类名的方式修改样式
• EventTarget.style.backgroundColor解决
• 或者通过jQuery解决
• 等等还有很多种方法

 css样式部分                                                        JS部分