1、重新认识DOM
文件格式第一类数学模型（document Object model），由W3C明确提出的国际标准，是两个采用JAVA动态的出访和预览文件格式的文本、内部结构和式样；
DOM 提供更多了适当的API（USB），能对文件格式展开校订改查，以同时实现js对页面原素的动态（展开）掌控，同时实现动态页面的机能
2、HTML 结点树
DOM 的基本原理是将文件格式放入文本，并以结点的方式导出为一株结点树
HTML 文件格式是一类抽象化的内部方式化文件格式
3、结点类别
1.原素结点：即是条码
2.特性结点：即是条码上的特性
3.文档结点：即是条码间的文档文本
>> childNodes: 回到该结点下大部份的子结点条目【包涵空白符】（子集）【类似字符串内部结构】
句法：父结点.childNodes
>> .hasChildNodes(); –推论与否五子结点
句法：父原素.hasChildNodes();
>> firstChild –回到第二个子节点
句法：父原素.firstChild
>> lastChild –回到最终两个子结点
句法：父原素.lastChild
>> .previousSibling –回到上两个兄弟结点
句法：父原素.previousSibling
>> .nextSibling –回到写两个兄弟结点
句法：父原素.nextSibling
>> parentNode(靠谱)
句法：子结点.parentNode –回到父结点
>> children –回到大部份的结点（靠谱，不包涵空白符）
句法：父原素.children
5、结点特性
5.1 结点名字：nodeName
1.原素结点的 nodeName 与条码名字一样；
2.特性结点的 nodeName 与特性名一样；
3.文档结点的 nodeName 固定值为 #text；
5.2 结点值： nodeValue
1.原素结点的 nodeValue 为Undefined 或者 null
2.特性结点的 nodeValue 为特性值
3.文档结点的 nodeValue 为文档文本
5.3 结点类别： nodeType
1.原素结点的 nodeType 为 1
2.特性结点的 nodeType 为 2
3.文档结点的 nodeType 为 3
document.getElementByID(id);
>> 通过条码
document.getElementsByTagName(tagname);
document .getElementsByName(name);
document.getElementsByClassName(classname)
2、其他方法：
document.documentElement
document.body
>> 通过 form 的 nam
例如：console.log(
document.loginForm.username);句法：document.表单名字
document.表单名字.表单原素名
3、强大的 query【无法获取动态添加的 dom 结点】
document.querySelector(css选择器); –回到找到的第二个原素
document.querySelector(#nav);
document.querySelector(li);
document.querySelectorAll(css选择器) –回到找到的大部份原素
console.log(attributes);
console.log(attributes[0]);
>> 原素.特性名
console.log(baidu.className);
>> 原素.getAttribute(特性名)
console.log(baidu.getAttribute(href));
[如果是class就不需要再用className了，因为封装了不会起冲突]
console.log(baidu.getAttribute(class));
2、设置特性：
>> 原素.特性名 = 特性值;
baidu.style.color = red;
>> 原素.setAttribute(特性名,特性值);
baidu.setAttribute(title,您点击之后不会发生改变);
3、移除特性
原素.removeAttribute(特性名);
4、推论与否有某两个特性
原素.hasAttribute(特性名) –回到值是两个布尔值
5、HTML5 自定义特性操作
>> element.dataset.自定义特性名（如：data-index）
>> element.getAttribute(data-index);
// 操作CSS式样
>> 原素.style.css特性名 = css特性值;【大多数都要加因为是值】
demo.style.height = 50px;
demo.style.border = 2px solid red;
注意：【如果css单词是通过链接的单词，则需要写成驼峰式命名】
如：demo.style.borderBottom = 2px solid red;
【因为float是js中的保留字，所以要写为cssFloat】
如: demo.style.cssFloat = right;
>> cssText【能帮助我么批量的设置CSS式样】
demo.style.cssText += width: 400px;height: 50px;;
>> 添加 classname (推荐采用)
提前在css中写好class，接下来动态添加class，比如：demo.className = demo box;
demo.className = demo box;
