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; //低版本

原文地址:https://www.cnblogs.com/ying-dong/p/12106640.html