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” . 设置文本为红色。

节点和节点关系

访问节点

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

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

操作节点

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

操作节点样式

1. 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 鼠标按钮被按下
2. 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;