JavaScript中DOM的详细介绍（代码示例）

不言

发布时间：2019-03-05 15:14:01

2836人浏览过

来源于CSDN

转载

本篇文章给大家带来的内容是关于JavaScript中DOM的详细介绍（代码示例），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

1、DOM:文档对象(document)模型。将整个html页面看作一棵倒挂的树，html就是这棵树根节点， head,body就是这棵树的子节点。DOM模型要求将html中每对标签看作节点对象来操作

2.DOM的作用：

JavaScript 能够改变页面中的所有 HTML 元素

javascript 能够改变页面中的所有 html 属性
javascript 能够改变页面中的所有 css 样式
javascript 能够对页面中的所有事件做出反应

3.DOM查找页面中的元素节点对象：

3.1：通过id查找页面中一个元素节点对象
eg:

var ob1=document.getElementById("d1");
 //将节点对象中内容输出
 alert(ob1.innerHTML);

3.2:通过标签名查找页面中元素节点集合或数组
eg:

var arr1=document.getElementsByTagName("h2");
//遍历节点对象集合，输出每个对象的内容
for(var i=0;i 3.3:通过类名查找页面中元素节点集合或数组
 eg:
立即学习“Java免费学习笔记（深入）”；
var arr2=document.getElementsByClassName("c1");
            //遍历节点对象集合，输出每个对象的内容
            for(var i=0;i3.4:通过name属性来查找元素节点集合或数组
eg:
var arr3=document.getElementsByName("hobby");
            //遍历节点对象集合，输出每个对象的value属性值
            for(var i=0;i4.DOM操作节点对象的内容(标签中文本内容，子标签，子标签文本......)：
4.1：获得节点内容：节点对象.innerHTML
eg:
alert(ob1.innerHTML);
4.2:修改节点内容: 节点对象.innerHTML=“新值”；

eg：
ob1.innerHTML="哈哈";
4.3：清空节点内容：
eg:
ob1.innerHTML="";
5.DOM操作节点对象的文本内容(标签中的文本和子标签中的文本......)：
5.1:获得节点文本内容(标签中的文本和子标签中的文本):节点对象.innerText
eg: 
alert(ob1.innerText);
5.2:修改节点文本内容(标签中的所有内容都修改):节点对象.innerText=“新值”；
 eg：
ob1.innerText="呵呵";
6.DOM操作节点对象的属性：
6.1：获得节点对象的属性：节点对象.属性名
 eg:
 alert(ob2.src);
6.2:修改节点对象属性：节点对象.属性名=“值”；
eg:

							
								
								
									思高网络商城CycooShop
									主要模块：首页商品推荐 /顾客留言发布 /商品分类浏览 /按商品分类、关键字搜索商品 /商品购物车 人信息中心 /显示商品详细介绍以及多图片显示功能 /商品类别管理有分大类中类的类别设定商品搜索类别设定 /商品管理有临时关闭不在线功能 /订单管理 /支付类型管理模块 留言管理 /后台权限分级管理 /密码修改 /新闻管理 /网站配置管理 /滚动广告管理v1.58更新：1、增强支付接口设置。2、内置支
								
								下载 
							
						
 ob2.src="img/img-2.jpg";
6.3:删除节点对象的属性：节点对象.removeAttribute("属性名");
eg:
ob2.attributes.removeNamedItem("title");
ob2.removeAttribute("title");
7.DOM操作节点对象样式：
7.1：设置节点对象的样式：节点对象.style.样式名=“样式值”；
eg:    
ob1.style.color="red";
ob1.style.backgroundColor="blue";
7.2: 获得节点对象的样式: 节点对象.style.样式名
eg: 
alert(ob1.style.color);
8.事件
    8.1：onload:页面加载完事件。
    8.2：onclick:鼠标单击事件。
    8.3：onchange:改变事件。
    8.4：onblur：光标离开事件。
    8.5：onfocus:获得光标事件。
    8.6：onmouseover:鼠标经过事件。
    8.7：onmouseout:鼠标离开事件。
9.DOM操作节点对象
9.1:创建节点对象：
9.1.1:创建标签节点对象：document.createElement("标签名");
eg:
//创建节点对象
var node1=document.createElement("p");
eg:
//创建节点对象
var node1=document.createElement("h1");
node1.innerHTML="你好中国";
9.1.2：创建文本对象：document.createTextNode("文本内容");
eg:
//创建文本对象
var node1text=document.createTextNode("这是一个段落");
9.2:添加节点对象：节点对象.appendChild(子节点);
eg:
//将节点对象添加body中
document.getElementById("d1").appendChild(node1);
//直接向一个标签中添加子节点
document.getElementById("d2").innerHTML=document.getElementById                                
("d2").innerHTML+"哈哈
呵呵呵
";
9.3：删除节点对象：父节点对象.removeChild(子节点对象);
eg:
//获得父节点对象
var parentNode=document.getElementById("d1")
 //获得要删除的子节点对象
 var childNode=document.getElementsByTagName("p")[0];
//删除子节点对象
//parentNode.removeChild(childNode);
//删除当前节点对象，只有谷歌，火狐
childNode.remove();
9.4：复制节点对象：节点对象.cloneNode(true);
eg:
//获得要复制的节点对象
var childNode=document.getElementsByTagName("p")[0];
//复制节点对象,true表示复制节点的同时将内容复制，false反之
var copyNode=childNode.cloneNode(true);
//将复制的节点添加到body中
document.getElementById("d1").appendChild(copyNode);
9.5: 替换元素中的子节点:父节点对象.replaceChild(newnode,oldnode);