一：属性和方法
属性：是节点（HTML 元素）的值，您能够获取或设置（比如节点的名称或内容）。
方法：是我们可以在节点（HTML 元素）上执行的动作。（比如添加或修改元素）。
二：HTML DOM 定义：
DOM（Document Object Model）：文档模型，
HTML DOM 定义了所有 HTML 元素的对象和属性，以及访问它们的方法。
HTML DOM 是关于如何获取、修改、添加或删除 HTML 元素的标准。
在js中通过document这个对象提供的方法
三：HTML DOM 节点信息
1:HTML DOM 节点定义：是DOM结构中最基本的组成单元，每一个HTML标签都是DOM结构的节点，节点也称之为元素
- 文档是一个文档。
- 所有的HTML元素都是元素节点。
- 所有 HTML 属性都是属性节点。
- 文本插入到 HTML 元素是文本节点。are text nodes。
- 注释是注释节点
2：属性是节点（HTML 元素）的值，您能够获取或设置。每个节点都拥有包含着关于节点某些信息的属性。这些属性是：
nodeName（节点名称）
- nodeName 是只读的
- 元素节点的 nodeName 与标签名相同
- 属性节点的 nodeName 与属性名相同
- 文本节点的 nodeName 始终是 #text
- 文档节点的 nodeName 始终是 #document
注释：nodeName 始终包含 HTML 元素的大写字母标签名。
nodeValue（节点值）
- 元素节点的 nodeValue 是 undefined 或 null
- 文本节点的 nodeValue 是文本本身
- 属性节点的 nodeValue 是属性值
- nodeValue 属性对于文档节点和元素节点是不可用的。
nodeType（节点类型）nodeType 是只读的。
- 元素：1
- 属性：2
- 文本：3
- 注释：8
- 文档：9
四：HTML DOM innerHTML 属性
获取元素内容的最简单方法是使用 innerHTML 属性。
innerHTML 属性对于获取或替换 HTML 元素的内容很有用。
五：访问 HTML 元素（节点）
您能够以不同的方式来访问 HTML 元素：
- 通过使用 getElementById() 方法
- 通过使用 getElementsByTagName() 方法
- 通过使用 getElementsByClassName() 方法，IE6，7，8不支持。
获取class元素常规封装 
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> </style> <script> /* * getByClass(document, ‘li‘, ‘box‘); * getByClass(document, ‘li‘, ‘box,box1‘); * getByClass(document, ‘li‘, ‘box box1‘); * */ window.onload = function() { var arr = getByClass(document,‘li‘,‘box‘); console.log( arr ); } function getByClass(obj, tagname, classes) { var classes = classes.split(‘ ‘); //获取指定范围内的所有指定元素 var eles = obj.getElementsByTagName(tagname); //一个用来保存结果的数组 var result = []; //循环遍历选中的元素eles for (var i=0; i<eles.length; i++) { //把当前循环过程中某个元素的class取出来，并分割成数组（元素可能会有多个class） var classArr = eles[i].className.split(‘ ‘); //判断当前这个元素的class中是否有我们要找的class if ( inArray(classArr, classes) ) { //如果当前元素中有我们要找的class，则把当前元素保存到结果数组中 result.push( eles[i] ); } } //返回结果数组 return result; } //[‘box‘, ‘box1‘] [‘box1‘, ‘box2‘, ‘box‘] function inArray(arr1, arr2) { for (var i=0; i<arr2.length; i++) { var b = false; for (var j=0; j<arr1.length; j++) { if (arr2[i] == arr1[j]) { b = true; break; } } //如果当前这一次循环比较结束以后，b的值为真，则表示arr2中的某一个在arr1中是存在，否则就不存在 if (!b) { return false; } } //只要代码能运行到这里，就说明了arr2中的值在arr1中都是存在的 return true; } </script> </head> <body> <ul id="ul1"> <li>1111111</li> <li class="box">222222222</li> <li class="box box1">33333333</li> <li class="box2">44444444444</li> <li class="box1">55555555555</li> <li class="box1 box2 box">6666666666666</li> </ul> </body> </html>获取class元素正则表达式
/*-------------------------- + 获取id, class, tagName +-------------------------- */ var get = { byId: function(id) { return typeof id === "string" ? document.getElementById(id) : id; }, byClass: function(sClass, oParent) { var aClass = []; var reClass = new RegExp("(^| )" + sClass + "( |$)"); var aElem = this.byTagName("*", oParent); for (var i = 0; i < aElem.length; i++) reClass.test(aElem[i].className) && aClass.push(aElem[i]); return aClass; }, byTagName: function(elem, obj) { return (obj || document).getElementsByTagName(elem); } };
六：HTML DOM划分：
-----------------------------------------------------------------------------------
按层级划分：父节点，子节点，兄弟节点
父子节点：上下层关系
兄弟节点：同一层关系
祖先节点：当前元素上面的所有的节点
子孙节点：当前元素下面的所有的节点
-----------------------------------------------------------------------------------
按类型划分：元素节点，文本节点，属性节点，注释节点，document节点
元素节点（1）：html标签
文本节点（3）：文字，特殊符号，换行符，制表符。。。（给用户看的）
属性节点（2）：元素节点上各种属性
注释节点（8）：文档中的注释<!-- -->
document节点（9）：特有的document对象
-----------------------------------------------------------------------------------
七：HTML DOM 节点树HTML DOM 将 HTML 文档视作树结构。这种结构被称为节点树：
通过 HTML DOM，树中的所有节点均可通过 JavaScript 进行访问。所有 HTML 元素（节点）均可被修改，也可以创建或删除节点。
节点树中的节点彼此拥有层级关系。
父（parent）、子（child）和同胞（sibling）等术语用于描述这些关系。
父节点拥有子节点。
同级的子节点被称为同胞（兄弟或姐妹）。
- 在节点树中，顶端节点被称为根（root）
- 每个节点都有父节点、除了根（它没有父节点）
- 一个节点可拥有任意数量的子节点
- 同胞是拥有相同父节点的节点
demo1:
<html>
<head>
<title>DOM 教程</title>
</head>
<body>
<h1>DOM 第一课</h1>
<p>Hello world!</p>
</body>
</html>
demo分析：
-----------------------------------------------------------------------------------
- <html> 节点没有父节点；它是根节点
- <head> 和 <body> 的父节点是 <html> 节点
- 文本节点 "Hello world!" 的父节点是 <p> 节点
-----------------------------------------------------------------------------------
- <html> 节点拥有两个子节点：<head> 和 <body>
- <head> 节点拥有一个子节点：<title> 节点
- <title> 节点也拥有一个子节点：文本节点 "DOM 教程"
- <h1> 和 <p> 节点是同胞节点，同时也是 <body> 的子节点
-----------------------------------------------------------------------------------
- <head> 元素是 <html> 元素的首个子节点
- <body> 元素是 <html> 元素的最后一个子节点
- <h1> 元素是 <body> 元素的首个子节点
- <p> 元素是 <body> 元素的最后一个子节点