现在聊一下JavaScript中的DOM操作，简单是说就是通过js操作页面的行为。本篇主要聊如何获得元素以及一些定义。
简介
DOM ( Document Object Model) : 文档对象模型，是W3C组织推荐处理可扩展语言（HTML或者XML）的标准编程接口。
W3C已经定义了一系列的DOM接口，通过这些DOM接口可以修改网页的内容，结构和样式。
DOM树结构如下：
- 文档： 一个页面就是一个文档，而再DOM中通过document表示这个文档。
- 元素： 页面中所有的标签都是元素，DOM中使用element表示元素。
- 节点： 网页中所有的内容都是节点（标签，属性，文本，注释等等），DOM中使用node表示。
补充：DOM中以上内容都被看做是对象，也就是有了各自可以调用的方法，从而可以操作。
聊一些常用的方法，以及经典的案例，不是所有的方法。如果需要了解可以看一下官方文档。
获取元素
操作元素之前，首先要获得元素，不然你操作谁？常用的方式有以下几种下面依次演示：
getElementById
这个通过id得到元素的。
格式如下：
var element = document.getElementById(id);
-
element
是一个 Element 对象。如果当前文档中拥有特定ID的元素不存在则返回null.
-
id
是大小写敏感的字符串，代表了所要查找的元素的唯一ID.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试文档</title>
</head>
<body>
<div id="test">tess的元素</div>
<script>
// 为什么这个放在元素的后面，因为这个js的实现需要加载后的内容
var element= document.getElementById("test");
console.log(element)
console.log("----------------")
// 再补充一个打印方法dir ，这个比log打印信息更多，看一下结果
console.dir (element)
</script>
</body>
</html>
可以看出dir打印出的是一个对象，而不是一个元素的转换的字符串。
getElementsByTagName
通过标签的名字返回元素，这个返回的是一个伪数组（HTMLCollection ），元素可以根据索引（0开始）进行取出，当然也可以进行for循环。
格式：
var elements = document.getElementsByTagName(name);
- elements 是一个由发现的元素出现在树中的顺序构成的动态的HTML集合 HTMLCollection (但是看下面的提示) 。
- name 是一个代表元素的名称的字符串。特殊字符 “*” 代表了所有元素。
演示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试文档</title>
</head>
<body>
<div>tess的元素</div>
<script>
// 为什么这个放在元素的后面，因为这个js的实现需要加载后的内容
var element=document.getElementsByTagName("div");
console.log(element);
</script>
</body>
</html>
getElementsByClassName
通过类名获得元素，这个获得也是一个伪组，具体格式如下：
var elements = element.getElementsByClassName(names);
就不再演示了，毕竟用法和前面一样。
getElementsByName
通过name属性得到想要的元素，返回的也是一个伪数组。
格式：
var elements = document.getElementsByName(name)
也不再演示了，毕竟和前面的使用方式几乎相同。
querySelector
querySelector()方法返回文档中与指定选择器或选择器组匹配的第一个 Element对象。格式如下：
element = document.querySelector(selectors);
-
selectors
这个如何写，就和前面学css的时候选择器一样，具体如何理解看演示。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试文档</title>
</head>
<body>
<div class="test1">test的元素</div>
<div class="test1">test的元素</div>
<script>
// 为什么这个放在元素的后面，因为这个js的实现需要加载后的内容
var elements=document.getElementsByClassName('test1'); //这个会得到所有的是这个类名的元素 返回一个伪数组
console.log(elements);
console.log("---------------");
var element_tap=document.querySelector("div");
console.log(element_tap);
console.log("---------------");
var element_class=document.querySelector(".test1");
console.log(element_class);
console.log("---------------");
var element_arr=document.querySelector('[class="test1"]');
console.log(element_arr);
</script>
</body>
</html>
querySelectorAll
返回与指定的选择器组匹配的文档中的元素列表(NodeList) (使用深度优先的先序遍历文档的节点),格式如下：
var elementList = parentNode.querySelectorAll(selectors);
演示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试文档</title>
</head>
<body>
<div class="test1">test的元素</div>
<div class="test1">test的元素</div>
<script>
// 为什么这个放在元素的后面，因为这个js的实现需要加载后的内容
var elements=document.getElementsByClassName('test1'); //这个会得到所有的是这个类名的元素 返回一个伪数组
console.log(elements);
console.log("---------------");
var element_tap=document.querySelectorAll("div");
console.log(element_tap);
console.log("---------------");
var element_class=document.querySelectorAll(".test1");
console.log(element_class);
console.log("---------------");
var element_arr=document.querySelectorAll('[class="test1"]');
console.log(element_arr);
</script>
</body>
</html>
以上几个方法不单是document可以调用，而且其得到的元素也可以调用，甚至可以一起使用，不过在使用中需要考虑到如果前面的那个是集合就需要索引进行取值了。如下：
var element r=document.querySelectorAll('[class="test1"]')[0].getElementById(id);
特殊的body和html
body元素可以通过：
var element_body=document.body
html元素可以通过：
var element_html=document.documentElement;
演示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试文档</title>
</head>
<body>
<div class="test1">test的元素</div>
<script>
// 为什么这个放在元素的后面，因为这个js的实现需要加载后的内容
var elements_body=document.getElementsByTagName('body'); // 这里可以看出无法得到body
console.log(elements);
var element_body=document.body;
console.log(element_body);
console.log("-----------------");
var elements=document.getElementsByTagName('html'); // 可以得到元素
console.log(elements);
var element_html=document.documentElement;
console.log(element_html);
</script>
</body>
</html>
