百度换肤一个小时，零基础入门，看完这篇30行代码 教你实现百度换肤！

百度换肤效果

零基础入门，只要有兴趣，20分钟教你学会百度换肤效果。没错，只需要20行代码就能搞。

废话少说，直接上效果：

先了解一下html节点对象

DOM的树形结构（节点树） html中的所有标签，文本，空格都可以叫做节点对象。

我们可以通过DOM的选择器 来操作节点：

获取节点对象

1.通过标签id 获取节点

var obj = document.getElementById("id名称")

描 述：获取网页指定id名字的元素，返回一个对象语 法：var obj = document.getElementById("id名称")参 数：id名称（注：需要加引号）返回值：对象，对象的属性就是HTML标签的属性

2.通过标签名称获取节点

var obj = document.getElementsByTagName("标签名称")

功 能：获取网站指定标签名称的元素语 法：var obj = document.getElementsByTagName("标签名称")参 数：标签名称（注：需要加引号）返回值：返回一个集合（数组），集合中每个元素都是一个单独标签对象

3.通过标签name获取节点

var obj = document.getElementsByName("标签name名称")

功 能：通过标签的name值获取元素语 法：var obj = document.getElementsByName("标签name名称")参 数：标签的name名称（注：需要加引号）返回值：返回值是数组，通常用来获取有name的input的值

4.通过标签类名获取节点

var obj = document.getElementsByClassName() ("标签的class属性名称")

功 能：通过class名获取元素语 法：var obj = document.getElementsByClassName() ("标签的class属性名称")参 数：标签的class属性名称（注：需要加引号）返回值：返回值是数组

注： 不是所有标签都有name值； 在低版本的浏览器中，getElementsByName和getElementsByClassName有兼容性

ES5选择器：强大到超乎想象，支持IE8+。ECMAScript借鉴了jQuery选择器的

document.querySelector(); //返回匹配到的第一个元素

document.querySelectorAll(); //返回一个数组，哪怕只有一个元素

可以直接填写,我们需要找的标签名,类名,id名称

给事件绑定点击事件

直接给节点绑定事件

/获取节点对象节点对象.onclick = function(){}

通过监听器给节点绑定点击事件

/获取节点对象节点对象.addEventListener（function（）{}）

了解的差不多了 我们可以从这里开始写我们的百度换肤具体代码：

先再一个div盒子中存放五张我们需要的图片: