（一）DOM基础
1，document：火狐：几乎支持所有DOM规范，IE9之前：不怎么支持，谷歌：支持一般
2，DOM节点（标签或元素）
获取父节点的子节点个数：子节点只算父节点内第一层的文本或元素节点。子节点内的子节点不算。
（1）获取的父节点.childNodes.length：获取所有节点；获取父节点.children.length：只获取元素节点；childNodes和children都是数组。
（2）nodeType：节点的类型，nodeType=3，指子节点为文本节点；nodeType=1，指子节点为元素节点。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <script type="text/javascript"> window.onload=function() { var ul1=document.getElementById(‘ul1‘); alert(ul1.childNodes.length); } </script> <body> <ul id="ul1"> <li></li> <li></li> <li></li> </ul> </body> </html>
#父节点ul中有7个子节点，3个li是3个子节点（元素节点），4个空行算4个子节点（文本节点，空字符串）
（3）父节点：获取父节点的标签（子节点.parentNode）
offsetParent：获取子节点用来定位的父节点（css中position的定位）
（4）子节点：父节点.firstElementChild：获取第一个元素子节点；父节点.firstChild：获取第一个子节点
父节点.lastElementChild：获取最后一个元素父节点；父节点.lastChild：获取最后一个子节点
子节点.nextElementSibling：获取子节点的下一个元素子节点； 子节点.nextSibling：获取子节点的下一个节点
子节点.previousElementSibling：获取子节点的上一个元素子节点；子节点.previousSibling：获取子节点的上一个节点
（5）DOM方式操作元素属性：
节点名.setAttribute（属性名，值）：设置节点属性的值
节点名.getAttribute（属性名）：获取节点属性的值
节点名.removeAttribute（属性名）；删除节点属性的值
根据class获取元素：使用时，向函数getByClassName传入获取到的父节点对象和class。
function getByClassName(oParent,sClassName) /*oPaarent：父节点，sClassName：class*/ { var aResult=[ ]; var aChild=oParent.getElementsByTagName(‘*‘); for(var i=0;i<aChild.length;i++) { if(aChild[i].className==sClassName) { aResult.push(aChild[i]); } } return aResult; }
原文：https://www.cnblogs.com/lq13035130506/p/12220916.html