JavaScript操作DOM对象

DOM操作

简称文档对象模型，操作时分为三个方面：DOM Core(核心)，HTML-DOM,CSS-DOM

节点和节点关系

1. 整个文档是一个文档节点

2. 每个html标签是一个元素节点

3. 包含在html元素的文本是文本节点

4. 每个html属性是一个属性节点

5. 注释属于注释节点

6. 使用，父，子，同胞等术语描述节点的层次关系，顶部节点被称为根，一个节点拥有任意数量的子节点

访问节点

1. 使用getElement系列方法访问指定节点（访问时会忽略文档结构）

   1. getElementById(),返回对拥有指定id的第一个对象的引用，一般访问div，图片，表单元素，网页标签，要求访问对象的id是唯一的

   2. getElementsByName(),返回带有指定名称对象的集合，一般用于访问具有相同name属性的元素

   3. getElementsByTagName(),返回带有指定标签的对象的集合，一般用于访问一组相同的元素

   4. write（），向文档写入文本，html表达式或javascript代码

2. 根据层次关系访问节点（短距离查找元素）

   1. parentNode 返回节点的父节点

   2. childNodes 返回子节点的集合，访问：childNodes[i]

   3. firstChild 返回节点的第一个子节点

   4. lastchild 返回节点的最后一个子节点

   5. nextSibling 下一个节点

   6. previousSibling 上一个节点

获取子节点时，换行也算节点数，为消除影响，使用以下方法

1. children 所有子元素

2. lastElementChild 返回节点的最后一个子节点

3. firstElementChild 返回节点的第一个子节点

4. nextElementChild 下一个节点

5. previousElementsibling 上一个节点

节点信息

常用属性：

1. nodeName 节点名称，即为标签名

2. nodeValue 节点值

3. nodeType 节点类型，如下，左为类型，右为值

   元素element------1，属性attr-----2，文本text-------3，注释 comments----8，文档 document--------9

操作节点

1.操作节点的属性

getAttribute("属性名")：用来获取属性的值

setAttribute（“属性名”，“属性值”）：用来设置属性的值

2.创建，插入节点

createElement（tagName），创建一个标签名为tagName的新元素节点

A.appendChild(B)，把B节点插入到A节点的末尾

insertBefore（A,B），把A节点插入B节点之前

cloneNode（deep），复制某个指定的节点

3.删除和替换节点

removeChild（node），删除指定的节点

replaceChild（newNode，oldNode），用其他的节点替换指定的节点

4.更改元素的内容

innerHTML,,可以识别标签

innerText，把标签当做纯文本使用

5.操作节点的样式

1. HTML.style.样式属性=“值”；

2. HTML.className="样式名称";//更改类名

6.获取元素的样式

HTML元素.style.样式属性；/ HTML元素.currentStyle.样式属性