DOM基础

DOM基础

一、DOM 介绍

DOM 中的三个字母，D（文档）可以理解为整个 Web 加载的网页文档；O（对象）可以理解为类似 window 对象之类的东西，可以调用属性和方法，这里我们说的是 document对象；M（模型）可以理解为网页文档的树型结构。

DOM 有三个等级，分别是 DOM1、DOM2、DOM3。DOM1 所支持的浏览器包括 IE6+、Firefox、Safari、Chrome 和 Opera1.7+。

PS：IE 中的所有 DOM 对象都是以 COM 对象的形式实现的，这意味着 IE 中的 DOM可能会和其他浏览器有一定的差异。

1.节点

加载 HTML 页面时，Web 浏览器生成一个树型结构，用来表示页面内部结构。DOM 将这种树型结构理解为由节点组成。

2.节点种类：元素节点、文本节点、属性节点。

二．查找元素

元素节点方法

1. getElementById() 获取特定 ID 元素的节点

2. getElementsByTagName() 获取相同元素的节点列表

3. getElementsByName() 获取相同名称的节点列表

4. getAttribute() 获取特定元素节点属性的值

5. setAttribute() 设置特定元素节点属性的值

6. removeAttribute() 移除特定元素节点属性

三．DOM 节点

1.node节点属性

节点可以分为元素节点、属性节点和文本节点，而这些节点又有三个非常有用的属性，分别为：nodeName、nodeType 和 nodeValue。

2.层次节点属性

节点的层次结构可以划分为：父节点与子节点、兄弟节点这两种。当我们获取其中一个元素节点的时候，就可以使用层次节点属性来获取它相关层次的节点。

• childNodes： 获取当前元素节点的所有子节点
• firstChild： 获取当前元素节点的第一个子节点
• lastChild： 获取当前元素节点的最后一个子节点
• ownerDocument： 获取该节点的文档根节点，相当与 document
• parentNode：获取当前节点的父节点
• previousSibling：获取当前节点的前一个同级节点
• nextSibling：获取当前节点的后一个同级节点
• attributes：获取当前元素节点的所有属性节点集合 四．节点操作

DOM 不单单可以查找节点，也可以创建节点、复制节点、插入节点、删除节点和替换节点。

• write()这个方法可以把任意字符串插入到文档中
• createElement()创建一个元素节点
• appendChild()将新节点追加到子节点列表的末尾
• createTextNode()创建一个文件节点
• insertBefore()将新节点插入在前面
• repalceChild()将新节点替换旧节点
• cloneNode()复制节点
• removeChild()移除节点