JavaScript操作DOM对象

DOM概念：是Document Object Model的缩写，即文档对象模型，是基于文档编程的一套API接口。用JavaScript操作DOM时通常分为三类：DOM Core（核心）、HTML-DOM和CSS-DOM。

使用DOM Core访问HTML文档的节点主要有两种方式

1、使用getElement系列方法访问指定节点

如：

2、根据层次关系访问节点

parentNode：返回节点的父字节

childNodes：返回子节点集合

fristChild：返回节点的第一个子节点

lastChild：返回最后一个节点

如：

注意：用以上属性访问的节点中间不能加入空行，如果加入空行的话，浏览器会把节点中的空行也认为是一个子节点，所以很容易就会使我们想要拿到的值异常，一般会出现undefined。所以我们需要在之前的属性中加入element，比如fristChild加入后变成fristElementChild。

HTML DOM提供了获取及改变节点属性值的标准方法

getAttribute（“属性名”）:用来获取属性的值

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

使用JavaScript操作节点的方法有：

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

A.appendChild（B）：把B节点追加至A节点的末尾

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

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

replaceChild（新节点，旧节点）：替换节点

示例：

总结：使用JavaScript操作DOM对象其本质就是对节点的增、删、改操作，只要掌握了其中的精髓，就不难灵活运用DOM对象，因此想要理解并举一反三，只要多用，才能将其掌握。