DOM文档对象模型—节点操作

DOM
Document Object Model 文档对象模型
文档：表示整个的HTML网页文档
对象：将网页中的每一个部分转换为了一个对象
模型：使用模型来表示对象之间的关系，这样更方便获取对象

实例化：

1. 通过dom拿到我们想要的节点
2. 怎么通过dom创建节点

节点类型

节点：Node——构成HTML文档最基本的单元

Document类型
表示整个html文档
属性：

body：直接指向body元素
head：获取html头部内容
title：获取文档标题
doctype：获取<!DOCTYPE> 兼容性不太强，很少用
URL：获取完整的URL
domain：获取域名
referrer：获取链接到当前页面的那个页面的url
images：获取页面所有的img 返回值：HTMLCollection类数组对象
forms：获取所有的form对象 返回值：HTMLCollection类数组对象
links：获取文档中带有href属性的a元素
documentElement:html根标签

方法：

方法名	作用	调用者	参数	返回值
getElementById()	通过元素的id获取元素节点	document	想要获取的元素id	找到的第一个元素，如果没有，返回null
getElementsByTagName()	通过元素的元素名(标签名)找到对应元素	document	一个字符串，表示元素的元素名(标签名)	HTMLCollection(类数组对象)， list包含一个或多个元素 可以使用数组的操作方式去处理结果
getElementsByClassName()	通过元素的class name获取元素节点	document	一个字符串，表示元素的类名	HTMLCollection(类数组对象) ，list包含一个或多个元素 可以使用数组的操作方式去处理结果
getElementsByName()	通过元素的name属性找到对应元素(主要用于表单)	document	一个字符串，表示元素的name	NodeList (类数组对象)， list包含一个或多个元素 可以使用数组的操作方式去处理结果

Element类型
属性：

id ：元素在文档中的唯一标识符
className ：与元素的class特性相对应，可以重复，可以有多个，用空格分割
title ：与元素相关的附加说明信息
src： img具有的属性
alt ：img具有的属性

方法：

1. 设置属性:
   第一种： node.className=“对应的值”
   第二种： node.setAttribute(“属性名”,“对应的值”);

   setAttribute()
   作用：给获取到的元素设置属性
   调用者：要设置属性的元素
   参数：两个参数（属性名 对应的值）
   注意点：要设置的值存在的话，修改原来的值；不存在的话，添加

2. 获取属性：
   node.getAttribute()

   作用：获取到相应元素的某个属性
   调用者：元素
   参数：属性名
   返回值：对应的属性值

3. 移除属性：
   removeAttribute()

   作用：移除相应元素的某个属性
   调用者：元素
   参数：属性名
   返回值：对应的属性值

创建元素
createElement()

作用：创建一个dom元素节点
调用者：document
参数：一个参数，要创建元素的标签名；在html中不区分大小写
注意点：要设置的值存在的话，修改原来的值；不存在的话，添加

孩子、兄弟节点属性：
firstElementChild 某个节点的第一个孩子元素节点
lastElementChild 某个节点的最后一个孩子元素节点
nextElementSibling 某个节点的下一个兄弟元素节点
previousElementSibling 某个节点的上一个兄弟元素节点
childElementCount 该节点子元素的数量
innerHTML 获取元素内部的HTML代码
textContent 该元素内部的text

Text类型
文本节点。包含的是可以按照字面解释的存文本内容。

方法名	作用	调用者	参数	返回值
length	文本长度
appendData()	追加文本	文本节点	要追加的文本内容	追加后的文本
deleteData()	删除文本	文本节点	两个参数(index_start，count)	删除后的文本
insertData()	插入文本	文本节点	两个参数(index_start，要插入的文本)	插入后的文本
replaceData()	替换文本	文本节点	三个参数(index_start，count，替换的文本)	替换后的文本
splitText()	将一个文本节点分为两个	文本节点	分割点的位置	分割好的后面的文本节点
substringData()	提取文本节点中的字符串	文本节点	两个参数(index_start，count)	提取出来的字符串，(不改变原文本)
createTextNode()	创建一个文本节点	document	文本内容	text

Comment(注释)类型
注释：
HTML <!-- -->
CSS /* */
JS 单行//，多行/* */
方法：
createComment();
作用：创建注释节点

DOM节点操作

1. appendChild()
   作用：向一个父节点中添加一个新的子节点
   语法：父节点.appendChild(新的子节点);
   注意点：任何dom节点不能同时出现在文档的多个位置，如果追加的节点是原本存在的，那只会改变节点位置

//1. 创建节点
//document.createElement("TagName");
var myDiv = document.createElement('div');
//2. 给节点添加文本内容
myDiv.innerText = "这是新创建的div";
//3. 找到页面上的一个节点
var rootDiv = document.getElementsByTagName("div")[0];
//4. 将myDiv追加到rootDiv上
rootDiv.appendChild(myDiv);

2. insertBefore()
   作用： 在指定的子节点前面插入新的子节点
   语法：父节点.insertBefore(新节点，旧节点);

3. removeChild()
   作用：删除某个子节点
   语法：父节点.removeChild(要删除的子节点);

4. replaceChild()
   作用：使用指定的子节点替换已有的新节点
   语法：父节点.replaceChild(新节点，旧节点);

5. cloneNode()
   作用：复制节点
   语法：要复制的节点自身.cloneNode(boolean);
   参数：一个可选参数boolean，默认为false，浅克隆，只复制标签，如果为true，那就是深克隆，会复制标签和内容