感觉自己的DOM基础很不扎实,最近在看<<javaScript高级程序>>,学习这一模块,下面是自己的学习成果.
- 节点层次
- Node类型
- 节点关系
- 操作节点
节点层次
DOM 可将任何 HTML , XML 描绘成由多层节点构成的结构.
节点分为几种不同的类型,每种类型分表表示文档中不同的信息及标记.
每个节点都拥有各自的特点,数据 和 方法,节点之间都存在某种关系.
节点类型共有 12 种,他们都继承自 同一个 基类型 Node类型 (不一定是直接继承)
Document.__proto__
ƒ Node() { [native code] }
Element.__proto__
ƒ Node() { [native code] }
Text.__proto__.__proto__
ƒ Node() { [native code] }
1.Node类型
Node是一个构造函数,或者叫类
Node
ƒ Node() { [native code] }
每一个节点(Node子类的实例)都直接或间接的继承Node类,在Node类型的基础上定义了Node接口 , 所以所有节点类型都共享Node类的属性和方法.
- nodeType:节点的类型
- nodeName:节点的名字
- nodeValue:节点的value
- 节点关系的系列方法(见下)
var node = document.getElementById('box');
//node是一个节点类型实例
node.nodeType //(共12中类型)
node.nodeName
node.nodeValue
2.节点关系
前面说了,文档中所有的节点都存在关系.
关系指针都是只读的,不可修改
每一个节点都有
属性
- childNodes
- parentNode
- ownerDocument
方法
- hasChildNodes()
childNodes
返回值是NodeList对象,他是 类数组对象 (不做过多解释),
parentNode
返回值是Node节点对象
ownerDocument
返回值#document,节点对象
hasChildNodes()
有无子节点,返回值Boolean 比查询length更好
如何访问保存在NodeList中的节点?
var firstChild = someNode.childNodes[0] //最常用
var firstChild = someNode.childNodes.item[0]
var length = someNode.childNodes.length
3.操作节点
上文说节点的关系指针是不可以改变的,所以需要操作dom本身.
下面的操作都是操作 子节点 的
- appendChild()
- insertBefore()
- replaceChild()
- removeChild()
appendchild()
用于向childNodes
的末尾添加一个节点,
添加节点后,childNodes的新增节点, 父节点 父节点的最后一个节点的指针都会相应的更新
返回值 新增节点
如果新增节点是文档中已存在的一部分,那结果就是将此节点从原来的位置转移到新的位置.
文档中同一个节点 不可能存在文档中不同的位置,
insertBefore()
要插入到childNodes
列表的某一个特定位置上,接受两个参数,
arg1:要插入的父节点,
arg2:参考节点 若为null
则同appendChild()
一样
返回值:插入节点
replaceChild()
arg1:要插入的节点
arg2:要替换的节点
返回值:替换节点
注意:使用此方法, 该节点的所有关系指针都会被从他替换的节点复制过来,被替换的节点仍然存在于文档中,但是他没有了自己的位置.
removeChild()
移除节点.
arg:要移除的节点,
返回值:移除节点
其他方法:
cloneNode()
normalize()