DOM document object model
对象: 属性 .事件 .方法
节点:
html : 是dom模型的根节点
所有的html标签都叫 元素节点 nodeType=1
所有的标签的属性叫做 属性节点 nodeType=2
所有的标签内容叫做 文本节点 nodeType=3
注:: 8表示的注释节点 9表示的根节点
一切都是节点
tagName 标签名称
nodeName 节点名称
nodeType 节点类型
nodeValue 节点对象的文本内容,是一个字符串.
节点关系
obj.ownerDocument 当该节点的文本对象根节点==document
parentNode 获取父节点
nextElementSibling 下一个兄弟节点(元素,ie8不支持)
nextSibling (低版本游览器使用) 下一个兄弟元素(包含文本,注释,元素节点)
previousElementSiling 上一个兄弟节点 (元素,ie8不支持)
previousSibling (低版本浏览器使用) 上一个兄弟节点(包含文本,注释,元素节点)
firstElementChild 第一个子节点(元素,ie8不支持)
firstChild 第一个子节点 (包含文本,注释,元素节点)
lastElementChild 最后一个子节点 (元素,ie8不支持)
lastChild 最后一个子节点(包含文本,注释,元素节点)
childNodes 所有的子节点,包括文本节点,返回节点对象集合.(包含文本,注释,元素节点)
children 所有的不包括文本节点的子节点,返回节点对象集合.(元素节点,ie8 下包含注释)
attributes 当前元素节点的所有属性节点.
属性节点操作
获取当前节点的所有属性节点
obj.attributes; 可获取，不可设置
获取属性节点的值
obj.attribute[index].nodeValue
获取和设置单个属性节点两种方式：
属性操作方式：
obj.属性名 // 获取
obj.属性名=“属性值” //设置
注意：obj.class; //非ie为undefined，ie报错
正确为obj.className
方法操作：
obj.getAttribute("属性名");
obj.setAttribute("属性名"，"属性值"）；
说明：setAttribute在ie7及更早的ie版本该方法设置class和style是无效的，
删除属性节点：
removeAttribute("属性名")
说明：ie6及更早的ie版本该方法不支持。
自定义行内属性操作
obj.attributes: //可通过下标方式获取自定义属性名（nodeName），ie7不能获取nodeValue，结果为null。
obj.自定义行内属性名： //ie低版本浏览器可获取；非ie是undefined
obj.getAttribute("自定义属性名"); //都可获取。
obj.setAttribute ("自定义属性名","属性值"); // 都可设置
removeAttribute("自定义属性名"); // 可删除。
原文地址：https://www.cnblogs.com/hudunyu/p/11684095.html