JavaScript操作DOM对象

DOM分为三类:

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

1.DOM Core
   DOM Core不是JavaScript的专属品任何一种支持DOM的编程语言都可以使用它，它的用途不仅     限于处理一种使用标记语言编写出来的文档，如HTML。
2.HTML -DOM
   使用JavaScript和DOM为HTML文档编写脚本时，有许多专属的HIML -DOM 属性，HTML-DOM     出现的比DOM Core更早.它提供了一些更简单的标记来描述各种HTML 元素的属性，如                   document      forms.获取表单对象。
3.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(节点类型)
 

操作节点

改变节点属性的方法:
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;