DOM

DOM基本定义

DOM（文档对象模型）是针对 HTML 和 XML 文档的一个 API（应用程序编程接口）。DOM 描
绘了一个层次化的节点树，允许开发人员添加、移除和修改页面的某一部分。

节点层次

DOM 可以将任何 HTML 或 XML 文档描绘成一个由多层节点构成的结构。节点分为几种不同的类
型，每种类型分别表示文档中不同的信息及（或）标记。每个节点都拥有各自的特点、数据和方法，另外也与其他节点存在某种关系。节点之间的关系构成了层次，而所有页面标记则表现为一个以特定节点为根节点的树形结构。以下面的 HTML 为例：

 
  
  
  
  
 
Hello World!
 
  

文档节点是每个文档的根节点。在这个例子中，文档节点只有一个子节点，即元素，我们称之为文档元素。文档元素是文档的最外层元素，文档中的其他所有元素都包含在文档元素中。每个文
档只能有一个文档元素。在 HTML 页面中，文档元素始终都是元素。在 XML 中，没有预定义
的元素，因此任何元素都可能成为文档元素。
每一段标记都可以通过树中的一个节点来表示：HTML 元素通过元素节点表示，特性（attribute）
通过特性节点表示，文档类型通过文档类型节点表示，而注释则通过注释节点表示。总共有 12 种节点类型，这些类型都继承自一个基类型。

Document对象

属性：对象类型：body、title、URL

• body

 console.log(document.body);  //body对象
 document.body.style.backgroundColor='gray';

• title

console.log(document.title);
 document.title='AAA';

• URL

console.log(document.URL);     //获得当前路径 

集合类型

Document集合类型：images、forms、links

• images

console.log(document.images);
document.images[0].src='images/1.jpg'  //改图片
document.images[1].style.border='1px solid gray';
console.log(document.images.length);

• forms

    //这个要在div里面写
             // console.log(document.forms);

• links 超链接

console.log(document.links);
百度     //这个要在div里写
document.links[0].innerHTML='淘宝' //把百度改成淘宝
document.links.style.textDecoraction='none';

节点对象

常用的属性和方法：

• 创建新的 HTML 元素 (节点) - appendChild()
• 替换 HTML 元素 - replaceChild()
• 返回元素的父节点-childNodes()，以 NodeList(类数组) 对象;包括元素节点和文本节点。
• children: 孩子节点（只有元素节点）
  (可以使用 length 属性来确定子节点的数量，然后就能够遍历所有的子节点并提取您需要的信息。)
• 返回位于相同节点树层级的前一个元素-previousSibling();
• 返回位于相同节点树层级的下一个节点-extSibling();
• 向元素添加新的子节点9，作为最后一个子节点-ppendChild();
• 复制元素-cloneNode();
• 设置或返回元素的内容-innerHTML=’ ';
• 返回元素的最后一个子元素-lastChild();

索引

每个元素都有索引，索引是从0开始的，根据索引号可以找到对应的元素。
语法：名称[索引]；

      
111
      
222
      
333
    

	

删除节点

• removeChild:删除节点
• cloneNode(参数):复制节点
  返回值：复制子节点
  参数true:复制子节点
  参数false:不复制子节点
  

创建添加节点

• createElement 创建元素节点

• createTextNode 创建文本节点

• write 写入文本

• insertBefore 在指定节点前插入

• appendChild 追加孩子节点