1、节点层次
DOM可以将任何HTML或XML文档描绘成一个由多层节点构成的结构。
节点分为不同类型,
每个节点都有:特点、数据、方法。
文档节点是每个文档的根节点
<html>
<head></head>
<body></body>
</html>
这个例子,HTML元素就是文档的子节点,称为文档元素,每个文档只能有一个文档元素。
1.1、Node类型
Dom1级定义了一个Node接口,在js中是通过Node类型实现。
除IE外,其他浏览器都可以访问这个类型。
js节点类型—>继承自:Node类型。
因此所有节点类型都共享相同的基本属性和方法。
每个节点都有一个NodeType属性,用来表明节点的类型。
节点类型由:Node类型中定义的12个数值常量 表示
常量名 | 常量值 | 描述 |
---|---|---|
Node.ELEMENT_NODE | 1 | 代表元素节点,各种标签 |
Node.ATTRIBUTE_NODE | 2 | 代表属性 |
Node.TEXT_NODE | 3 | 代表元素或属性中的文本内容,标签内部文字 |
Node.CDATA_SECTION_NODE | 4 | 代表文档中的 CDATA 部(不会由解析器解析的文本) |
Node.ENTITY_REFERENCE_NODE | 5 | 代表实体引用 |
Node.ENTITY_NODE | 6 | 代表实体 |
Node.PROCESSING_INSTRUCTION_NODE | 7 | 代表处理指令 |
Node.COMMENT_NODE | 8 | 代表注释节点 |
Node.DOCUMENT_NODE | 9 | 代表整个文档(DOM 树的根节点),document |
Node.DOCUMENT_TYPE_NODE | 10 | 向为文档定义的实体提供接口 |
Node.DOCUMENT_FRAGMENT_NODE | 11 | 代表轻量级的 Document 对象(文档的某个部分) |
Node.NOTATION_NODE | 12 | 代表 DTD 中声明的符号 |
通过这些常量,可以确定节点类型,如:
if(somenode.nodeType == 1){ //适用于所有浏览器
alert("node is an element")}
(1)、了解节点信息
nodename:
nodevalue:
值取决于节点类型
(2)、节点关系
childNodes属性:子节点,每个节点都有,保存着一个nodeList对象
nodeList对象:类数组,可以用方括号语法,length属性,基于DOM动态查询。
somenode.childNodes[0]//获取第一个节点
somenode.childNodes.item(0)//同上
parentNode:父节点。
previousSibling:上一个兄弟节点。
nextSibling:下一个兄弟节点。
firstChild:父节点的第一个子节点。
lastChild:父节点的最后一个子节点。
hasChildNodes():是否含有子节点,如果有返回true。
ownerDocument:–>指向表示整个文档的节点,直接访问文档节点。
图片来自书上,
(3)、操作节点
- appendChild():在末尾添加节点。如果传入的节点已经是文档的一部分,结果是:将节点从原来位置转移到新位置。
somenode.appendChild(newnode)//如果newnode已经有了,会将其挪过来。
- insertBefore():把节点放在特定位置,(要插入的节点,作为参照的节点)
//插入后成为最后一个子节点
somenode.insertBefore(newnode,null)
//插入后成为第一个子节点
somenode.insertBefore(newnode,somenode.firstChild)
//插入到最后一个子节点前面
somenode.insertBefore(newnode,somenode.lastChild)
- replaceChild:替换节点。(要插入的节点,要替换的节点)要替换的节点将有方法返回并移除,同时由新节点占据其位置。
- removeChild():删除节点。(要删除的节点)
- cloneNode():创建完全相同的副本,潜复制:只复制节点本身,false,深复制:true,复制节点及子节点树
- normalize():处理文本节点。