1：DOM（Document Object Model）的概念和作用
document对象是DOM核心对象：对html中的内容，属性，样式进行操作。
节点树中节点之间的关系：父子，兄弟。
2：DOM常用属性
title：返回或设置当前文档的标题。
all：返回所有元素的集合。
forms：返回对文档中所有form对象的引用。
通过集合来访问相应的对象：
1.通过下标的形式。
2.通过name形式。
3：DOM查询方法
1.getElementById(id)：返回拥有指定id的（第一个）对象的引用。
2.getElementsByTagName(tagName)：返回有指定标签名的对象集合。
注：上面两个方法没有兼容性问题。
3.getElementsByName(name)：返回带有指定name指定名称的对象的集合。有兼容性问题。
在IE9及其以下，如果该对象的标准属性包含有name,（比如说input，在input中name是input的默认属性，所以可以正常使用，但是在div中name并不是div的默认属性，所以不能正常显示），那么可以正确的使用。否则不可以使用。在火狐中，该方法可以适用于任何情况。
结论： getElementsByName(name)主要是适用于表单。
4.write：输出内容到页面。（注：网页加载完成后进行输出，则覆盖整个网页，使用时需注意）
5.getElementsByClassName()：返回带有指定className指定名称的对象的集合。有兼容性问题，适用于火狐浏览器，在IE浏览器中不可用（IE8及以下不可用）。
封装获取className值的DOM节点的兼容性的函数。
4：操作内容
1.innerHTML：用来设置或获取对象起始和结束标签内（例如div框架，它只会获取div里面的内容，而不会获取div）的内容(识别html标签) 。
2.innerText：用来设置或获取对象起始和结束标签内的内容 (只是获取文字内容)(适用于IE，最新版火狐已支持)。
textContent用来设置或获取对象起始和结束标签内的内容 (只是获取文字内容)(适用于火狐，IE8及其以下不支持)。
3.outerHTML 用来设置或获取包括本对象在内的起始和结束标签内（例如div框架，不仅会获取div里面的内容，也会获取div自身的内容）的内容(识别html标签) 。
4.outerText 用来设置或获取包括本对象在内的起始和结束标签内的内容(只是获取文字内容)（火狐不支持）。
5：操作属性
1.直接操作
对象.属性。 // 获取属性。某些属性有兼容性问题，例如name（如果不是标签特有的属性，在chrome/firfox访问不到，在IE8及其以下浏览器能获取的到）。
对象.属性=值 // 设置、添加属性(属性值)。
2.通过方法
getAttribute(“属性”)。 // 获取给定的属性的值。
setAttribute(“属性”,“值”)。 // 设置或是添加属性。
removeAttribute(“属性”)。 // 删除属性。
6：操作样式
1.行内样式
对象.style.属性 // 获取样式属性
对象.style.属性=值 // 设置、添加样式属性。
注： 遇到属性是“-”链接的，要将“-”去掉，后面的单词的首字母大写。
2.行内样式和css层叠样式通用的方式
对象.currentStyle.属性 IE 用来获得实际的样式属性。
getComputedStyle((对象,null).属性) 火狐 用来获得实际的样式属性。
注：只能获取不能设置。
7：DOM增删改
一：创建节点（注释和文档节点一般不需要创建）
1：创建元素节点
document.createElement("元素标签名");
2：创建属性节点
var oAttr = document.createAttribute(“属性名”);（不常用）
oAttr.value = "attr-name";
oDiv.setAttributeNode(oAttr);
对象.属性=属性值;（常用）
3：创建文本节点
对象.innerHTML = "";
var oText = document.createTextNode(“文本”); // 文本中的HTML标签实体化
oDiv.appendChild(oText);
二：追加到页面当中
父对象.appendChild(newNode) // 插入到父对象最后。
父对象.insertBefore(newNode, existsNode) // 插入到什么对象之前。
三：修改(替换)节点
父对象.replaceChild(newNode,existsNode); // 前面的替换后面的
四：删除节点
父对象.removeChild(oldNode);
如果确定要删除节点，最好也清空内存 对象=null;
五：表格操作
table.tBodies[0].rows[0].cells[0].innerHTML;
var oNewRow = table.insertRow(“行位置”);
oNewRow.insertCell(“列位置”);
原文地址：https://www.cnblogs.com/witkeydu/p/8352894.html