S2 使用jQuery快速高效制作网页交互特效 第三章 JavaScript操作DOM对象知识点

一、DOM操作
1、DOM:是Document Object Model的缩写,即文档对象模型,是基于文档编程的一套API接口
2、使用JavaScript操作DOM是通常分为:DOM Core(核心)、HTML-DOM和CSS-DOM
3、节点和节点关系
 整个文档是一个文档节点
 每个HTML标签是一个元素节点
 包含在HTML元素中的文本是文本节点
 每个HTML属性时一个属性节点
 注释属于注释节点
4、使用父(parent)、子(child)和同胞(sibling)等术语来描述这些节点的层次关系,父节点拥有子节点，同级的子节点陪称为同胞或兄弟节点，他们的关系如下:
 在节点树中,顶部节点被称为根,如节点
 每个节点都有父节点,除了根,
 一个节点可以拥有任意数量的子节点
 同胞节点是拥有相同父节点的节点
5、使用DOM Core访问HTML文档的节点主要有两种方式
 使用getElement系列方法访问指定节点
 getElementById()：返回按id属性查找的第一个对象的引用
 getElementByName()：返回按带有指定名称name查找的对象的集合,由于一个文档中可能会有多个同名节点(如复选框、单选按钮),因此返回的是元素数组
 getElementByTagName()：返回带有指定标签名TagName查找的对象的集合,由于一个文档中可能会有多个同类型的标签节点(如图片组、文本输入框),因此返回元素数组
 根据层次关系访问节点
属性名称 描述
parentNode 返回节点的父节点
childNodes 返回子节点集合,childNodes[i]
firstChild 返回节点的第一个子节点,最普遍的用法是访问该元素的文本节点
lastChild 返回节点的最后一个子节点
nextSibling 下一个节点
previousSibling 上一个节点

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

7、节点:是DOM层次结构中的任何类型的对象的通用名称,每个节点都拥有包含着关于节点某些信息的属性,这些属性如下:
 nodeName(节点名称)
 nodeValue(节点值)
 nodeType(节点类型)

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

二、操作节点
1、操作节点的属性
HTML DOM提供了获取及改变节点属性值得标准方法，如下所示
 getAttribute(“属性名”):用来获取属性的值
 setAttribute(“属性名”,“属性值”):用来设置属性的值

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

3、删除和替换节点
方法
名称 描述
remoeChild(node) 删除指定的节点
replaceChild(newNode,oldNode) 用其他的节点替换指定的节点

4、style属性
语法：HTML元素.style.样式属性=“值”;
例如：document.getElementById(“one”).style.color=“red”;

style属性
类别 属性 描述
background(背景) backgroundColor 设置元素的背景颜色
backgroundImage 设置元素的背景图像
backgroundRepeat 设置是否及如何重复背景图片
text(文本) fontSize 设置元素的字体大小
fontWeight 设置字体的粗细
text(文本) textAlign 排列文本
textDecoration 设置文本的修饰
font 设置同一行字体的属性
color 设置文本的颜色
padding(边距) padding 设置元素的填充
paddingTop
paddingBottom
paddingLeft
paddingRight 设置上、下、左、右填充
border(边框) border 设置四个边框的属性
borderTop
borderBottom
borderLeft
borderRight 设置上、下、左、右边框的属性

5、常用事件
名称 描述
onclick 当用户淡季某个对象是调用事件
onmouseover 鼠标移到某元素之上
onmouseout 鼠标从某元素移开
onmousdown 鼠标按钮被按下

6、className属性
语法:HTML元素.className=“样式名称”;
7、获取元素的样式
语法：HTML元素.style.样式属性
HTML元素.currentStyle.样式属性
document.defaultView.getComputedStyle(元素,null).属性