javascript之DOM

2022-07-26 20:04:41

文档对象模型（Document Object Model，DOM）是一种用于HTML和XML文档的编程接口。它给文档提供了一种结构化的表示方法，可以改变文档的内容和呈现方式。我们最为关心的是，DOM把网页和脚本以及其他的编程语言联系了起来。DOM属于浏览器，而不是JavaScript语言规范里的规定的核心内容。

一、元素查找

　　1、直接查找

 document.getElementById             根据ID获取一个标签

 document.getElementsByName          根据name属性获取标签集合

 document.getElementsByClassName     根据class属性获取标签集合

 document.getElementsByTagName       根据标签名获取标签集合

　　2、间接查找

 parentNode          // 父节点

 childNodes          // 所有子节点

 firstChild          // 第一个子节点

 lastChild           // 最后一个子节点

 nextSibling         // 下一个兄弟节点

 previousSibling     // 上一个兄弟节点

 parentElement           // 父节点标签元素

 children                // 所有子标签

 firstElementChild       // 第一个子标签元素

 lastElementChild        // 最后一个子标签元素

 nextElementtSibling     // 下一个兄弟标签元素

 previousElementSibling  // 上一个兄弟标签元素

二、操作

　　1、内容

 innerText   文本

 outerText

 innerHTML   HTML内容

 innerHTML

 value       值

　　2、属性

 attributes                // 获取所有标签属性

 setAttribute(key,value)   // 设置标签属性

 getAttribute(key)         // 获取指定标签属性

 /*

 var atr = document.createAttribute("class");

 atr.nodeValue="democlass";

 document.getElementById('n1').setAttributeNode(atr);

 */

　　3、class操作

 className                // 获取所有类名

 classList.remove(cls)    // 删除指定类

 classList.add(cls)       // 添加类

　　4、标签操作

 a.创建标签

 // 方式一

 var tag = document.createElement('a')

 tag.innerText = "wupeiqi"

 tag.className = "c1"

 tag.href = "http://www.cnblogs.com/wupeiqi"

 // 方式二

 var tag = "<a class='c1' href='http://www.cnblogs.com/wupeiqi'>wupeiqi</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、样式操作

 var obj = document.getElementById('i1')

 obj.style.fontSize = "32px";

 obj.style.backgroundColor = "red";

　　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代指文档根节点

 */

　　7、提交表单

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

　　8、其他操作

 console.log                 输出框

 alert                       弹出框

 confirm                     确认框

 // URL和刷新

 location.href               获取URL

 location.href = "url"       重定向

 location.reload()           重新加载

 // 定时器

 setInterval                 多次定时器

 clearInterval               清除多次定时器

 setTimeout                  单次定时器

 clearTimeout                清除单次定时器

三、事件

　　javascript之DOM

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

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

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

实例：

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

搜索框

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

跑马灯

 <!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="">篮球</li>

             <li><input type="checkbox" value="">足球</li>

             <li><input type="checkbox" value="">乒乓球</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>

全选与反选

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

静态对话框

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

书签与章节

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

菜单

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

返回顶部

 

上一篇：Java并发之BlockingQueue 阻塞队列（ArrayBlockingQueue、LinkedBlockingQueue、DelayQueue、PriorityBlockingQueue、SynchronousQueue）


下一篇：JavaScript之Style属性学习