DOM api总结

DOM–文档对象模型

DOM 树

  • DOM元素树:以Document对象为根,每个HTML标签都是元素树的一个节点
  • DOM节点树:以document对象为根,每个标签、文本、属性、注释都是节点树上的一个节点

节点树和元素树的区别

节点 节点树 元素树
父节点 parentNode parentElementNode
全部子节点 childNode children
第一个子节点 firstChild firstElementChild
最后一个子节点 lastChild lastElementChild
下一个兄弟节点 nextSibling nextElementSibling
上一个兄弟节点 previousSibling previousElementSibling

node对象的几个属性

  • parentNode:node类型,当前节点的唯一的直接的父节点对象。
  • childNode:nodelist类型,当前节点的所有子节点,组成的一个类数组对象。
  • firstChild:node类型,当前节点的第一个子节点
  • lastChild:node类型,当前节点的最后一个子节点
  • nextSibling:node类型,当前节点的下一个兄弟节点
  • previousSibling: node类型,当前节点的上一个兄弟节点
  • nodeName:String类型
  • nodeType:Number类型
  • nodeValue:String类型

DOM 节点类型

节点类型 节点描述 nodeName nodeValue nodeType
element 元素节点 元素名 null 1
attribute 属性节点 属性名称 属性值 2
text 文本节点 #text 文本内容 3
comment 注释 #comment 注释文本 8
document 文档 #document null 9
Notation DTD中的声明 符号名称 null 12

DOM 节点关系

DOM 节点关系

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
//获取元素节点中的内容
el.innerHTML;//获取/设置元素中的HTML内容
el.textContent;//获取/设置元素中的纯文本 --IE8下不支持
el.innerText;//获取/设置元素中的纯文本 --火狐下不支持
//与元素节点的属性相关的DOM属性
el.attributes;//获取元素节点的所有属性节点--类数组对象
el.attributes['属性名'];//获取元素身上指定属性的值
el.getAttribute('属性名');//获取元素身上指定属性的值
el.setAttributeNode(attrNode);//修改某属性的值
el.removeAttribute('属性名');//删除指定的属性
el.hasAttribute('属性名');//检查是否右某属性
//在DOM树中查找/选择元素节点
document.getElementById('id');
document/node.getElementsByTagName('标签名');
document.getElementsByName('name属性名');
document/node.getElementsByClassName('class名');
document/node.querySelector('css选择器');//返回第一个匹配的
document/node.querySelectorAll('css选择器');//返回所有匹配的
document.all;//获取HTML中所有元素节点对象
document.documentElement;//获取HTML标签
document.body;//获取body标签

使用DOM方法创建新节点

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
//创建属性节点
var attr = document.createAttribute('属性名');
attr.value = '属性值';
el.setAttributeNode(attr);
//创建元素节点
var el = document.createElement('元素名');
parent.appendChild(el);
//创建文本节点
var txt = document.createTextNode('文本内容');
parent.appendChild(txt);
//创建注释节点
var com = document.createComment('注释内容');
//创建新的文档片段节点
var fragment = document.createDocumentFragment();
fragment.appendChild(el);
parent.appendChild(fragment);
//把一个新创建的节点添加到现存的DOM树上,有以下2个方法
parent.appendChild(el);
parent.insertBefore(newEl, exisingChild);
//删除已有节点
var el = parentNode.removeChild(el);
//替换已有节点
replaceEl = parentNode.replaceChild(nex, exisingChild);
//删除属性节点
el.removeAttribute('属性名');
el.removeAttributeNode(attrNode);