JavaScript高级操作 ---- DOM

1、什么是DOM？

DOM是文档对象模型，其中有两个核心，一个是HTML- DOM，一个是CSS - DOM.

2、访问节点

 

属性名称	描述
parentNode	返回节点的父节点
childNodes	放回子节点集合，childNodes[i]
firstChild	返回节点的第一个子节点
lastChild	返回节点的最后一个子节点
nextSibing	下一个节点
previousSibing	上一个节点

节点和节点的关系：

根节点，父节点，子节点，兄弟节点。

element属性

属性名称	描述
firstElementChild	返回节点的第一个子节点，最普遍的用法是访问该元素的文本节点
lastElementChild	返回节点的最后一个子节点
nextElementSibling	下一个节点
previousElementSibling	上一个节点

3、节点信息

节点类型	NodeType值
元素element	1
属性attr	2
文本text	3
注释comments	8
文档document	9

4、操作节点

操作节点的属性：

getAttribute("属性名")；
//获得属性名

setAttribute("属性名","属性值")；
//给属性名赋值

创建和插入节点

createElement( tagName)	创建一个标签名为tagName的新元素节点
A.appendChild( B)	把B节点追加至A节点的末尾
insertBefore( A,B )	把A节点插入到B节点之前
cloneNode(deep)	复制某个指定的节点

删除和替换节点

名称	描述
removeChild( node)	删除指定的节点
replaceChild( newNode, oldNode)属性attr	用其他的节点替换指定的节点

7、 对样式的操作

获取元素的式样：

HTML元素.style.样式属性＝"值"；

//通过元素直接修改属性

如下：
document.getElementById("titles").style.color="#ff0000";     //改变颜色
document.getElementById("titles").style.fontSize="25px "    //改变字体大小

className属性：
 

HTML元素.className="样式名称"；

//通过className属性给元素的样式赋值

8、鼠标事件

名称	描述
onclick	点击事件
onmouseover	鼠标移入事件
onmouseout	鼠标移除事件
onmousedown	鼠标按钮被按下

9、HTML中元素属性

offsetLeft	返回当前元素左边界到它上级元素的左边界的距离，只读属性
offsetTop	返回当前元素上边界到它上级元素的上边界的距离，只读属性
offsetHeight	返回元素的高度
offsetWidth	返回元素的宽度
offsetParent	返回元素的偏移容器，即对最近的动态定位的包含元素的引用
scrollTop	返回匹配元素的滚动条的垂直位置
scrollLeft	返回匹配元素的滚动条的水平位置
clientWidth	返回元素的可见宽度
clientHeight	返回元素的可见高度

注意：js中要注意浏览器兼容性

document.documentElement.scrollTop;
document.documentElement.scrollLeft;
或者
document.body.scrollTop;
document.body.scrollLeft;

10、获取元素的位置

currentStyleget ，ComputedStyle()