前端DOM学习总结(一)

感觉自己的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.节点关系

前面说了,文档中所有的节点都存在关系.

关系指针都是只读的,不可修改

每一个节点都有

属性

childNodesparentNodeownerDocument

方法

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()