什么是DOM
1：文档对象模型（DocumentObjectModel,DOM）
2：DOM定义了访问和操作HTML文档的标准方法。
3：DOM将HTML 文档表达为树结构。
其他查询元素的方法：
document.querySelector(" ") //获取元素
.表达根据类查找
#表示根据id查找
直接写表示根据标签名查找
[name = 值]表示根据某一个属性查找
document.querySelectorAll(" ") // 获取元素集合（就算页面上只有一个元素，取出的也是集合）
eval(" ") // 通过id名称获取元素
直接通过id名获取元素（部分IE不支持）
修改元素：
元素（节点）是不能直接修改的，可以先删除，再创建。
对某元素的各种属性修改，比如：
div1.innerHTML= "新的内容"； //演示innerText和outerHTML
input1.value = "新的内容"；
input.type = "button"; //将input1元素的类型改为按钮
span1.style.color = "red";
document.createElement(elementName);
指再文档下创建某个标签，elementName指标签名，如div，ul，li，img，a等等
element1.appendChild(element2);
指将element2元素，放入element1元素的内容，以追加的形式存放。
删除某元素：
ul1、removeChild(li3); // 在ul1元素内，移除li3元素
注意：
1：只在子节点下删除，想删除哪个节点，必须找到该节点的父节点，parentNode即父节点。
2：只能删除1个节点，不能直接删除集合。
3：如果用变量保存一个集合，对集合内的某个元素进行修改后，
该变量存储的元素会发生变化。比如：
var arr=document.getElementsByTagName("div");
document.body.removeChid(arr[0]); //代码执行完，arr里面所有的元素都会向前进一位
// 即原来的arr[1]由arr[0]表示。
DOM :自定义属性： 元素上有些是系统默认就含有的属性，比如id、title、name、style等。
自定义的属性： 有些是根据自己喜好定义出来的属性，比如abc、xxx等。
自定义属性通常来做数据存储。（可理解成变量赋值）。
html：
<div id= "div1" a="123" data-b="hello"></div>
解释：在上文代码中，id是div的自带属性，a和b都是自定义属性，其中a是旧的写法，b是新的写法。
html：
<div id="div1" a= "123" data-b = "hello"></div>
操作属性的方法有很多种，不同的方法对应的是不同类型的属性。
最常用的写法：
div.c = "你好"; //设置属性
console.log(div.c); //获取属性
注：使用这种方法获取自定义属性时，必须使用js的方法设置属性，使用html的方法设置是无法获取的。
html：
<div id = "div1" a = "123" data-b = "hello"> </div>
另一种比较常用的写法：
div1.setAttribute("d","你好"); //设置属性
console.log(div1.getAttribute("d")); //获取属性
注： 使用这种方法设置的自定义属性，其内容会自动转为字符串。
html：
<div id= "div1" a="123" data-b = "hello" ></div>
自定义属性中的新的写法：
div1.dataset.a = "你好"; //设置属性
console.log(div1.dataset.e); //获取属性
注：有些浏览器不支持。
html:
<div id="div1" a= "123" data-b = "hello"></div>
存在，但不推荐的写法：
div1.attribute.f = "你好"； /设置属性
console.log(div1.attributes.f); //获取属性
不推荐使用，了解即可，因为使用比较复杂。
1，如果直接在html中写行间属性，通过该方法获取时返回属性节点。
2，如果即在行间设置了属性，也通过了js设置了属性，获取时返回属性节点。
3，如果没在行间设置属性，仅在js设置了属性，获取时返回数据。
如果是系统默认就含有的属性，通过不同方法设置的属性，可以通过不用的方法获取。
如果是根据自己喜好定义出来的属性，不用的方法设置的，是不能通过不同方法获取的。
例如： 用setAttribute设置后，可以用attributes获取，但用attributes设置，不能用getAttribute获取；
在实际开发中，以.这种方法为主，除非有要求说要在html中保存属性，否则我们不采用其他方法。
真实开发中，如果html中已经存在了自定义属性，需要我们通过js拿到自定义属性，看这个属性是怎么定义的，如果没有data前缀，则用getAttribute，否则用dataset。
div1.aa = [1,2,3];
console.log(div1,aa); //[1,2,3];
div1.setAttribute("aa",[1,2,3]);
console.log(div1.getAttribute("aa")); // "1,2,3"
区别 ：
1: 用 .aa 方法设置后，如果设置一个数组，能够取出数组，而setAttribute设置的是.toSring() 后的结果。
2：用 .aa方法设置后，html上看不到，而setAttribute是能够看到的。