JavaScript操纵DOM对象

1.DOM操作

DOM (Document Object Model) 译为文档对象模型，是 HTML 和 XML 文档的编程接口。
HTML DOM 定义了访问和操作 HTML 文档的标准方法。
DOM 以树结构表达 HTML 文档。

2.HTML DOM 树形结构:

3.HTML DOM 节点

在 HTML DOM (Document Object Model) 中 , 每一个元素都是 节点:

• 文档是一个文档节点。
• 所有的HTML元素都是元素节点。
• 所有 HTML 属性都是属性节点。
• 文本插入到 HTML 元素是文本节点。aretext nodes。
• 注释是注释节点。

<div class='test1' id='a'>文本</div> 
/*div整体是一个元素节点 
class=‘test1’ 是一个属性节点 
文本是个文本节点，注意中间没有东西空字符也是一个文本节点*/

访问节点的方法:

1. 使用getElement系列方法访问节点

   //根据id获取一个元素节点 
   var div1 = document.getElementById("div1") 
   //根据标签名获取一堆节点的集合 
   var li1 = document.getElementsByTagName("li"); 
   //根据class获取一堆元素节点 
   var div2 = document.getElementsByClassName("content"); 
   //使用css选择器选择第一个匹配的元素节点 
   var d1 = document.querySelector(".content");
   //根据css选择器选择一批能够被匹配到的所有的元素 
   var d1 = document.querySelectorAll(".content");
   

2. 根据层次关系访问节点

   //获取li的父节点
   var li = document.getElementById("li").parentNode();
   //获取div的子节点集合
   var divs = document.getElementById("div").childNodes();
   //获取ul的第一个子节点
   var ul = document.getElementById("ul").firstChild();
   //获取ul的最后一个子节点
   var ul = document.getElementById("ul").lastChild();
   //获取div的下一个节点
   var div = document.getElementById("div").nextSibiling();
   //获取div的上一个节点
   var div = document.getElementById("div").previousSibiling();
   

节点信息

nodeName(节点名称)
nodeValue(节点值)
nodeType(节点类型)

所有的节点都有一个nodeType属性，可以判断节点类型，常用的就是以下

NodeType	Named Constant
1	ELEMENT_NODE 元素节点
2	ATTRIBUTE_NODE属性节点
3	TEXT_NODE文本节点

4.操作节点

DOM常用事件

• onload :页面加载时触发
• onclick :鼠标点击时触发
• onmouseover :鼠标滑过时触发
• onmouseout:鼠标离开时触发

操作节点属性

var mydiv = document.getElementById("div1");
//获取这个属性的值 
mydiv.getAttribute("name");
//修改，同时可以添加一个属性的值 
mydiv.setAttribute("name","cccc");
//删除一个属性 
mydiv.removeAttribute("name");

创建和插入节点

//创建一个div标签
var mydiv = document.createElement("div"); 
//给节点添加属性
mydiv.setAttribute("name","mydiv"); 
//获取到我的div 
var div1 = document.getElementById("div1"); 
//将新建的div添加到我的div中
div1.append(mydiv)

删除和替换节点

//找到本节点位置并删除
var mydiv = document.getElementById("div1");
mydiv.remove(); 

操作节点样式

//获取div节点的样式
var div = document.getElementById("div1").style;
//修改div节点的样式
div.id="div2";
//修改节点的.class样式
div.className = "show";