今天完成的事情：

1、首先今天就昨天遇到的一些问题查阅了很多资料，写了不少demo。

2、今天主要还是深入学习js任务一，基本上完成了js任务一，并完成了任务二的psd下载和切图工作。

3、通过官网上的一些师兄给的建议，今天查阅了很多有关dom获取方法的文章和资料，也动手写了一些demo，算是给任务二打个基础吧。

4、通过查阅相关文章总结了以下几种获取dom的方法：

①通过ID获取

②通过name属性

③通过标签名

④通过类名

⑤获取html的方法

⑥获取body的方法

⑦通过选择器获取一个元素

⑧通过选择器获取一组元素

以下是js任务一的js代码：

var flag = true;
var timer;
function choiceCube(){
    var array1 = [];
    for(var i = 0; i < 9; i++){
        array1[i] = i ;
    }
    var array2 = [];
    for(var i = 9; i > 0;){
        var randomNumber = Math.floor(Math.random() * i);
        array2.push(array1[randomNumber]);
        array1[randomNumber] = array1[--i];
    }
    var cube1 = array2[0];
    var cube2 = array2[1];
    var cube3 = array2[3];
    function getColor() {
        var r = Math.floor(Math.random() * 256);
        var g = Math.floor(Math.random() * 256);
        var b = Math.floor(Math.random() * 256);
        return "rgb(" + r + "," + g + "," + b + ")";
    }
    var x = document.getElementsByClassName("cube");
    x[cube1].style.backgroundColor = getColor();
    x[cube2].style.backgroundColor = getColor();
    x[cube3].style.backgroundColor = getColor();
}
function resetColor() {
    var x = document.getElementsByClassName("cube");
    for(i = 0; i < 9; i++){
        x[i].style.backgroundColor = "#fea500";
    }
}
function loopBlink() {
    setTimeout("choiceCube()",0);
    setTimeout("resetColor()",1000);
}
function startBlink() {
    if (flag){
        timer = setInterval("loopBlink()",1000);
        flag = false;
    }
}
function stopBlink() {
    clearInterval(timer);
    flag = true;
}

以下是效果图：

明天计划的事情：

1、明天计划开始做js任务二，注重细节，遇到问题多查多问。

遇到的问题：

1、在随机选取三个格子后清除上一轮的随机颜色的操作室遇到了瓶颈，查阅了很多相关资料，最后通过一一尝试，和写demo对比出了相对合理的方案。

收获：

今天在查阅关于获取dom元素相关资料的时候发现了一篇不错的文章，算是个不小的收获吧，值得收藏。

详解JS获取HTML DOM元素的8种方法

什么是HTML DOM

文档对象模型（Document Object Model），是W3C组织推荐的处理可扩展置标语言的标准编程接口。简单理解就是HTML DOM 是关于如何获取、修改、添加或删除 HTML 元素的标准。我们用JavaScript对网页进行的所有操作都是通过DOM进行的。

这篇文章不做深入研究，只把各种用法和坑做一个总结。

JS获取DOM元素的方法（8种）

1. 通过ID获取（getElementById）
2. 通过name属性（getElementsByName）
3. 通过标签名（getElementsByTagName）
4. 通过类名（getElementsByClassName）
5. 获取html的方法（document.documentElement）
6. 获取body的方法（document.body）
7. 通过选择器获取一个元素（querySelector）
8. 通过选择器获取一组元素（querySelectorAll）
   

我们开始逐一讲解。

1.通过ID获取（getElementById）

用法：

1.上下文必须是document。

2.必须传参数，参数是string类型，是获取元素的id。

3.返回值只获取到一个元素，没有找到返回null。

坑~~坑坑~坑坑~坑坑~：

1.如果有多个id存在只获取第一个，也就是最先出现的哪一个。一般情况也不会出现同一个ID在页面上出现两次。

2.在IE6、7中会把表单元素的name当做ID值获取到。所以大家在定义这些的时候一定要注意。

3.在IE6、7中不区分大小写。

4.可以直接用元素的ID代表这个元素。（项目中不推荐）

5.通过ID获取元素的上下文只能是document。为什么上下文必须是document呢，因为getElementById这个方法在Document类的原型上，也许你没有听懂，那就继续往下看。

2.通过name属性（getElementsByName）

用法：

1.上下文必须是document。

2.必须传参数，参数是是获取元素的name属性。

3.返回值是一个类数组，没有找到返回空数组。

坑~~坑坑~坑坑~坑坑~：

1.获取的结果是一个类数组，不是数组。

2.在IE浏览器中只能获取到表单元素，当然我们一般也只用它获取表单元素，从ie10开始可以不只是表单元素。

3.上下文只能是document，原因同getElementById。

3.通过标签名（getElementsByTagName）

用法：

1.上下文可以是document，也可以是一个元素，注意这个元素一定要存在。

2.参数是是获取元素的标签名属性，不区分大小写。

3.返回值是一个类数组，没有找到返回空数组。

坑~~坑坑~坑坑~坑坑~：

1.获取的结果是一个类数组。

2.上下文不必须是document了，因为getElementsByTagName方法在不仅在Document类的原型上也在Element类的原型上，所以document和元素都可以使用这个方法。如果还不懂我在文章最后会再解释一下。

4.通过类名（getElementsByClassName）

用法（和getElementsByTagName类似）：

1.上下文可以是document，也可以是一个元素。

2.参数是元素的类名。

3.返回值是一个类数组，没有找到返回空数组。

坑~~坑坑~坑坑~坑坑~：

1.获取的结果是一个类数组。

2.IE8以及以前版本不兼容。真可惜这么好用的方法不兼容。

5.获取html的方法（document.documentElement）

document.documentElement是专门获取html这个标签的。

6.获取body的方法（document.body）

document.body是专门获取body这个标签的。

7.通过选择器获取一个元素（querySelector）

用法：

1.上下文可以是document，也可以是一个元素。

2.参数是选择器，如："div .className"。

3.返回值只获取到一个元素。

坑~~坑坑~坑坑~坑坑~：

这个方法不兼容IE7以及以前版本，现在似乎也没有考虑IE7兼容的公司了。

8.通过选择器获取一组元素（querySelectorAll）

用法同querySelector类似：

1.上下文可以是document，也可以是一个元素。

2.参数是选择器，如："div .className"。

3.返回值是一个类数组。

坑~~坑坑~坑坑~坑坑~：

同querySelector，不兼容IE7。

使用原生JS获取DOM元素的8个方法讲完了，接下来在讲一下为什么有的方法只能在document上使用。

拿div举栗子，div是HTMLDivElement类的一个实例，document是HTMLDocument 的实例。

他们的继承关系：

HTMLDivElement > HTMLElement > Element > Node > EventTarget

HTMLDocument > Document > Node > EventTarget

我们都知道子类继承父类，子类就可以使用父类的属性和方法。

他们相同的继承关系是Node和EventTarget，也就是说他们都可以使用Node和EventTarget上的方法。

如Node上的nodeName、parentNode等，和EventTarget上的addEventListener等。

getElementById只在Document类的原型上，HTMLDivElement 没有继承Document类，所以div不能使用getElementById方法。
getElementsByTagName即在Document类的原型上也在Element类的原型上，所以div和document都可以使用getElementsByTagName方法。

其它同理。