JavaScript —— DOM 操作DOM简介 DOM （Document Object Model）称为文档对

DOM简介

DOM （Document Object Model）称为文档对象模型
通过这个对象模型，JavaScript 获得创建动态 HTML 的所有力量
HTML 的标准对象模型和编程接口。它定义了：
1. 作为对象的 HTML 元素
2. 所有 HTML 元素的属性
3. 访问所有 HTML 元素的方法
4. 所有 HTML 元素的事件
总之，HTML DOM 是关于如何获取、更改、添加或删除 HTML 元素的标准。

节点分类

元素节点： <div></div>
属性节点： id = 'box'
文本节点：在标签中的文字

DOM 方法

获取元素节点

方法	描述
`document.getElementById(id)`	通过元素 id 来查找元素
`document.getElementsByTagName(TagName)`	通过标签名来查找元素
`document.getElementsByClassName(name)`	通过类名来查找元素
`document.getElementsByName(name属性值)`	返回带有指定名称的对象的集合（一般在表单中使用）

  // 查找 id 为 box 的结点
  var box = doucument.getElementById('#box')

  // 查找所有的 p标签，会返回一个伪数组（类似数组）
  var p = document.getElementsByTagName('p')

  // 查找所有的 .box 类名标签，会返回一个伪数组
  var p = document.getElementsByClassName('.box')

通过 css 选择器查找元素节点

方法	描述	返回值
`document.querySelector( css选择器 )`	找到第一个符合条件的元素节点	一个元素节点
`document.querySelectorAll(css选择器)`	找到所有符合条件的元素节点	伪数组

!注意：参数为 CSS选择器格式的字符串（id、类名、类型、属性、属性值）


  // 返回 class="intro" 的所有 <p> 元素列表：
  var x = document.querySelectorAll("p.intro");

获取/设置元素的属性值：

方法	描述
`element.setAttribute(attribute, value)`	传入属性名及设置的值
`element.getAttribute(attributeName)`	括号传入属性名，返回对应属性的属性值
`element.removeAttribute(attributeName)`	移除对应属性


  var box = document.getElementById('box')

  //设置 div 节点的 id 属性为 box
  box.setAttribute('id','box');

  //获取 div 节点的 id 属性值
  var divId =  box.getAttribute('id','box');

  // 移除 id 属性
  box.removeAttribute('id','box');

修改节点的样式

element.style.样式 = xxxx

  box.style.color=“#eea”;

创建节点

方法	描述
`document.createElement(标签名)`	创建一个html元素
`document.createTextNode(文本)`	创建一个文本节点
`document.createAttribute(属性名)`	创建一个属性节点

  // 创建一个超链接标签
  var a = document.createElement('a')

  //获取 div 节点的 id 属性值
  var classNode =  document.createAttribute('class')

增添删节点

方法	描述
`element.appendChild(Node)`	往element内部最后面添加一个节点，参数是节点类型
`elelment.insertBefore(newNode,existingNode)`	在element内部的中在existingNode前面插入newNode
`element.removeChild(Node)`	删除当前节点下指定的子节点删除成功返回该被删除的节点，否则返回null
`elelment.replaceChild(newnode,oldnode)`	新节点替换掉旧节点
`element.cloneNode(true/false)`	复制节点，true 代表复制内容 / false 代表复制标签

DOM 常用属性

获取当前元素的子节点

属性	描述
element.chlidren	返回当前元素所有子元素节点对象，只返回HTML节点
element.chilidNodes	返回当前元素多有子节点，包括文本，HTML，属性节点。（回车也会当做一个节点）
element.firstChild	返回当前元素的第一个子节点对象
element.lastChild	返回当前元素的最后一个子节点对象

获取当前元素的父节点

属性	描述
element.parentNode	返回当前元素的父节点对象

获取当前元素的同级元素

属性	描述
element.nextSibling	返回当前元素的下一个同级元素没有就返回null
element.previousSibling	返回当前元素上一个同级元素没有就返回null

获取当前元素的文本

属性	描述
element.innerHTML	返回元素的所有文本，包括html代码
element.innerText	返回当前元素的自身及子代所有文本值，只是文本内容，不包括html代码

获取当前节点的节点类型

node.nodeType
nodeType nodeName nodeValue
元素节点 1 标签名 null
属性节点 2 属性名属性值
文本节点 3 #text 文本内容

	nodeType	nodeName	nodeValue
元素节点	1	标签名	null
属性节点	2	属性名	属性值
文本节点	3	#text	文本内容