操作DOM
言编写的文档
HTML-DOM：提供了一些更简单的标记来描述各种HTML元素的属性，使用HTML-DOM时代码通常比较简短，但是范围没有DOM Core广泛，适用于处理HTML文档
CSS-DOM：是针对CSS的操作，在JS中CSS-DOM技术主要作用是获取和设置style对象的各种属性，即CSS属性。
用父(parent)、子(child)、同胞(sibling)等术语来描述这些节点层次关系
顶部节点称为根(root),如<html>
每个节点都有父节点，除根节点
一个节点可以有任意子节点
同胞节点是拥有相同的父节点
使用DOM Core访问HTML节点
使用getElement系列方法访问
getElementByld():返回按id属性查询第一个对象的引用
getElementsByName():返回按带有指定名name查找的对象的集合,返回元素数组
getElementsByTagName():返回带有指定标签名TagName查找对象集合,返回数组
根据层次关系访问
节点属性
|
属性名称 |
描述 |
|
parentNode |
返回节点的父节点 |
|
childNodes |
返回子节点集合，childNodes[i] |
|
firstChild |
返回节点的第一个字节点，普遍用法是访问该元素的文本节点 |
|
lastChild |
返回节点的最后一个字节点 |
|
nextSibling |
下一个节点 |
|
previousSibling |
上一个节点 |
element属性：给高级浏览器使用，低版本用上面的节点属性
|
常用属性 |
说明 |
|
firstElementChild |
返回最后一个子节点，普遍用法是访问该元素的文本节点 |
|
lastElementChile |
返回节点最后一个字节点 |
|
nextElementSibling |
下一个节点 |
|
previousElementSibling |
上一个节点 |
书写顺序不能乱
空格也算节点的一种，nodeType是3，文本Text类型
每个节点都拥有包含着关于节点的某些信息如：
nodeName(节点名称)
nodeValue(节点值)
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节点之前,A是必选,表示新插入的节点 |
|
cloneNode(deep) |
复制某个指定的节点,deep若为true则复制该节点及该节点所有的子节点，若为flase，则只复制该节点和其属性 |
|
removeChild(node) |
删除指定的节点 |
|
replaceChild(newNode,oldNode) |
用其他的节点替换指定节点 |
在HTML DOM中style是一个对象，代表一个单独的样式声明
语法：HTML元素.style.样式值=“值”;
常用属性
|
类别 |
属性 |
描述 |
|
background(背景) |
backgroundColor |
元素的背景颜色 |
|
backgroundImage |
背景图像 |
|
|
backgroundRepeat |
是否及如何重复背景图像 |
|
|
text(文本) |
fontSize |
字体大小 |
|
fontWeight |
字体粗细 |
|
|
textAlign |
排列文本 |
|
|
font |
设置同一行字体属性 |
|
|
color |
字体颜色 |
|
|
padding(边距) |
padding |
元素填充 |
|
paddingTop |
上边距 |
|
|
paddingBotton |
下边距 |
|
|
paddingLeft |
左边距 |
|
|
paddingRight |
右边距 |
|
|
border(边框) |
border |
设置四个边框属性 |
|
|
borderTop borderBotton borderLeft borderRight |
上 下 左 右 |
常用事件
|
名称 |
描述 |
|
onclick |
单击某个对象时调用事件 |
|
onmouseover |
鼠标移到某元素之上 |
|
onmouseout |
鼠标从某元素移开 |
|
onmousedown |
鼠标按钮被按下 |
HTML元素.className=”样式名称”;:可设置或返回元素的class样式
获取样式的属性值：HTML元素.style.样式属性；
JS操作SCC样式：
dom.style.样式名称=”样式值”;
dom.style.cssText=”属性名:属性值；属性名:属性值”
dom.className=”标签中的class的属性值”
上一篇： JQ+css3 导航栏到底部上移