JavaScript操作DOM对象

DOM分为三类:

DOM Core(核心)，HTML-DOM和CSS-DOM。

DOM Core DOM Core不是JavaScript的专属品任何一种支持DOM的编程语言都可以使用它，它的用途不仅限于处理一种使用标记语言编写出来的文档，如HTML。HTML -DOM 使用JavaScript和DOM为HTML文档编写脚本时，有许多专属的HIML -DOM 属性，HTML-DOM出现的比DOM Core更早.它提供了一些更简单的标记来描述各种HTML 元素的属性，如document forms.获取表单对象。CSS-DOM CSS-DOM是针对CSS的操作，在JavaScript中，CSS-DOM 技术的主要作用是获取和设置style对象的各种属性。即CSS属性，通过改变style 对象的各种属性，可以使用网页呈现出各种不同的效果，如element syle，color= “red” . 设置文本为红色。

节点和节点关系

访问节点

使用getElement系列方法访问指定节点 getElementById():返回id属性查找对象第一个的引用 getElementByName():带有指定名称name查找对象的集合 getElementByTagName():带有指定标签名TagName查找的对象的集合根据层次关系访问节点 parentNode 父节点 childNodes 子节点 firstChild 第一个子节点 lastChild 最后一个子节点 nextSibling 下一个节点 previousSibling 上一个节点可兼容不同浏览器的element属性: firstElementChild 第一个子节点 lastElementChild 最后一个字节点 nextElementSibling 下一个节点 previousElementSibling 上一个节点节点信息的属性: nodeName(节点名称) nodeValue(节点值) nodeType(节点类型) 节点类型NodeType值元素element1属性attr2文本text3注释comments8文档document9

操作节点

改变节点属性的方法: getAttribute(“属性名”):用来获取属性的值 getAttribute(“属性名”,“属性值”):用来设置属性的值创建和插入节点 createElement(tagName) 创建一个标签名为tagName的新元素节点 A.appendChild(B) B节点追加至A节点的末尾 insertBefore(A,B) A节点插入B节点之前 cloneNode(deep) 复制某个指定的节点删除和替换节点的方法 removeChile(node) 删除指定的节点 replaceChile(newNode,oldNode) 节点替换指定节点

操作节点样式

style属性 语法: HTML元素.style.样式属性=“值”; style对象的常用属性: background(背景): backgroundColor 设置元素的背景颜色 backgroundImage 设置元素的背景图像 backgroundRepeat 设置是否及如何重复背景图像 text(文本): fontSize 设置元素的字体大小 fontWcight 设置字体的粗细 textAlign 排列文本 textDecoration 设置文本的修饰 font 设置同一行字体的属性 color 设置文本的颜色 padding(边距): padding 设置元素的填充 pddingTop 设置元素的上填充 paddingBottom 设置元素的下填充 paddingLef 设置元素的左填充 paddingRight 设置元素的右填充 border(边框): border 设置四个边框的属性 borderTop 设置上边框的属性 borderBotom 设置下边框的属性 borderLeft 设置左边框的属性 borderRight 设置右边框的属性 常用事件 onclick 单击事件 onmouseover 鼠标移动某元素之上 onmouseout 鼠标从某个元素移开 onmousedown 鼠标按钮被按下className属性 语法: HTML元素.className=“样式名称”;

获取元素样式

style属性获取样式的属性值语法: HTML元素.style.样式属性; currentStyle对象包含style特性语法: HTML元素.currentStyle.样式属性; getComputedStyle()方法;方法接收两个参数,获取样式的属性值语法: document.defaultView.getComputedStyle(元素,null).属性;

获取元素位置

元素属性应用

属性描述offsetLeft左边界offsetTop上边界offsetHeight高度offsetWidth宽度offsetParent偏移容器,动态定位包含元素的引用scrollTop滚动条的垂直位置scrollLeft滚动条的水平位置clientWidth可见宽度clientHeight可见高度

语法: document.documentElement.scrollTop; document.documentElement.scrollLeft; 或者 document.body.scrollTop; document.body.scrollLeft;