1.DOM模型简介
1.1 DOM含义:Document Object Model的缩写,简称文档对象模型
1.2 DOM的相关概念:
a)根节点(唯一性):文档中的html标签(顶层标签,唯一的)
b)元素节点:文档中的其他标签(除html标签外)
c)属性节点:标签的属性,如:<a href="test.html"></a>
d)文本节点:网页上的文字,如:<p>静夜思</p>
e)节点之间的关系:同级关系、父子关系
f)DOM树形图:从html根节点起,向下扩散节点
形成倒置树状;
2. W3C访问DOM树节点
2.1 W3C:万维网联盟,Web技术的标准发布机构(相当于技术领域的联合国)
2.2 W3C提供的三类DOM标准
CoreDOM:核心DOM,适用于各种结构化文档;
结构化文档:HTML、XML
XMLDOM:专用于XML文档的标准;
HTMLDOM:专用于HTML文档的标准。
3. CoreDom
3.1 查看/修改属性节点
getAttribute("属性名")
setAttribute("属性名","属性值")
3.2 层次查找节点
firstElementChild:父节点下的第一个子节点
lastElementChild:父节点下的最后一个子节点
previousElementSibling:下一个同级节点
parentNode:父节点
3.3 创建和增加节点
a)创建节点:
document.createElement("标签名")
b)父节点末尾增加子节点:
父节点.appendChild(子节点)
c)在指定节点前面添加新节点:
父节点.insertBefore(新节点,指定节点)
d)克隆节点:
//旧节点下所有子节点都克隆
旧节点.cloneNode(true);
3.4 删除和替换节点
a)删除节点:
父节点.removeChild(子节点)
b)替换节点:
父节点.replaceChild(新节点,旧节点)