<!DOCTYPE html><html><head lang="en"> ???<meta charset="UTF-8"> ???<title>访问节点</title> ???<!-- ???DOM（Document Object Model） 文档对象模型 ???HTML-DOM ???CSS-DOM ???XML-DOM ???DOM-CORE ???noteType的返回值： ???1 ：元素节点 ???2 ：属性节点 ???3 ：文本节点 ???8 ：注释节点 ???9 ：文档节点 ???--></head><body> ?<ul> ?????<li>大家辛苦了1</li> ?????<li>大家辛苦了2</li> ?????<li>大家辛苦了3</li> ?</ul> <img src="../images/cat.jpg" alt="这是一只可爱的小猫咪" ?id="cat"> ???<script type="text/javascript"> ???//获取ul中的第一个li ??var ul= document.getElementsByTagName("ul")[0]; ???//输出节点的名称 ???document.write("ul节点的名称:"+ul.nodeName+"<br/>"); ???document.write("ul节点的类型:"+ul.nodeType+"<br/>"); ???document.write("ul节点的值:"+ul.nodeValue+"<br/>"); ???// 01.获取ul中的第一个li ?元素节点 ???var li=ul.firstElementChild; ???document.write("li节点的名称:"+li.nodeName+"<br/>"); ???document.write("li节点的类型:"+li.nodeType+"<br/>"); ???document.write("li节点的值:"+li.nodeValue+"<br/>"); ?//获取小猫咪 ???var cat=document.getElementById("cat"); ???document.write("img节点的名称:"+cat.nodeName+"<br/>"); ???document.write("img节点的类型:"+cat.nodeType+"<br/>"); ???document.write("img节点的值:"+cat.nodeValue+"<br/>"); ?//动态改变小猫咪的 宽度和高度 ???cat.setAttribute("width","200px"); ???cat.setAttribute("height","200px"); ?//获取我们的属性对应的属性值 ???var src= cat.getAttribute("src"); ???document.write("src:"+src+"<br/>"); ???//02.获取属性节点 ???var alt= cat.getAttributeNode("alt"); ???document.write("img节点alt的名称:"+alt.nodeName+"<br/>"); ???document.write("img节点alt的类型:"+alt.nodeType+"<br/>"); ???document.write("img节点alt的值:"+alt.nodeValue+"<br/>"); ???//03. 获取第一个li的内容 ??var ?text= li.firstChild; ?//文本节点 ???document.write("text的名称:"+text.nodeName+"<br/>"); ???document.write("text的类型:"+text.nodeType+"<br/>"); ???document.write("text的值:"+text.nodeValue+"<br/>");</script></body></html><!DOCTYPE html><html><head lang="en"> ???<meta charset="UTF-8"> ???<title>节点的增删改</title></head><body><ul> ???<li>大家辛苦了1</li> ???<li>大家辛苦了2</li> ???<li>大家辛苦了3</li> ???<li>大家辛苦了4</li> ???<li>大家辛苦了5</li> ???<li>大家辛苦了6</li> ???<li>大家辛苦了7</li> ???<li>大家辛苦了8</li> ???<li>大家辛苦了9</li> ???<li>大家辛苦了10</li> ???<li>大家辛苦了11</li> ???<li>大家辛苦了12</li></ul><script type="text/javascript"> ???//首先获取页面中的第一个ul ???var ul= document.getElementsByTagName("ul")[0]; ???//创建一个新的节点 ???var ?newLi=document.createElement("li"); ???//给新节点的增加内容 ???newLi.innerHTML="<h1>哈哈</h1>"; ???//在第7 个位置之前 把新增的li放入 ???var needLi= ul.getElementsByTagName("li")[6]; ???//ul.insertBefore(newLi,needLi); // 把newLi放在needLi之前 ???//替换指定的节点 ???var repLi= ul.getElementsByTagName("li")[9]; ???ul.replaceChild(newLi,repLi); ???//删除指定的节点 ???ul.removeChild(newLi); ???//clone ?UL ???var newUl= ul.cloneNode(true); ???// 在body中增加 ul ???ul.parentNode.appendChild(newUl);</script></body></html><!DOCTYPE html><html><head lang="en"> ???<meta charset="UTF-8"> ???<title>Style样式</title> ???<!-- ?????之前接触的 行内样式 style 是css设置样式 ?????现在我们使用的是js中的设置样式！ ???--> ???<style type="text/css"> ???????#myDiv{ ???????????height: 50px; ???????????width: 50px; ???????} ???</style></head><body> ?<div ?id="myDiv" style="border: 1px solid red"></div> ?<button type="button" onclick="changeBackground();">换背景色</button> ?<button type="button" onclick="changeMargin();">换外边距</button><script type="text/javascript"> ????var div=document.getElementById("myDiv"); ????/** ?????* ?通过js中的style属性来设置样式 ?????* ?????* ?注意点： ?????* ?01.css中有的属性我们 style中都有 ?????* ?02.只不过属性名写法不一致 ?????* ????比如说 ?css font-size ??????style fontSize ?????*/ ????function changeBackground(){ ????????div.style.backgroundColor="pink"; ?//改变背景颜色 ????} ????function changeMargin(){ ????????div.style.marginLeft="50px"; ?//改变外边距 ????}</script></body></html><!DOCTYPE html><html><head lang="en"> ???<meta charset="UTF-8"> ???<title>Tab切换</title> ???<style type="text/css"> ???????#tab{ width: 400px;} ???????#tab ul{list-style: none;overflow:hidden;margin:0px;padding:0px;} ???????#tab ul li{float:left;padding:5px 10px;border:1px solid #eee;cursor:pointer;} ???????#tab ul li.cur{background-color: red} ???????#tab .content{width:100%;border:1px solid #eeeeee;height: 100px;} ???</style></head><body><div id="tab"> ???<ul> ???????<li class="cur">tab1</li> ???????<li>tab2</li> ???????<li>tab3</li> ???????<li>tab4</li> ???</ul> ???<div id="c-box"> ???????<div class="content" id="content-0"> ???????????tab-1第一个容器的内容 ???????</div> ???????<div class="content" id="content-1" style="display: none;"> ???????????tab-2第二个容器的内容 ???????</div> ???????<div class="content" id="content-2" style="display: none;"> ???????????tab-3第3个容器的内容 ???????</div> ???????<div class="content" id="content-3" style="display: none;"> ???????????tab-4第4个容器的内容 ???????</div> ???</div> ???<script type="text/javascript"> ???????//获取页面中需要得所有li的集合 ???????var liList=document.getElementsByTagName("li"); ???????//循环li集合 ???????for(var i=0;i<liList.length;i++){ ???????????liList[i].index=i; ?//当前选中的li ???????????liList[i].onmouseover=function(){ //鼠标移入事件 ???????????????for(var j=0;j<liList.length;j++){ ?//循环div ???????????????????document.getElementById("content-"+j).style.display="none"; //所有div的都隐藏 ???????????????????liList[j].className=""; ?//清除所有的li 的class属性值 ???????????????} ??????????????liList[this.index].className="cur";//设置选中的li样式 ??????????????document.getElementById("content-"+this.index).style.display="block"; //显示选中的li对应div ?????????} ???????} ???</script></body></html><!DOCTYPE html><html><head lang="en"> ???<meta charset="UTF-8"> ???<title>className属性</title> ???<style type="text/css"> ???????.myDiv{ ???????????height: 50px; ???????????width: 50px; ???????????border: 1px solid red; ???????} ???????.newStyle{ ???????????height: 150px; ???????????width: 150px; ???????????border: 2px solid pink; ???????} ???</style></head><body><div class="myDiv" id="myDiv"></div><script type="text/javascript"> ????var div= document.getElementById("myDiv"); ????div.onclick=function(){ ????????div.className="newStyle"; ?//newStyle是我们需要设置class的名称 ????}</script></body></html><!DOCTYPE html><html><head lang="en"> ???<meta charset="UTF-8"> ???<title>EasyUI实现tabs</title></head><body> ??<div id="myTabs"> ???????<ul> ??????????<li><a href="#a">第1个</a></li> ??????????<li><a href="#b">第2个</a></li> ??????????<li><a href="#c">第3个</a></li> ??????????<li><a href="#d">第4个</a></li> ???????</ul> ??????<div id="a">第1个选项卡</div> ??????<div id="b">第2个选项卡</div> ??????<div id="c">第3个选项卡</div> ??????<div id="d">第4个选项卡</div> ??</div><!-- 引入我们需要的js文件--><script type="text/javascript" ?src="../js/jquery-1.8.3.js"></script><script type="text/javascript" ?src="../js/jquery-ui.js"></script><script type="text/javascript" ?src="../js/jquery.ui.tabs.js"></script><script type="text/javascript"> ???$(function(){ ????????$("#myTabs").tabs({ ????????????active:1, ?//默认选中第一个tab ????????????event:"mouseover" ????????}) ???})</script></body></html><!DOCTYPE html><html><head lang="en"> ???<meta charset="UTF-8"> ???<title>滚动距离</title> ???<style type="text/css"> ???????*{margin:0;padding: 0;} ???????#box1{height:200px;width: 200px;background:#eee;border:1px solid #000;overflow-y:scroll;} ???????p{line-height:40px;} ???</style> ???<script type="text/javascript"> ?window.onload=function(){ ?????var box1=document.getElementById("box1"); ?????var text=document.getElementById("text"); ?????//当div滚动的时候 ?????box1.onscroll=function(){ ?????????text.innerHTML="距离TOP多少像素："+box1.scrollTop; ?????} ?} ???</script></head><body><div id="box1"> ???<p>1</p> ???<p>2</p> ???<p>3</p> ???<p>4</p> ???<p>5</p> ???<p>6</p> ???<p>7</p> ???<p>8</p> ???<p>9</p> ???<p>10</p> ???<p>11</p> ???<p>12</p> ???<p>13</p> ???<p>14</p></div><div id="text"></div></body></html><!DOCTYPE html><html><head lang="en"> ???<meta charset="UTF-8"> ???<title>window.onload</title> ???<!-- ?????window.onload ?????注意点： ?????01.在整个页面中只能存在一次，否则后面会覆盖前面 ?????02.页面中所有的内容加载完毕之后才执行！ ?????03.没有简写的方法 ???--></head><body><img src="../images/cat.jpg"><script type="text/javascript"> ???//alert("页面没有加载完毕就可能执行！"); ???window.onload=function(){ ???????alert("页面中所有的内容加载完毕之后才执行！"); ???}</script></body></html><!DOCTYPE html><html><head lang="en"> ???<meta charset="UTF-8"> ???<title>滚动距离</title> ???<style type="text/css"> ???????*{margin:0;padding: 0;} ???????#box{ ???????????position: absolute; ???????????top: 0px; ???????????left: 0px; ???????} ???</style> ???<script type="text/javascript"> ???????window.onload = function () { ???????????var box=document.getElementById("box"); ???????????var time=null,x= 1,y= 1,speed=5; ???????????function go(){ ???????????????//水平方向 ???????????????if((box.offsetLeft+box.offsetWidth)>document.documentElement.clientWidth){ ???????????????????x=-1; ???????????????} ???????????????if(box.offsetLeft<0){ ???????????????????x=1; ???????????????} ???????????????box.style.left=box.offsetLeft+x*speed+"px"; ???????????????//垂直方向 ???????????????if((box.offsetTop+box.offsetHeight)>document.documentElement.clientHeight){ ???????????????????y=-1; ???????????????} ???????????????if(box.offsetTop<0){ ???????????????????y=1; ???????????????} ???????????????box.style.top=box.offsetTop+x*speed+"px"; ???????????} ???????????//定时函数 ???????????time=setInterval(go,100); ???????????//鼠标移上去 停止 ???????????box.onmousemove=function(){ ???????????????if(time!=null){ ???????????????????clearInterval(time); ???????????????} ???????????} ???????????//鼠标离开 ?继续移动 ???????????box.onmouseout=function(){ ???????????????time=setInterval(go,100); ???????????} ???????} ???</script></head><body><div id="box"> ???<img src="../images/cat.jpg" height="200px" width="200px"></div></body></html>js操作DOM对象
原文地址：http://www.cnblogs.com/wwlw/p/7773745.html