Python開發【第十二篇】：DOM

時間 2019-11-25

原文原文鏈接

文檔對象模型（Document Object Model，DOM）是一種用於HTML和XML文檔的編程接口。它給文檔提供了一種結構化的表示方法，能夠改變文檔的內容和呈現方式。咱們最爲關心的是，DOM把網頁和腳本以及其餘的編程語言聯繫了起來。DOM屬於瀏覽器，而不是JavaScript語言規範裏的規定的核心內容。javascript

1、查找元素

一、直接查找html

 
         document.getElementById             根據 
         ID 
         獲取一個標籤 
        
         document.getElementsByName          根據name屬性獲取標籤集合 
        
         document.getElementsByClassName     根據 
         class 
         屬性獲取標籤集合 
        
         document.getElementsByTagName       根據標籤名獲取標籤集合

二、間接查找java

 
         parentNode           
         / 
         / 
         父節點 
        
         childNodes           
         / 
         / 
         全部子節點 
        
         firstChild           
         / 
         / 
         第一個子節點 
        
         lastChild            
         / 
         / 
         最後一個子節點 
        
         nextSibling          
         / 
         / 
         下一個兄弟節點 
        
         previousSibling      
         / 
         / 
         上一個兄弟節點 
        
         parentElement            
         / 
         / 
         父節點標籤元素 
        
         children                 
         / 
         / 
         全部子標籤 
        
         firstElementChild        
         / 
         / 
         第一個子標籤元素 
        
         lastElementChild         
         / 
         / 
         最後一個子標籤元素 
        
         nextElementtSibling      
         / 
         / 
         下一個兄弟標籤元素 
        
         previousElementSibling   
         / 
         / 
         上一個兄弟標籤元素

2、操做

一、內容node

 
         innerText   文本 
        
         outerText 
        
         innerHTML   HTML內容 
        
         innerHTML    
        
         value       值

二、屬性python

 
         attributes                 
         // 獲取全部標籤屬性 
        
         setAttribute(key,value)    
         // 設置標籤屬性 
        
         getAttribute(key)          
         // 獲取指定標籤屬性 
        
         /* 
        
         var atr = document.createAttribute("class"); 
        
         atr.nodeValue="democlass"; 
        
         document.getElementById('n1').setAttributeNode(atr); 
        
         */

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

三、class操做web

 
         className                 
         // 獲取全部類名 
        
         classList.remove(cls)     
         // 刪除指定類 
        
         classList.add(cls)        
         // 添加類

四、標籤操做編程

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.操做標籤app

 
         // 方式一 
        
         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])

五、樣式操做編程語言

 
         var 
         obj = document.getElementById( 
         'i1' 
         ) 
        
         obj.style.fontSize =  
         "32px" 
         ; 
        
         obj.style.backgroundColor =  
         "red" 
         ;

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

六、位置操做

 
         總文檔高度 
        
         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代指文檔根節點 
        
         */

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

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

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

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

七、提交表單

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

八、其餘操做

 
         console.log                 輸出框 
        
         alert                       彈出框 
        
         confirm                     確認框 
        
         // URL和刷新 
        
         location.href               獲取URL 
        
         location.href =  
         "url"       
         重定向 
        
         location.reload()           從新加載 
        
         // 定時器 
        
         setInterval                 屢次定時器 
        
         clearInterval               清除屢次定時器 
        
         setTimeout                  單次定時器 
        
         clearTimeout                清除單次定時器

3、事件

對於事件須要注意的要點：

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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。