什么是DOM及DOM操作 by varown

一、什么是DOM？

DOM就是文档对象模型，是针对于xml但是扩展用于HTML的应用程序编程接口，定义了访问和操作HTML的文档的标准。

 

二、DOM的常用方法

 

获取节点

// 通过id号来获取元素，返回一个元素对象
document.getElementById(idName) 
      
// 通过name属性获取id号，返回元素对象数组 
document.getElementsByName(name)  
   
// 通过class来获取元素，返回元素对象数组
document.getElementsByClassName(className)   

// 通过标签名获取元素，返回元素对象数组
document.getElementsByTagName(tagName) 

//不需要兼容IE      
document.querySelector('#idxxx')

document.querySelectorAll('.red')[0]

document.querySelectorAll('#idxxx')[0]

 

 

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

// 括号传入属性名，返回对应属性的属性值
element.getAttribute(attributeName)

// 传入属性名及设置的值
element.setAttribute(attributeName,attributeValue)

 

 

创建节点Node

// 创建一个html元素，这里以创建h3元素为例
document.createElement("h3")

// 创建一个文本节点；
document.createTextNode(String);

// 创建一个属性节点，这里以创建class属性为例
document.createAttribute("class");

 

 

增添节点

// 往element内部最后面添加一个节点，参数是节点类型
element.appendChild(Node);

// 在element内部的中在existingNode前面插入newNode
elelment.insertBefore(newNode,existingNode); 

 

 

删除节点

//删除当前节点下指定的子节点，删除成功返回该被删除的节点，否则返回null
element.removeChild(Node)

 

 

三、DOM常用属性

获取当前元素的父节点

// 返回当前元素的父节点对象
element.parentNode

 

 

获取当前元素的子节点

// 返回当前元素所有子元素节点对象，只返回HTML节点
element.chlidren

// 返回当前元素多有子节点，包括文本，HTML，属性节点。（回车也会当做一个节点）
element.chilidNodes

// 返回当前元素的第一个子节点对象
element.firstChild

// 返回当前元素的最后一个子节点对象
element.lastChild

 

 

获取当前元素的同级元素

// 返回当前元素的下一个同级元素 没有就返回null
element.nextSibling

// 返回当前元素上一个同级元素 没有就返回 null
element.previousSibling

 

 

获取当前元素的文本

// 返回元素的所有文本，包括html代码
element.innerHTML

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

 

 

获取当前节点的节点类型

// 返回节点的类型,数字形式（1-12）
// 常见几个1：元素节点，2：属性节点，3：文本节点。
node.nodeType   

 

 

设置样式

// 设置元素的样式时使用style
element.style.color=“#eea”;