JavaScriptDOM操作复习总结

一、DOM操作分类
1.DOM Core：通过函数或方法获取元素并进行操作，如：getElementById();
2.HTML-DOM：通过html标记获取html元素的属性，如：document.forms
3.CSS-DOM：主要是获取或设置style对象的属性，如：element.style.color=”red”

二、节点的分类
1.文档节点
2.元素节点
3.文本节点
4.属性节点
5.注释节点

注：节点有层次关系：父级、子级、同胞
每个节点都有父节点（除根节点外）
一个节点可以有多个子节点

三、访问节点
1、使用getElement系列的方法(DOM Core)
getElementById()、getElementsByName()、getElementsByTagName()

2、根据层次关系访问节点(HTML-DOM)

parentNode：获取指定节点的父节点 如：getElementById("news").parentNode
firstChild:获取指定节点的第一个子节点： 如：getElementById("news").firstChild
lastChild：获取指定节点的最后一个子节点： 如：getElementById("news").lastChild
childNodes：获取指定节点的所有子节点(包含孙子、换行、注释) 如：getElementById("news").childNodes
nextSibling：获取指定节点紧邻的下一个同胞节点 如：getElementById("news").firstChild.nextSibling
previousSibling：获取指定节点紧邻的上一个同胞节点 如：getElementById("news").lastChild.previousSibling

注：1)两种方式可以互相结合使用
2)以上都是属性，需要“对象名.属性名”调用
3)以上属性获取对象时都包含换行和注释，可以使用以下方式只获取元素节点
4)firstElementChild、lastElementChild、nextElementSibling、 previousElementSibling
5)各种节点属性可以连缀写，
如：var obj=document.getElementById(“nav”)
obj.firstChild.nextSibling.innerHTML;
6)toFixed(n)：保留n位小数

四、操作节点(HTML-DOM)

1.操作节点属性

对象名.getAttribute(“属性名”)：获取指定属性的值，如果不存在返回null
对象名.setAttribute(“属性名”,”属性值”)：设置指定属性的值

2、创建节点

var 对象名=document.createElement("标签名");//不可以加<>

3、插入节点

父节点对象.appendChild(子节点对象); //向父节点对象最后的位置插入一个子节点
父节点对象.insertBefore(子节点1,子节点2); //在子节点2的前面插入子节点1

4、删除节点

父节点对象.removeChild(子节点对象);//删除指定的子节点对象 返回删除的节点对象

5、替换节点

父节点对象.replaceChild(新子节点,旧子节点);//新子节点替换旧子节点

五、操作节点样式(CSS-DOM)

1、设置样式
对象名.style.属性名=值;
对象名.className=值; 给元素添加类样式

注：开发中建议使用第二种
属性名使用驼峰命名法

2、获取样式

1)获取行内样式
var 样式值=对象名.style.属性名

2)获取内部样式或外部样式
IE:对象名.var 样式值=对象名.currentStyle.属性名
其他浏览器：var 样式值=document.defaultView.getComputedStyle(对象名,null).属性名;

var 样式值=对象名.currentStyle.属性名||document.defaultView.getComputedStyle(对象名,null).属性名

六、获取元素位置

1、滚动状态下的HTML元素的属性
offsetLeft、offsetTop、offsetHeight、offsetWidth、offsetParent、scrollTop、
scrollLeft、clientWidth、clientHeight

注：document.body.scrollTop; //高版本
document.documentElement.scrollTop; //低版本