DOM操作一

DOM方法：

1. getElementsByClassName() //方法返回文档中所有指定类名的元素集合。
2. getElementsByName() //方法可返回带有指定名称的对象的集合。
3. getElementsByTagName()// 方法返回带有指定名称的所有元素的 NodeList。
4. getElementById()//方法返回id的名称。
5. children //方法返回返回被选元素的所有直接子元素。
6. parentElement//查找父级元素。
7. nextElementSibling// 属性返回指定元素之后的下一个兄弟元素（相同节点树层中的下一个元素节点）。
8. previousElementSibling//属性返回指定元素的前一个兄弟元素（相同节点树层中的前一个元素节点）。

JavaScript Element lastElementChild 属性：

利用循环在页面中循环出五行五列的表格如下：


利用 Element lastElementChild 属性开始操作如下：

1.利用firstElementChild属性让table下的第一行背景色变为红色

2.如果我想让第一排第一个表格背景色为红色那么只需要在firstElementChild后面再加一个firstElementChild代码如下:（代表第一排第一个）

效果:

3.同样的我利用lastElementChild让第一排最后一个表格背景为蓝色代码效果如下：


以此类推最后一排第一个表格和最后一个表格同样能完成。

**4.第一个和最后一个JavaScript Element lastElementChild属性我们知道之后
还有两个经常用到的就是previousElementSibling和nextElementSibling向上和后一个
演示如下:

previousElementSibling属性:（最后一排向上一排第一个表格背景为天蓝色）

效果:

nextElementSibling属性:(最后一排的上衣排第一个表格的后一个表格)

效果:

JavaScript Element lastElementChild属性完成。

用onclick事件让所有表格变色点击哪个表格哪个变色

1.我们需要给文章的开头的代码进行改进（做一个onclick事件然后循环让整个表格表成红色然后点击哪个表格表格变蓝）

效果:

最后（这段代码最后写可以减少页面加载花销）：