博客园 首页 私信博主 显示目录 隐藏目录 管理 动画 动画

JavaScript操作DOM对象

1、访问节点

<!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>

2、节点的曾删改

　

<!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>

3、Style样式

<!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>

4、Tab选项卡

<!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>

5、ClassName属性

<!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>

6、EasyUI实现tabs

<!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>

7、滚动距离

<!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>

8、window.onload

<!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>

9、picture浮动

<!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>
posted @ 2017-11-04 18:30  这才是真的阿呆云飞  阅读(724)  评论(0)  编辑  收藏  举报