DOM的Document类型、Element类型、Text类型和Comment类型的方法

DOM：Document Object Model文档对象模型。式js中用来操作html和xml文档的api。

背景：1998年10月DOM1被W3C推荐使用，大部分主流浏览器使用，不包括IE，IE中的DOM对象是以COM对象形式实现。

Document类型

Document：表示整个html文档

属性：

• body：直接指向body元素
• head：获取html头部内容
• title：获取文档标题
• doctype：获取<!DOCTYPE>，兼容性不太强很少用
• URL：获取完整的URL
• domain：获取域名
• referrer：获取连接到当前页面的上一个页面的URL
• imgs：获取页面所有的img对象，返回值HTMLCollection集合
• forms：获取所有的form表单对象，返回值HTMLCollection集合
• links：获取文档中带有href属性的元素

方法：

1. getElementById()：
   作用：通过元素的id获取元素节点。
   参数：想要获取的元素id。
   返回值：返回找到的第一个元素，如果没有返回null。

2. getElementsByClassName()：
   作用：通过元素的class name获取元素节点。
   调用者：document
   参数：为一个字符串表示元素的类名，也可以由空格隔开。
   返回值：HTMLCollection，可以使用数组的操作方式去处理结果。

3. getElementsTagName("")：
   作用：通过元素的元素名或者标签名找到对应的元素。
   调用者：document
   参数：为一个字符串，表示元素的元素名（标签名）。
   返回值：HTMLCollection list包含一个或多个元素，可以使用数组的操作方式去处理结果。

4. getElementsName("")：
   作用：通过元素的name属性找到对应的元素。
   调用者：document
   参数：为一个字符串，表示元素的name。
   返回值：NodeList list 包含一个或多个元素，可以使用数组的操作方式去处理结果。

Element类型

Element：表示HTML元素。
属性：

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

设置属性：

• 设置类名

var node = document.getElementByClassName("one")[0];
//方法一
node.className = "two";
//方法二
node.setAttribute("className","three"); 

• setAttribute()：
  作用：给获取到的元素设置属性。
  调用者：要设置属性的元素。
  参数：两个参数，属性名 对应的值。
  注：要设置的值如果存在则修改原来的值，如果不存在则添加。
• getAttribute("")：
  作用：获取到相应元素的某个属性。
  调用者：元素。
  参数：属性名。
  返回值：对应的属性值。

node.getAttribute("class");

• removeAttribute(“id”)：移除属性
  作用：移除相应元素的某个属性。
  调用者：元素。
  参数：属性名。
• 创建元素：
  createElement()：创建一个dom元素节点。
  调用者：document
  参数：一个参数，要创建元素的标签名 在html中部区分大小写，在xml中区分大小写。

// 创建LI节点
    var node = document.createElement("LI");
    // 创建一个text节点
    var textNode = document.createTextNode("hello");
    // 将text节点追加到li节点上
    node.appendChild(textNode);

• firstElementChild：第一个子节点
  lastElementChild：最后一个子节点
  nextElementSibiling：下一个子节点
  previousElementSibiling：上一个子节点
  childElementCount：该节点子元素的数量
  innerHtml：该元素内容
  textContent，innerText：该元素内部内容

Text类型：

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

Comment类型：

Comment：表示注释
创建注释节点：

  var cNode = document.createComment("这是一个注释");