本篇文章给大家带来的内容是关于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<arr1.length;i++){alert(arr1[i].innerhtml); }
3.3:通过类名查找页面中元素节点集合或数组
eg:
var arr2=document.getelementsbyclassname("c1"); //遍历节点对象集合，输出每个对象的内容 for(var i=0;i<arr2.length;i++){ alert(arr2[i].innerhtml); }
3.4:通过name属性来查找元素节点集合或数组
eg:
var arr3=document.getelementsbyname("hobby"); //遍历节点对象集合，输出每个对象的value属性值 for(var i=0;i<arr3.length;i++){ alert(arr3[i].value); }
4.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:
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="你好<span>中国</span>";
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+"<h2>哈哈</h2><p>呵呵呵</p>";
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);
以上就是javascript中dom的详细介绍（代码示例）的详细内容。