DOM结构
一句话总结：DOM操作，可以简单的理解成元素操作。
我们在操作元素时，其实就是把这个元素看成对象，然后使用这个对象的属性和方法来进行相关操作
- 注：节点和元素是不一样的概念，节点包括元素，常见的节点有元素节点，属性节点、文本节点
获取元素的相关方法（重要）
* getElementById（"id名"）
* getElementsByClassName("类名")
* getElementsByTagName("标签名")
* getElementsByName("name名")
* querySelector()和querySelectorAll("css选择器")
* document.body和document.title
- 注意：以上方法都很重要，严格区分大小写，除了第一个的Element不加s，其他都加。(因为获取的是元素的集合)
- 只有id名的是Node类型，其他都是NodeList类型，即类数组，只有下标特性和.length属性
- 要使用的话要循环，(.length属性经常使用)即使只有一个就在获取完之后需要加[0]
- ID获取和class获取是不需要加# 和.的
- 获取到的是对象，习惯上变量名以"o"开头
- 对于id来说因为页面只有一个元素，所以用id方法来获取方法效率更高
- getElementsName()方法只适用于表单元素，因为它有一个name属性。一般只用于单选框和复选框。
- 可以说querySelectorAll()是万能方法了
- 只有获取了元素才可以对元素进行相应的操作
动态添加DOM元素
例：document.body.innerHTML = “xxx”;为body元素、创建动态DOM。
注：getElementsByTagName()方法可以操作动态创建的DOM元素，而getElementById()方法无法实现,getElementsByClassName()也不能操作动态DOM
创建元素
createElement() 创建元素节点
createTextNode() 创建文本节点
创建必有插入，不插入则无意义
创建一个元素的四个步骤：
- 创建元素节点 createElement()
- 创建文本节点 createTextNode()
- 把文本节点插入元素节点：appendChild()
- 把组装好的元素插入到已有元素中appendChild()
插入元素
A.appendChild(B); //将B插入到A内部子元素的“末尾”
A.insertBefore(B,指定位置) //将B插入到指定位置之前
这两种方法都需要先获取父元素才可以操作
删除元素
A.removeChild(B);
在删除元素前必须要找到两个元素：被删除的子元素和被删除元素的父元素
复制元素
obj.cloneNode(bool) //参数为布尔值，true或1为复制本身和所有的子孙元素，false或0为只复制该元素本身
替换元素
A.replaceChild(new,old);
要想实现替换元素必须提供三个节点：父元素、新元素、旧元素
HTML属性操作(对象方法)
obj.getAttribute("attr") //获取元素的某个属性值,只有一个参数。
// 这个技巧在提前设置好属性值为nember类型获取到之后创建动态DOM操作时经常用到
设置属性值
obj.setAttribute("attr","值")
obj.attr = "值"
对象名.style.color = “red”
window.onload = function()
input框里的值都是通过value属性来获取的