JavaScript操作DOM对象

一、学习目的

了解DOM的分类和节点间的关系

熟练使用JavaScript操作DOM节点

访问DOM节点

能够熟练的进行节点的创建、添加、删除、替换等

能够熟练的设置元素的样式

能够灵活运用JavaScript获取元素位置的属性来完成网页效果

二、DOM（Document Object Model）：文档对象模型

DOM Core： 获取节点的方法，定义了一套标准的针对任何结构化文档的对象,包括 HTML、XHTML 和 XML。

三、节点和节点的关系

访问节点：

使用getElement系列方法访问指定节点

getElementById()、getElementsByName()、getElementsByTagName()

根据层次关系访问节点

可以通过层次关系访问节点

element属性找节点是为了适配浏览器的兼容性，第一种节点查询方法可能会有不兼容的问题。

节点属性：

parentNode：返回节点的父节点

childNodes：返回子节点集合，childNodes[i]

firstChild：返回节点的第一个子节点，最普遍的用法是访问该元素的文本节点

lastChild：返回节点的最后一个子节点

nextSibling：下一个节点

previousSibling：上一个节点

element属性：

firstElementChild：返回节点的第一个子节点，最普遍的用法是访问该元素的文本节点

lastElementChild：返回节点的最后一个子节点

nextElementSibling：下一个节点

previousElementSibling：上一个节点

节点信息：

nodeName：节点名称

nodeValue：节点值

nodeType：节点类型

cloneNode（中间可加true或false）：

false：只会复制自身

true：不只会复制自身，还会复制其子类节点信息。

nodeType节点类型：（后面的是NodeType值）

元素element：1

属性attr：2

文本text：3

注释comments：8

文档document：9

四、操作节点

操作节点的属性：

getAttribute("属性名")

setAttribute("属性名","属性值")

创建和插入节点：

createElement( tagName)：创建一个标签名为tagName的新元素节点

A.appendChild( B)：把B节点追加至A节点的末尾

insertBefore( A,B )：把A节点插入到B节点之前

cloneNode(deep)：复制某个指定的节点

删除和替换节点（删除和替换需要找到被操作节点的父类节点）：

removeChild( node)：删除指定的节点

replaceChild( newNode, oldNode)属性attr：用其他的节点替换指定的节点

操作节点样式（改变节点样式）：

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

示例：

document.getElementById("titles").style.color="#ff0000";

document.getElementById("titles").style.fontSize="25px ";

onclick：当用户单击某个对象时调用事件

onmouseover：鼠标移到某元素之上

onmouseout：鼠标从某元素移开

onmousedown：鼠标按钮被按下

classname属性：HTML元素.className="样式名称"  classname的引用必须是类选择器。

示例：

document.getElementById("cart").className="cartOver";

document.getElementById("cartList").className="cartListOver";

获取元素的样式：

语法：HTML元素.style.样式属性;

示例：alert(document.getElementById("cartList").display);

语法：document.defaultView.getComputedStyle(元素,null).属性;

示例：

var cartList=document.getElementById("cartList");

alert(document.defaultView.getComputedStyle(cartList,null).display);

语法：HTML元素. currentStyle.样式属性;

示例：alert(document.getElementById("cartList").currentStyle.display);（红色部分是为了兼容IE浏览器）

五、HTMl中元素属性

offsetLeft：返回当前元素左边界到它上级元素的左边界的距离，只读属性

offsetTop：返回当前元素上边界到它上级元素的上边界的距离，只读属性

offsetHeight：返回元素的高度

offsetWidth：返回元素的宽度

offsetParent：返回元素的偏移容器，即对最近的动态定位的包含元素的引用

scrollTop：返回匹配元素的滚动条的垂直位置

scrollLeft：返回匹配元素的滚动条的水平位置

clientWidth：返回元素的可见宽度

clientHeight：返回元素的可见高度

元素属性的应用：

document.documentElement.scrollTop;

document.documentElement.scrollLeft;    标准浏览器

或者

document.body.scrollTop;

document.body.scrollLeft;     Chrome

示例：var sTop=document.documentElement.scrollTop||document.body.scrollTop;

六、总结

        通过学习了JavaScript操作元素中的DOM后可以使用层次来实现节点的定位，这样可以避免，具体节点记忆错误的问题，可以更好的实现页面的设置。