DOM介绍
DOM介绍:
D 网页文档
O 对象,可以调用属性和方法
M 网页文档的树型结构
节点:
DOM将树型结构理解为由节点组成。
节点种类:
元素节点、文本节点、属性节点等
查找元素
获取元素:
getElementById()
getElementsByTagName()
querySeletor()
元素节点属性:
tagName
innerHTML
HTML属性的属性:
id
title
style
className
属性操作:
getAttribute()
setAttribute()
removeAtrribute()
PS:style和onclick有兼容问题,现在都支持自定义属性
DOM节点
node节点属性:
nodeName 节点名称
nodeType 节点类型
nodeValue 节点值,不解析html
层次节点属性:
子节点
childNodes 获取某所有子节点,包括元素节点和文本节点
firstChild 获取第一个节点
lastChild 获取最后一个节点
父兄节点
parentNode 获取父节点
previousSibling 获取上一个同级节点
nextSibling 获取下一个同级节点
ownerDocument 根节点 ele.ownerDocument === document
attributes 属性节点的数组集合
忽略空白节点的方法:
忽略:
1
2
3
4
5
6
7
8
9
10
11
12
|
function
filterSpaceNode(nodes) {
var
ret = [];
//新数组
for
(
var
i = 0; i < nodes.length; i++) {
//如果识别到空白文本节点,就不添加数组
if
(nodes[i].nodeType == 3 && /^\s+$/.test(nodes[i].nodeValue)) {
continue
;
}
//把每次的元素节点,添加到数组里
ret.push(nodes[i]);
}
return
ret;
}
|
移除:
1
2
3
4
5
6
7
8
9
|
function
removeWhiteNode(element) {
var
nodes = element.childNodes;
for
(
var
i = 0; i < nodes.length; i++) {
if
(nodes[i].nodeType === 3 && /^\s+$/.test(nodes[i].nodeValue)) {
nodes[i].parentNode.removeChild(nodes[i]);
}
}
return
element;
}
|
节点操作
创建节点:
document.createElement() 创建一个元素节点
document.createTextNode(txt) 创建文本节点
插入节点:
ele.appendChild(newChild) 将新节点添加到某个节点的子节点末尾
insertBefore(newChild,refChild) 指点节点前面插入新节点
insertAfter() 需要自定义
1
2
3
4
5
6
7
8
9
10
11
|
function
insertAfter(newElement, targetElement) {
//得到父节点
var
parent = targetElement.parentNode;
//如果最后一个子节点是当前元素,那么直接添加即可
if
(parent.lastChild === targetElement) {
parent.appendChild(newElement);
}
else
{
//否则,在当前节点的下一个节点之前添加
parent.insertBefore(newElement, targetElement.nextSibling);
}
}
|
替换复制移除:
replaceChild(newChild,refChild) 替换节点,必须是某元素的子节点
cloneChild(deep) 克隆节点
removeChild(oldChild) 移除节点