星空网 > 软件开发 > Java

DOM笔记整理及应用实例

一.前言

  当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model)。HTML DOM 模型被构造为对象的树

通过可编程的对象模型,JavaScript 获得了足够的能力来创建动态的 HTML。

  • JavaScript 能够改变页面中的所有 HTML 元素
  • JavaScript 能够改变页面中的所有 HTML 属性
  • JavaScript 能够改变页面中的所有 CSS 样式
  • JavaScript 能够对页面中的所有事件做出反应

二.查找 HTML 元素

  • 通过 id 找到 HTML 元素
  • 通过标签名找到 HTML 元素
  • 通过类名找到 HTML 元素
document.getElementById       根据ID获取一个标签document.getElementsByName     根据name属性获取标签集合document.getElementsByClassName   根据class属性获取标签集合document.getElementsByTagName    根据标签名获取标签集合

例;

DOM笔记整理及应用实例DOM笔记整理及应用实例
<!DOCTYPE html><html><head><meta charset="utf-8"><title>title</title></head><body><p class="intro">你好世界!</p><p>该实例展示了 <b>getElementsByTagName</b> 方法</p><div>该实例展示了 <b>getElementsByClassName</b> 方法!</div><p id="value">该实例展示了 <b>getElementById</b> 方法</p><script>  x=document.getElementsByClassName("intro");  y=document.getElementsByTagName('div');  z=document.getElementById("value");  document.write("<p>文本来自 class 为 intro 段落: " + x[0].innerHTML + "</p>");  document.write('<p>文本来自div标签' + y[0].innerHTML + "</p>");  document.write('<p>文本来自id为value的内容;' + z.innerHTML + "</p>");</script></body></html>

查找HTML元素

2.2间接查找

parentNode     // 父节点childNodes     // 所有子节点firstChild     // 第一个子节点lastChild      // 最后一个子节点nextSibling     // 下一个兄弟节点previousSibling   // 上一个兄弟节点 parentElement      // 父节点标签元素children        // 所有子标签firstElementChild    // 第一个子标签元素lastElementChild    // 最后一个子标签元素nextElementtSibling   // 下一个兄弟标签元素previousElementSibling // 上一个兄弟标签元素

三.操作

1.内容

innerText  文本outerTextinnerHTML  HTML内容innerHTML value    值

例 :

DOM笔记整理及应用实例DOM笔记整理及应用实例
<html><body><p id="p1">Hello World!</p><script>document.getElementById("p1").innerHTML="新文本!";</script></body></html>

更改HTML元素内容
DOM笔记整理及应用实例DOM笔记整理及应用实例
<!DOCTYPE html><html><body><img id="image" src='/images/loading.gif' data-original="smiley.gif"><script>document.getElementById("image").src='/images/loading.gif' data-original="landscape.jpg";</script></body></html>

更改属性
DOM笔记整理及应用实例DOM笔记整理及应用实例
<!DOCTYPE html><html><body><script>document.write(Date());</script></body></html>

更改输出流

2.属性

attributes        // 获取所有标签属性setAttribute(key,value)  // 设置标签属性getAttribute(key)     // 获取指定标签属性 /*var atr = document.createAttribute("class");atr.nodeValue="democlass";document.getElementById('n1').setAttributeNode(atr);*/

DOM笔记整理及应用实例DOM笔记整理及应用实例
<!DOCTYPE html><html><head lang="en">  <meta charset="UTF-8">  <title></title></head><body>  <input type="button" value="全选" onclick="CheckAll();"/>  <input type="button" value="取消" onclick="CancelAll();"/>  <input type="button" value="反选" onclick="ReverseCheck();"/>  <table border="1" >    <thead>    </thead>    <tbody id="tb">      <tr>        <td><input type="checkbox" /></td>        <td>111</td>        <td>222</td>      </tr>      <tr>        <td><input type="checkbox" /></td>        <td>111</td>        <td>222</td>      </tr>      <tr>        <td><input type="checkbox" /></td>        <td>111</td>        <td>222</td>      </tr>      <tr>        <td><input type="checkbox" /></td>        <td>111</td>        <td>222</td>      </tr>    </tbody>  </table>  <script>    function CheckAll(ths){      var tb = document.getElementById('tb');      var trs = tb.childNodes;      for(var i =0; i<trs.length; i++){        var current_tr = trs[i];        if(current_tr.nodeType==1){          var inp = current_tr.firstElementChild.getElementsByTagName('input')[0];          inp.checked = true;        }      }    }    function CancelAll(ths){      var tb = document.getElementById('tb');      var trs = tb.childNodes;      for(var i =0; i<trs.length; i++){        var current_tr = trs[i];        if(current_tr.nodeType==1){          var inp = current_tr.firstElementChild.getElementsByTagName('input')[0];          inp.checked = false;        }      }    }    function ReverseCheck(ths){      var tb = document.getElementById('tb');      var trs = tb.childNodes;      for(var i =0; i<trs.length; i++){        var current_tr = trs[i];        if(current_tr.nodeType==1){          var inp = current_tr.firstElementChild.getElementsByTagName('input')[0];          if(inp.checked){            inp.checked = false;          }else{            inp.checked = true;          }        }      }    }  </script></body></html>

Demo

3.class操作

className        // 获取所有类名classList.remove(cls)  // 删除指定类classList.add(cls)    // 添加类

例:

DOM笔记整理及应用实例DOM笔记整理及应用实例
<html><body id="myid" class="mystyle"><script type="text/javascript">  x=document.getElementsByTagName('body')[0];  document.write("Body CSS class: " + x.className);  document.write("<br />");  document.write("An alternate way: ");  document.write(document.getElementById('myid').className);</script></body></html>

获取类名
DOM笔记整理及应用实例DOM笔记整理及应用实例
<!DOCTYPE html><html><head><meta charset="utf-8"><title>title</title><style>.mystyle {  width: 300px;  height: 50px;  background-color: coral;  color: white;  font-size: 25px;}</style></head><body><p>点击按钮为 DIV 元素添加 "mystyle" 类。</p><button onclick="myFunction()">点我</button><div id="myDIV">我是一个 DIV 元素。</div><script>function myFunction() {  document.getElementById("myDIV").classList.add("mystyle");}</script></body></html>

classList.add
DOM笔记整理及应用实例DOM笔记整理及应用实例
<!DOCTYPE html><html><head><meta charset="utf-8"><title>title</title><style>.mystyle {  width: 300px;  height: 50px;  background-color: coral;  color: white;  font-size: 25px;}.delcss{  background-color: gray;  font-size: 40px;}</style></head><body><p>点击按钮为 DIV 元素添加 "mystyle" 类。</p><button onclick="myFunction()">点我</button><div id="myDIV">我是一个 DIV 元素。</div><div id="delcss" class="delcss">  删除样式</div><script>function myFunction() {  document.getElementById("myDIV").classList.add("mystyle");  document.getElementById("delcss").classList.remove("delcss")}</script></body></html>

删除类
DOM笔记整理及应用实例DOM笔记整理及应用实例
<!DOCTYPE html><html lang="en"><!--弹框--><head>  <meta charset="UTF-8">  <title>Title</title>  <style>    .hide{display: none}    .c1{      position: fixed;      background: rgba(0,0,0,.6);      left: 0;      top:0;      bottom: 0;      right: 0;      z-index: 2;    }    .c2{      position: fixed;      background-color: white;      height: 300px;      width: 300px;      top:50%;      left:50%;      margin-top: -150px;      margin-left: -150px;      z-index: 3;    }  </style></head><body>  <div>    <table>      <tr>        <td>1</td>        <td>2</td>        <td>          <input type="button" value="点我" onclick="Show();">        </td>      </tr>      <tr>        <td>1</td>        <td>2</td>        <td>          <input type="button" value="点我" onclick="Show();">        </td>      </tr>      <tr>        <td>1</td>        <td>2</td>        <td>          <input type="button" value="点我" onclick="Show();">        </td>      </tr>    </table>  </div>  <div id="shade" class="c1 hide"></div>  <div id="modal" class="c2 hide">    <p>用户:<input type="text"/></p>    <p>密码:<input type="password"/></p>    <p>      <input type="button" value="确定">      <input type="button" value="取消" onclick="Hide();">    </p>  </div>  <script>    function Show() {      document.getElementById("shade").classList.remove('hide');      document.getElementById("modal").classList.remove('hide');    }    function Hide() {      document.getElementById("shade").classList.add('hide');      document.getElementById("modal").classList.add('hide');    }  </script></body></html>

弹框实例

4.标签操作

  a.创建标签

// 方式一var tag = document.createElement('a')tag.innerText = "Test"tag.className = "c1"tag.href = "http://www.cnblogs.com/test" // 方式二var tag = "<a class='c1' href='http://www.cnblogs.com/test'>test</a>"

b.操作标签

// 方式一var obj = "<input type='text' />";xxx.insertAdjacentHTML("beforeEnd",obj);xxx.insertAdjacentElement('afterBegin',document.createElement('p')) //注意:第一个参数只能是'beforeBegin'、 'afterBegin'、 'beforeEnd'、 'afterEnd' // 方式二var tag = document.createElement('a')xxx.appendChild(tag)xxx.insertBefore(tag,xxx[1])

5、样式操作

改变 HTML 元素的样式

document.getElementById(id).style.property=新样式

例;

DOM笔记整理及应用实例DOM笔记整理及应用实例
<!DOCTYPE html><html><head><meta charset="utf-8"><title>title</title></head><body><p id="p1">Hello World!</p><p id="p2">Hello World!</p><script>document.getElementById("p2").style.color="blue";document.getElementById("p2").style.fontFamily="Arial";document.getElementById("p2").style.fontSize="larger";</script><p>以上段落通过脚本修改。</p></body></html>

View Code
DOM笔记整理及应用实例DOM笔记整理及应用实例
<input onfocus="Focus(this);" onblur="Blur(this);" id="search" value="请输入关键字" style="color: gray;" />  <script>    function Focus(ths){      ths.style.color = "black";      if(ths.value == '请输入关键字' || ths.value.trim() == ""){        ths.value = "";      }    }    function Blur(ths){      if(ths.value.trim() == ""){        ths.value = '请输入关键字';        ths.style.color = 'gray';      }else{        ths.style.color = "black";      }    }  </script>

demo

6、位置操作

总文档高度document.documentElement.offsetHeight  当前文档占屏幕高度document.documentElement.clientHeight  自身高度tag.offsetHeight  距离上级定位高度tag.offsetTop  父定位标签tag.offsetParent  滚动高度tag.scrollTop /*  clientHeight -> 可见区域:height + padding  clientTop  -> border高度  offsetHeight -> 可见区域:height + padding + border  offsetTop  -> 上级定位标签的高度  scrollHeight -> 全文高:height + padding  scrollTop  -> 滚动高度  特别的:    document.documentElement代指文档根节点*/

DOM笔记整理及应用实例DOM笔记整理及应用实例
<!DOCTYPE html><html><head lang="en">  <meta charset="UTF-8">  <title></title></head><body style="margin: 0;">  <div style="height: 900px;">  </div>  <div style="padding: 10px;">    <div id="i1" style="height:190px;padding: 2px;border: 1px solid red;margin: 8px;">        <p>asdf</p>        <p>asdf</p>        <p>asdf</p>        <p>asdf</p>        <p>asdf</p>    </div>  </div>  <script>    var i1 = document.getElementById('i1');    console.log(i1.clientHeight); // 可见区域:height + padding    console.log(i1.clientTop);  // border高度    console.log('=====');    console.log(i1.offsetHeight); // 可见区域:height + padding + border    console.log(i1.offsetTop);  // 上级定位标签的高度    console.log('=====');    console.log(i1.scrollHeight);  //全文高:height + padding    console.log(i1.scrollTop);   // 滚动高度    console.log('=====');  </script></body></html>

test
DOM笔记整理及应用实例DOM笔记整理及应用实例
<!DOCTYPE html><html><head lang="en">  <meta charset="UTF-8">  <title></title></head><style>  body{    margin: 0px;  }  img {    border: 0;  }  ul{    padding: 0;    margin: 0;    list-style: none;  }  .clearfix:after {    content: ".";    display: block;    height: 0;    clear: both;    visibility: hidden;  }  .wrap{    width: 980px;    margin: 0 auto;  }  .pg-header{    background-color: #303a40;    -webkit-box-shadow: 0 2px 5px rgba(0,0,0,.2);    -moz-box-shadow: 0 2px 5px rgba(0,0,0,.2);    box-shadow: 0 2px 5px rgba(0,0,0,.2);  }  .pg-header .logo{    float: left;    padding:5px 10px 5px 0px;  }  .pg-header .logo img{    vertical-align: middle;    width: 110px;    height: 40px;  }  .pg-header .nav{    line-height: 50px;  }  .pg-header .nav ul li{    float: left;  }  .pg-header .nav ul li a{    display: block;    color: #ccc;    padding: 0 20px;    text-decoration: none;    font-size: 14px;  }  .pg-header .nav ul li a:hover{    color: #fff;    background-color: #425a66;  }  .pg-body{  }  .pg-body .catalog{    position: absolute;    top:60px;    width: 200px;    background-color: #fafafa;    bottom: 0px;  }  .pg-body .catalog.fixed{    position: fixed;    top:10px;  }  .pg-body .catalog .catalog-item.active{    color: #fff;    background-color: #425a66;  }  .pg-body .content{    position: absolute;    top:60px;    width: 700px;    margin-left: 210px;    background-color: #fafafa;    overflow: auto;  }  .pg-body .content .section{    height: 500px;  }</style><body onscroll="ScrollEvent();"><div class="pg-header">  <div class="wrap clearfix">    <div class="logo">      <a href="#">        <img src='/images/loading.gif' data-original="http://core.pc.lietou-static.com/revs/images/common/logo_7012c4a4.pn">      </a>    </div>    <div class="nav">      <ul>        <li>          <a href="#">首页</a>        </li>        <li>          <a href="#">功能一</a>        </li>        <li>          <a href="#">功能二</a>        </li>      </ul>    </div>  </div></div><div class="pg-body">  <div class="wrap">    <div class="catalog">      <div class="catalog-item" auto-to="function1"><a>第1张</a></div>      <div class="catalog-item" auto-to="function2"><a>第2张</a></div>      <div class="catalog-item" auto-to="function3"><a>第3张</a></div>    </div>    <div class="content">      <div menu="function1" class="section">        <h1>第一章</h1>      </div>      <div menu="function2" class="section">        <h1>第二章</h1>      </div>      <div menu="function3" class="section">        <h1>第三章</h1>      </div>    </div>  </div></div>  <script>    function ScrollEvent(){      var bodyScrollTop = document.body.scrollTop;      if(bodyScrollTop>50){        document.getElementsByClassName('catalog')[0].classList.add('fixed');      }else{        document.getElementsByClassName('catalog')[0].classList.remove('fixed');      }    }  </script></body></html>

Demo-滚动固定
DOM笔记整理及应用实例DOM笔记整理及应用实例
<!DOCTYPE html><html><head lang="en">  <meta charset="UTF-8">  <title></title></head><style>  body{    margin: 0px;  }  img {    border: 0;  }  ul{    padding: 0;    margin: 0;    list-style: none;  }  h1{    padding: 0;    margin: 0;  }  .clearfix:after {    content: ".";    display: block;    height: 0;    clear: both;    visibility: hidden;  }  .wrap{    width: 980px;    margin: 0 auto;  }  .pg-header{    background-color: #303a40;    -webkit-box-shadow: 0 2px 5px rgba(0,0,0,.2);    -moz-box-shadow: 0 2px 5px rgba(0,0,0,.2);    box-shadow: 0 2px 5px rgba(0,0,0,.2);  }  .pg-header .logo{    float: left;    padding:5px 10px 5px 0px;  }  .pg-header .logo img{    vertical-align: middle;    width: 110px;    height: 40px;  }  .pg-header .nav{    line-height: 50px;  }  .pg-header .nav ul li{    float: left;  }  .pg-header .nav ul li a{    display: block;    color: #ccc;    padding: 0 20px;    text-decoration: none;    font-size: 14px;  }  .pg-header .nav ul li a:hover{    color: #fff;    background-color: #425a66;  }  .pg-body{  }  .pg-body .catalog{    position: absolute;    top:60px;    width: 200px;    background-color: #fafafa;    bottom: 0px;  }  .pg-body .catalog.fixed{    position: fixed;    top:10px;  }  .pg-body .catalog .catalog-item.active{    color: #fff;    background-color: #425a66;  }  .pg-body .content{    position: absolute;    top:60px;    width: 700px;    margin-left: 210px;    background-color: #fafafa;    overflow: auto;  }  .pg-body .content .section{    height: 500px;    border: 1px solid red;  }</style><body onscroll="ScrollEvent();"><div class="pg-header">  <div class="wrap clearfix">    <div class="logo">      <a href="#">        <img src='/images/loading.gif' data-original="http://core.pc.lietou-static.com/revs/images/common/logo_7012c4a4.pn">      </a>    </div>    <div class="nav">      <ul>        <li>          <a href="#">首页</a>        </li>        <li>          <a href="#">功能一</a>        </li>        <li>          <a href="#">功能二</a>        </li>      </ul>    </div>  </div></div><div class="pg-body">  <div class="wrap">    <div class="catalog" id="catalog">      <div class="catalog-item" auto-to="function1"><a>第1张</a></div>      <div class="catalog-item" auto-to="function2"><a>第2张</a></div>      <div class="catalog-item" auto-to="function3"><a>第3张</a></div>    </div>    <div class="content" id="content">      <div menu="function1" class="section">        <h1>第一章</h1>      </div>      <div menu="function2" class="section">        <h1>第二章</h1>      </div>      <div menu="function3" class="section">        <h1>第三章</h1>      </div>    </div>  </div></div>  <script>    function ScrollEvent(){      var bodyScrollTop = document.body.scrollTop;      if(bodyScrollTop>50){        document.getElementsByClassName('catalog')[0].classList.add('fixed');      }else{        document.getElementsByClassName('catalog')[0].classList.remove('fixed');      }      var content = document.getElementById('content');      var sections = content.children;      for(var i=0;i<sections.length;i++){        var current_section = sections[i];        // 当前标签距离顶部绝对高度        var scOffTop = current_section.offsetTop + 60;        // 当前标签距离顶部,相对高度        var offTop = scOffTop - bodyScrollTop;        // 当前标签高度        var height = current_section.scrollHeight;        if(offTop<0 && -offTop < height){          // 当前标签添加active          // 其他移除 active          var menus = document.getElementById('catalog').children;          var current_menu = menus[i];          current_menu.classList.add('active');          for(var j=0;j<menus.length;j++){            if(menus[j] == current_menu){            }else{              menus[j].classList.remove('active');            }          }          break;        }      }    }  </script></body></html>

Demo-滚动菜单
DOM笔记整理及应用实例DOM笔记整理及应用实例
<!DOCTYPE html><html><head lang="en">  <meta charset="UTF-8">  <title></title></head><style>  body{    margin: 0px;  }  img {    border: 0;  }  ul{    padding: 0;    margin: 0;    list-style: none;  }  h1{    padding: 0;    margin: 0;  }  .clearfix:after {    content: ".";    display: block;    height: 0;    clear: both;    visibility: hidden;  }  .wrap{    width: 980px;    margin: 0 auto;  }  .pg-header{    background-color: #303a40;    -webkit-box-shadow: 0 2px 5px rgba(0,0,0,.2);    -moz-box-shadow: 0 2px 5px rgba(0,0,0,.2);    box-shadow: 0 2px 5px rgba(0,0,0,.2);  }  .pg-header .logo{    float: left;    padding:5px 10px 5px 0px;  }  .pg-header .logo img{    vertical-align: middle;    width: 110px;    height: 40px;  }  .pg-header .nav{    line-height: 50px;  }  .pg-header .nav ul li{    float: left;  }  .pg-header .nav ul li a{    display: block;    color: #ccc;    padding: 0 20px;    text-decoration: none;    font-size: 14px;  }  .pg-header .nav ul li a:hover{    color: #fff;    background-color: #425a66;  }  .pg-body{  }  .pg-body .catalog{    position: absolute;    top:60px;    width: 200px;    background-color: #fafafa;    bottom: 0px;  }  .pg-body .catalog.fixed{    position: fixed;    top:10px;  }  .pg-body .catalog .catalog-item.active{    color: #fff;    background-color: #425a66;  }  .pg-body .content{    position: absolute;    top:60px;    width: 700px;    margin-left: 210px;    background-color: #fafafa;    overflow: auto;  }  .pg-body .content .section{    height: 500px;    border: 1px solid red;  }</style><body onscroll="ScrollEvent();"><div class="pg-header">  <div class="wrap clearfix">    <div class="logo">      <a href="#">        <img src='/images/loading.gif' data-original="http://core.pc.lietou-static.com/revs/images/common/logo_7012c4a4.pn">      </a>    </div>    <div class="nav">      <ul>        <li>          <a href="#">首页</a>        </li>        <li>          <a href="#">功能一</a>        </li>        <li>          <a href="#">功能二</a>        </li>      </ul>    </div>  </div></div><div class="pg-body">  <div class="wrap">    <div class="catalog" id="catalog">      <div class="catalog-item" auto-to="function1"><a>第1张</a></div>      <div class="catalog-item" auto-to="function2"><a>第2张</a></div>      <div class="catalog-item" auto-to="function3"><a>第3张</a></div>    </div>    <div class="content" id="content">      <div menu="function1" class="section">        <h1>第一章</h1>      </div>      <div menu="function2" class="section">        <h1>第二章</h1>      </div>      <div menu="function3" class="section" style="height: 200px;">        <h1>第三章</h1>      </div>    </div>  </div></div>  <script>    function ScrollEvent(){      var bodyScrollTop = document.body.scrollTop;      if(bodyScrollTop>50){        document.getElementsByClassName('catalog')[0].classList.add('fixed');      }else{        document.getElementsByClassName('catalog')[0].classList.remove('fixed');      }      var content = document.getElementById('content');      var sections = content.children;      for(var i=0;i<sections.length;i++){        var current_section = sections[i];        // 当前标签距离顶部绝对高度        var scOffTop = current_section.offsetTop + 60;        // 当前标签距离顶部,相对高度        var offTop = scOffTop - bodyScrollTop;        // 当前标签高度        var height = current_section.scrollHeight;        if(offTop<0 && -offTop < height){          // 当前标签添加active          // 其他移除 active          // 如果已经到底部,现实第三个菜单          // 文档高度 = 滚动高度 + 视口高度          var a = document.getElementsByClassName('content')[0].offsetHeight + 60;          var b = bodyScrollTop + document.documentElement.clientHeight;          console.log(a+60,b);          if(a == b){            var menus = document.getElementById('catalog').children;            var current_menu = document.getElementById('catalog').lastElementChild;            current_menu.classList.add('active');            for(var j=0;j<menus.length;j++){              if(menus[j] == current_menu){              }else{                menus[j].classList.remove('active');              }            }          }else{            var menus = document.getElementById('catalog').children;            var current_menu = menus[i];            current_menu.classList.add('active');            for(var j=0;j<menus.length;j++){              if(menus[j] == current_menu){              }else{                menus[j].classList.remove('active');              }            }          }          break;        }      }    }  </script></body></html>

Demo-滚动高度

7.提交表单

document.geElementById('form').submit()

8.其他操作

console.log         输出框alert            弹出框confirm           确认框 // URL和刷新location.href        获取URLlocation.href = "url"    重定向location.reload()      重新加载 // 定时器setInterval         多次定时器clearInterval        清除多次定时器setTimeout         单次定时器clearTimeout        清除单次定时器

四.事件

DOM笔记整理及应用实例

对于事件需要注意的要点:

  • this
  • event
  • 事件链以及跳出

this标签当前正在操作的标签,event封装了当前事件的内容

实例:

DOM笔记整理及应用实例DOM笔记整理及应用实例
<!DOCTYPE html><html><head><meta charset="utf-8"><title>title</title></head><body><h1 onclick="this.innerHTML='Ooops!'">点击文本!</h1></body></html>

onclick事件
DOM笔记整理及应用实例DOM笔记整理及应用实例
<!DOCTYPE html><html><head><meta charset="utf-8"><title>title</title></head><head><script>function myFunction(){  var x=document.getElementById("fname");  x.value=x.value.toUpperCase();}</script></head><body>输入你的名字: <input type="text" id="fname" onchange="myFunction()"><p>字母变大写</p></body></html>

onchange事件
DOM笔记整理及应用实例DOM笔记整理及应用实例
<!DOCTYPE html><html><head><meta charset="utf-8"><title>title</title></head><body><div onmouseover="mOver(this)" onmouseout="mOut(this)" style="background-color:#D94A38;width:120px;height:20px;padding:40px;">Mouse Over Me</div><script>function mOver(obj){  obj.innerHTML="Thank You"}function mOut(obj){  obj.innerHTML="Mouse Over Me"}</script></body></html>

onmouse事件
DOM笔记整理及应用实例DOM笔记整理及应用实例
<!DOCTYPE html><html><head><meta charset="utf-8"><title>title</title></head><body><h1 onmouseover="style.color='red'"onmouseout="style.color='black'">将鼠标移至文部上</h1></body></html>

鼠标事件
DOM笔记整理及应用实例DOM笔记整理及应用实例
<!DOCTYPE html><html><head><meta charset="utf-8"><title>title</title></head><head><script>function mymessage(){  alert("消息在 onload 事件触发后弹出。");}</script></head><body onload="mymessage()"></body></html>

onload事件
DOM笔记整理及应用实例DOM笔记整理及应用实例
<!DOCTYPE html><html>  <head>    <meta charset='utf-8' />    <title></title>        <style>      .gray{        color:gray;      }      .black{        color:black;      }    </style>    <script type="text/javascript">      function Enter(){        var id= document.getElementById("tip")        id.className = 'black';        if(id.value=='请输入关键字'||id.value.trim()==''){          id.value = ''        }      }      function Leave(){        var id= document.getElementById("tip")        var val = id.value;        if(val.length==0||id.value.trim()==''){          id.value = '请输入关键字'          id.className = 'gray';        }else{          id.className = 'black';        }      }    </script>  </head>  <body>    <input type='text' class='gray' id='tip' value='请输入关键字' onfocus='Enter();' onblur='Leave();'/>  </body></html>

搜索框
DOM笔记整理及应用实例DOM笔记整理及应用实例
<!DOCTYPE html><html>  <head>    <meta charset='utf-8' >    <title>欢迎blue shit莅临指导&nbsp;&nbsp;</title>    <script type='text/javascript'>      function Go(){        var content = document.title;        var firstChar = content.charAt(0)        var sub = content.substring(1,content.length)        document.title = sub + firstChar;      }      setInterval('Go()',1000);    </script>  </head>  <body>    </body></html>

跑马灯
DOM笔记整理及应用实例DOM笔记整理及应用实例
<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>Title</title>  <style>    .style_before {      color: lightgrey;    }    .style_after {      color: black;    }  </style></head><body>  <h3>爱好</h3>  <div>    <ul id="i1">      <li><input type="checkbox" value="1">篮球</li>      <li><input type="checkbox" value="2">足球</li>      <li><input type="checkbox" value="3">乒乓球</li>    </ul>  </div>  <button onclick="Cheakall()">全选</button>  <button onclick="Cancleall()">取消全选</button>  <button onclick="Reversall()">反选</button>  <script>    function Cheakall() {      var i1 = document.getElementById("i1");      var cheak = i1.getElementsByTagName("input");      for (i=0;i<cheak.length;i++) {        cheak[i].checked = true;      }    }    function Cancleall() {      var i1 = document.getElementById("i1");      var cheak = i1.getElementsByTagName("input");      for (i=0;i<cheak.length;i++) {        cheak[i].checked = false;      }    }    function Reversall() {      var i1 = document.getElementById("i1");      var cheak = i1.getElementsByTagName("input");      for (i=0;i<cheak.length;i++) {        if (cheak[i].checked) {          cheak[i].checked = false;        }else {          cheak[i].checked = true;        }      }    }  </script></body></html>

全选、反选
DOM笔记整理及应用实例DOM笔记整理及应用实例
<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>Title</title>  <style>    .hide {      display: none;    }    .c1 {      position: fixed;      top: 0;      right: 0;      bottom: 0;      left: 0;      background: rgba(0,0,0,.6);      z-index: 2;    }    .c2 {      position: fixed;      width: 400px;      height: 300px;      top: 50%;      left: 50%;      z-index: 3;      margin-top: -150px;      margin-left: -200px;      background-color: white;      text-align: center;      padding-top: 150px;    }  </style></head><body>  <div><input type="button" value="登录" onclick="hihi()"></div>  <div id="cc1" class="c1 hide"></div>  <div id="cc2" class="c2 hide">    <div>用户名:<input type="text"></div>    <div>密 码:<input type="text"></div>    <input type="button" value="确定">    <input type="button" value="取消" onclick="hisl()">  </div>  <script>    function hihi() {      document.getElementById("cc1").classList.remove("hide");      document.getElementById("cc2").classList.remove("hide");    }    function hisl() {      document.getElementById("cc1").classList.add("hide");      document.getElementById("cc2").classList.add("hide");    }  </script></body></html>

模态对话框
DOM笔记整理及应用实例DOM笔记整理及应用实例
<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>Title</title>  <style>    body{      margin: 0;      background-color: #dddddd;    }    .w{      margin: 0 auto;      width: 980px;    }    .pg-header{      background-color: black;      color: white;      height: 48px;    }    .pg-body .menu{      position: absolute;      left: 200px;      width: 180px;      background-color: white;      float: left;    }    .pg-body .menu .active{      background-color: #425a66;      color: white;    }    .pg-body .fixed{      position: fixed;      top: 10px;    }    .pg-body .content{      position: absolute;      left: 385px;      right: 200px;      background-color: white;      float: left;    }    .pg-body .content .item{      height: 900px;    }  </style></head><body onscroll="Hua();">  <div class="pg-header">    <div class="w"></div>  </div>  <div class="pg-body">    <div id="menu" class="menu">      <ul>        <li>第一章</li>        <li>第二章</li>        <li>第三章</li>      </ul>    </div>    <div id="content" class="content">      <div class="item">床前明月管</div>      <div class="item">疑是地上霜</div>      <div class="item" style="height: 100px">我是郭德纲</div>    </div>  </div>  <script>    function Hua() {      var xo = document.getElementById("menu");      var huaGao = document.body.scrollTop;      if (document.body.scrollTop>48){        xo.classList.add("fixed");      }else {        xo.classList.remove("fixed");      }      var bod = document.body.offsetHeight;      var conAbs = document.getElementsByClassName("content")[0].offsetHeight;      var ck = document.documentElement.clientHeight;//      console.log((bod + conAbs) == (ck + huaGao));      if ((bod + conAbs) == (ck + huaGao)) {        var lenLi = xo.getElementsByTagName("li");        for (var i=0;i<lenLi.length;i++){          if (i == lenLi.length - 1){            lenLi[i].className = "active";          }else {            lenLi[i].className = "";          }        }        return      }      var item = document.getElementById("content").children;      for (var i=0;i<item.length;i++){        var currentItem = item[i];        var currentItemBodyTop = currentItem.offsetTop + currentItem.offsetParent.offsetTop;        var currentItemWindowTop = currentItemBodyTop - huaGao;        var currentHeight = currentItem.offsetHeight;        var bottomHeight = currentItemBodyTop + currentHeight;        var ziJi = xo.getElementsByTagName("li")[i];        if (currentItemWindowTop<0 && huaGao < bottomHeight){          ziJi.className = "active";        } else {          ziJi.className = "";        }      }    }  </script></body></html>

书签章节
DOM笔记整理及应用实例DOM笔记整理及应用实例
<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>Title</title>  <style>    ul{      list-style: none;      padding: 0;      margin: 0;    }    ul li{      float: left;      background-color: #2459a2;      color: white;      padding: 8px 10px;    }    .clearfix:after{      display: block;      content: '.';      height: 0;      visibility: hidden;      clear: both;    }    .hide{      display: none;    }    .tab-menu .title{      background-color: #dddddd;    }    .tab-menu .title .active{      background-color: #0099dd;      color: black;    }    .tab-menu .content{      border: 1px solid #dddddd;      min-height: 150px;    }    ul li:hover {      cursor: pointer;    }  </style></head><body>  <div style="width: 400px; margin: 0 auto;">    <div class="tab-menu">      <div class="title clearfix">        <ul>          <li target="h1" class="active" onclick="Show(this);">索尼</li>          <li target="h2" onclick="Show(this);">谷歌</li>          <li target="h3" onclick="Show(this);">腾讯</li>        </ul>      </div>      <div id="content" class="content">        <div con="h1">1...</div>        <div con="h2" class="hide">2...</div>        <div con="h3" class="hide">3...</div>      </div>    </div>  </div>  <script>    function Show(ths) {      var Showli = ths;      var littarget = Showli.getAttribute("target");      var liclass = Showli.parentNode.children;      for (var i=0;i<liclass.length;i++) {        if (liclass[i].getAttribute("target") == littarget) {          liclass[i].classList.add("active");        }else {          liclass[i].classList.remove("active");        }      }      var liycontent = document.getElementById("content").children;      for (var i=0;i<liycontent.length;i++) {        if (liycontent[i].getAttribute("con") == littarget) {          liycontent[i].className = "";        }else {          liycontent[i].className = "hide";        }      }    }  </script></body></html>

菜单
DOM笔记整理及应用实例DOM笔记整理及应用实例
<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>Title</title>  <style>    .go-top {      position: fixed;      right: 28px;      bottom: 19px;      width: 38px;      height: 40px;      background-color: aliceblue;    }    .hide {      display: none;    }  </style></head><body onscroll="Func();">  <div style="height: 2000px"></div>  <div id="i2" class="go-top hide">    <a onclick="GoTop();">返回顶部</a>  </div>  <script>    function Func() {      var scrolltop = document.body.scrollTop;      var ii = document.getElementById("i2");      if (scrolltop>300) {        ii.classList.remove("hide");      }else {        ii.classList.add("hide");      }    }    function GoTop() {      document.body.scrollTop = 0;    }  </script></body></html>

返回顶部

 




原标题:DOM笔记整理及应用实例

关键词:dom

dom
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流