文档对象模型DOM

文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展置标语言的标准编程接口。
DOM描绘了一个层次化的节点树，允许开发人员添加，移除，修改页面的某一部分。
DOM可以将任何HTML或XML文档描绘成一个由多层节点构成的结构。节点分为几种不同的类型，每种类型分别表示文档中不同的信息或标记。每个节点拥有各自的特点，数据和方法，另外也有与其他节点存在某种关系。节点之间的关系构成了层次，所有页面标记则表现为一个以特定节点为根节点的树形结构。

构造函数树

Node、Document、Element、Text、Comment

1.Node类型

DOM1级定义为一个Node接口，该接口将由DOM中的所有节点类型实现。除了IE之外，在其他所有浏览器中都可以访问到这个类型。javascript中所有的节点类型都继承自Node类型，所有节点类型都共享着相同的基本属性和方法。

• dom中node的属性和方法

  var a1 = document.getElementById('a1');
  console.log(a1.nodeType);//返回节点类型
  console.log(a1.nodeName);//返回节点名称
  console.log(a1.nodeValue); //返回节点的值
  console.log(a1.childNodes);//返回节点的nodelist集合(子节点)
  console.log(a1.childNodes[0]);//可以通过下标去获取元素，如果想使用数组方法，要先转换成数组
  console.log(a1.parentNode);//返回父节点
  console.log(a1.previousSibling);//返回上一个兄弟节点(空白文本节点会被识别到)
  console.log(a1.nextSibling);//返回下一个兄弟节点
  console.log(a1.firstChild);//获取元素中的第一个子元素
  console.log(a1.lastChild);//获取元素中的最后一个子元素
  console.log(a1.ownerDocument);//返回整个文档节点document
  console.log(a1.hasChildNodes());//检测是否是非空节点
  

• dom中node操作的方法

  //追加内容
  var p = document.createElement("p");
  var p_text = document.createTextNode('xiaoming');
  p.appendChild(p_text);
  console.log(p);
  a1.appendChild(p);
  //有参考的追加元素(指定位置的追加),如果第二个参数为null与appendChild等价
  var p2 = document.createElement("p");
  var p2_text = document.createTextNode('xiaohong');
  p2.appendChild(p2_text);
  a1.insertBefore(p2,a1.childNodes[2]);
  //替换元素
  var new_text = document.createTextNode('今天天气很好，小蓝哭了！') 
  a1.replaceChild(new_text,a1.childNodes[1]);
  //删除元素
  a1.removeChild(a1.childNodes[0]);
  a5.normalize();//删除2个文本节点中间的空格然后合成一个文本 
  var b1 = a1.cloneNode(true);//默认为浅拷贝，可以指定值为true进行深拷贝
  //拷贝时，不建议元素本身有事件，在拷贝前建议移除元素的事件
  

   2.Document类型

   Javascript通过使用Document类型表示文档。在浏览器中，document对象是HTMLDocument的一个实例，表示整个HTML页面。document对象是window对象的一个属性，因此可以直接调用。HTMLDocument继承自Document。

  文档子节点 可以继承Node中所有的属性和方法

• document的属性和方法

  console.log(document.documentElement);//HTML
  console.log(document.body);//body
  console.log(document.doctype);//版本信息
  console.log(document.title);//网页标题
  console.log(document.URL);//当前的URL地址
  console.log(document.domain);//取得域名 需要发布到服务器才可以获取
  console.log(document.referrer);//链接到当前页面的页面URL
  console.log(document.images);//取得所有的IMG对象
  console.log(document.forms);//取得所有的表单元素
  console.log(document.links);//取得所有的A元素
  var bs = document.getElementsByTagName('b');//获取B标签
  var names = document.getElementsByName('username'); //获取有username名称的控件
  bs[0].onclick=function(){
      console.log(111);
  }
  names[0].value="xiaoming";
  var classs = document.getElementsByClassName('red');//获取有red类的元素
  for(var i = 0; i<classs.length;i++){
      classs[i].style.color = 'red';
  }
  

  3.Element类型 

  所有的HTML元素都由HTMLElement类型表示，或者其子类型表示。每个HTML元素都应具有 如下一些属性以及html元素特有的属性。  

  id   元素在文档中的唯一标识符

  title   有关元素的附加说明信息

  className  与元素class特性对应

  src   img元素具有的属性

  alt   img元素具有的属性

  lang  元素内容的语言代码，很少使用！

  dir   语言方向，ltr,rtl 左到右，右到左、

  每个元素都有一个或者多个特性，这些特性的用途是给出相应元素或内容的附加信息。可以通过属性访问到该属性对应的值,特性的名称是不区分大小写的，即"id""ID"表示相同的特性，另外需要注意的是，根据HTML5规范，自定义特性应该加上data-前缀，以便验证。

• element的属性和方法

  console.log(a1.id);
  console.log(a1.title);
  a1.className="blue";//element的属性可以获取也可以直接进行设置
  console.log(a1.src);
  console.log(a1.alt);
  a1.style.color = 'red';//设置元素的样式
  console.log(a1.getAttribute('id'));//获取某个元素的某个属性，参数为属性名
  a1.setAttribute('title','小明日记');//设置某个元素的属性
  
  console.log(a1.children);//子元素集合
  console.log(a1.firstElementChild);//第一个子元素
  console.log(a1.lastElementChild);//最后一个子元素
  console.log(a1.nextElementSibling);//下一个兄弟元素
  console.log(a1.previousElementSibling);//上一个兄弟元素
  console.log(a1.childElementCount);//子元素个数
  
  console.log(a1.innerHTML);//返回标签中的HTML内容，当使用它去设置一个元素的内容时，我们需要去考虑填写的字符串是否为正确的HTML代码的问题！
  console.log(a1.innerText);//返回标签中的文本内容，获取每个标签中的文本，单独一行
  console.log(a1.textContent);//返回标签中的文本内容,会考虑元素文本的格式，不去除空格和回车
  

  4.Text类型(文本类型)

  文本节点，包含的是可以按照字面解释的纯文本内容。 

• 文本节点的属性和方法

  var text = document.createTextNode('xiaoming');
  text.appendData('kule');
  length                  //文本长度
  appendData(text)            //追加文本
  deleteData(beginIndex,count)        //删除文本
  insertData(beginIndex,text)     //插入文本
  replaceData(beginIndex,count,text)      //替换文本
  splitText(beginIndex)       //从beginIndex位置将当前文本节点分成两个文本节点
  document.createTextNode(text)   //创建文本节点，参数为要插入节点中的文本
  substringData(beginIndex,count)     //从beginIndex开始提取count个子字符串

  5.Comment类型：  注释类型

  <div id = "myDiv"><!--a comment--></div>

  <!--a comment--> Comment类型