1.DOM操作分类(三类): (1)DOM Core(核心) (2)HTML-DOM (3)CSS-DOM
2.节点的定义： (1)整个文档是一个文档节点 (2)每个HTML标签是一个元素节点 (3)包含在HTML元素中的文本是文本节点 (4)每个HTML属性是一个属性节点 (5)注释属于注释节点
3.访问节点: 借点属性： parenNode: 返回节点的父节点 childNodes: 返回子节点集合，childNodes[i] firstChild: 返回节点的第一个子节点 laseChild: 返回节点的最后一个子节点 nextSibling: 下一个节点 previousSibling: 上一个节点 例：var div1=document.getElementById("div1"); //div1.parentNode.innerHTML
innerHTML：获取文本信息
注：对于不同的浏览器，有可能空格，注释，回车，标签，都是节点 为了解决浏览器兼容问题 使用element属性： firstElementChild: 返回节点的第一个子节点 laseElementChild: 返回节点的最后一个子节点 nextElementSibling: 下一个节点 previousElementSibling: 上一个节点
4.节点信息： nodeName: 获取节点的名称 nodeValue： 获取节点的值 nodeType: 节点类型
节点名称，值，类型的信息如下：
节点的类型 获取节点的名称(nodeName) 获取节点的值(nodeValue) 获取节点的类型(nodeType) 元素(element) 标签名 null 1 属性(attr) 属性名 属性值 2 文本(text) #text 文本内容 3 注释(comment) #comment 注释内容 8 文档(document) #document null 9
例： div1.nodeName 元素节点：标签名 //div1.firstElementChild.firstChild.nodeName 文本节点：#text //div1.firstElementChild.getAttributeNode("style").nodeName 属性节点：属性名
5.操作节点的属性： getAttribute("属性名")； 用来获取属性的值
例：var str=arr[0].getAttribute("type");
setAttribute("属性名","属性值")； 用来设置属性的值
例：var img1=document.getElementsByTagName("img")[0]; img1.setAttribute("src","images/dd_logo.jpg");
6.创建和插入节点： createElement(tagName) 创建一个标签名为tagName的新的元素节点 A.appendChild(B) 把B节点追加至A节点的末尾 insertBefore(A,B) 把A节点插入到B节点之前 cloneNode(deep) 复制某个指定的节点 注：deep为布尔值，为true时，则赋复制该节点以及该节点的所有子节点 ， 为false时：只复制该节点和其属性 例： /*img1.setAttribute("src","images/shoppingBg.jpg");*/ div1.insertBefore(div2,div1.firstChild);//在子元素前置插入
7.删除和替换节点： removeChild(node) 删除指定节点 replaceChild(newNode,oldNode) 用其他的节点替换指定节点 例：obj.parentNode.removeChild(obj.previousElementSibling);//删除 例： var img1=document.createElement("img"); img1.setAttribute("src","images/shoppingBg.jpg"); obj.parentNode.replaceChild(img1,obj.previousElementSibling);//替换
8.操作节点的样式： (1)style属性： 语法：HTML元素.style.样式属性="值"; 注：凡是有例如font-size中间有 "-"的，后面首字母大写 例:font-size 写为：fontSize;
例：obj.firstElementChild.style.display="block";//给指定元素添加style属性值 (2)className属性： 语法：HTML元素.className="样式名称"; 例： #div1 .a{ display: block; }//先创建样式 obj.firstElementChild.className="a";//给指定元素添加类样式 9.常用的鼠标事件： onclick: 当用户点击某个对象是调用的事件 onmouseover: 鼠标移动到某个元素上 onmouseout: 鼠标从某元素移开 onmousedown: 鼠标按钮被按下
10. 获取元素的样式： 语法：HTML元素.style.样式属性; (只能获取行内样式) HTML元素.currentStyle.样式属性; (只能为IE浏览器) document.defaultView.getComputedStyle(元素,null).属性 (IE不支持)
例： // alert(document.defaultView.getComputedStyle(obj.firstElementChild,null).display);
11.获取元素的位置：
HTML中元素的常见的属性如下： offsetLeft: 返回当前元素左边界到它上级元素的左边界到的距离，只读属性 offsetTop: 返回当前元素上边界到它上级元素的上边界到的距离，只读属性 offsetHeight: 返回元素可见高度(包含边框) offsetWidth: 返回元素可见宽度 offsetParent: 返回元素的便宜容器，及最近的动态定位的包含元素的引用 scrollTop: 返回匹配元素的滚动条的垂直位置 scrollLeft: 返回匹配元素的滚动条的水平位置 clientWidth: 返回元素的可见宽度（不包括边框） clientHeight: 返回元素的可见高度
语法：document.documentElement.scrollTop;//获取当前滚动条距离顶端的偏移量 document.documentElement.scrollLeft;//获取当前滚动条距离左端的偏移量 或者：document.body.scrollTop; document.body.scrollLeft; (以上两种方式都可以获取滚动条距离上端和左端的距离，但有的浏览器不兼容某一种方法，所以建议写成一下方法） var sTop= document.documentElement.scrollTop || document.body.scrollTop;
转载于:https://www.cnblogs.com/zhuhuibiao/p/9825334.html
