【Python之路】第十三篇--DOM

時間 2019-11-29

原文原文鏈接

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

1、查找元素

一、直接查找css

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

二、間接查找html

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

節點與標籤的區別: 節點會把標籤中文本也找出來!java

2、操做

一、內容node

innerText   文本    
outerText
innerHTML   HTML內容
outerHTML 
value       值 => 文本框,下來框 表單標籤的值

獲取 與 賦值:(其餘同理)
text = obj.innerText   =>  獲取包含的文本
obj.innerText = '123'

二、屬性編程

attributes                // 獲取全部標籤屬性  => 字典形式
setAttribute(key,value)   // 設置標籤屬性
getAttribute(key)         // 獲取指定標籤屬性   => 沒有的爲null
 
/*
var atr = document.createAttribute("class");
atr.nodeValue="democlass";
document.getElementById('n1').setAttributeNode(atr);
*/

三、class操做瀏覽器

className                // 獲取全部類名 => 字符串形式
classList.remove(cls)    // 刪除指定類   => 列表形式
classList.add(cls)       // 添加類

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            ul{
                list-style: none;
                padding: 0;
                margin: 0;
            }
            .title{
                background: #DDDDDD;
            }
            .clearfix:after{
                display: block;
                content: 'x';
                height: 0;
                visibility: hidden;
                clear: both;
            }
            ul li{
                background: blue;
                color: white;
                float: left;
                padding: 8px 10px;
            }
            .content{
                border: 1px solid #DDDDDD;
                min-height: 200px;
            }
            .active{
                background-color: white;
                color: #000000;
            }
            .dis-con{
                display: none;
            }
        </style>
    </head>
    <body>
        <div class="tab-menu">
            <div class="title clearfix">
                <ul>
                    <li  class="active" target='d1' onclick="Show(this)">價格趨勢</li>
                    <li  target='d2'  onclick="Show(this)">市場分佈</li>
                    <li  target='d3'  onclick="Show(this)">其餘</li>
                </ul>
            </div>
            
            <div class="content" id='content'>
                <div con='d1'>content1</div>
                <div class="dis-con" con='d2'>content2</div>
                <div class="dis-con" con='d3'>content3</div>
            </div>
        </div>
        
        
        <script type="text/javascript">
            function Show(obj){
                var target = obj.getAttribute('target');
                var menu = obj.parentElement.children;
                for(var i=0;i<menu.length;i++){
                    if(menu[i] == obj){
                        obj.className='active';
                    }else{
                        menu[i].removeAttribute('class');
                    }
                }
                //操做內容
                var con_node = document.getElementById('content');
                con = con_node.children;
                for(var j=0;j<con.length;j++){
                    var attr = con[j].getAttribute('con');
                    if(attr == target){
                        con[j].classList.remove('dis-con');
                    }else{
                        con[j].classList.add('dis-con');
                    }
                }
            }
            
            
        </script>
    </body>
</html>

demo

四、標籤操做app

a.建立標籤編程語言

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

b.操做標籤ide

// 方式一
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])   # 指定在xxx[1]前面插入

//移動
obj.appendChild(div)
//克隆
obj.cloneNode(true)  true => 表示克隆裏面所有東西  默認:false只克隆標籤

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <p> test 1:</p>
        <div>
            <input type="text" />
            <input type="button" value="提交"  onclick="Common(this)"/>
        </div>
        <div>
            <ul id="commonlist">
                <li>alex</li>
                <li>eric</li>
            </ul>
        </div>
        
        <p>test 2:</p>
        <div>
            <input type="text" />
            <input type="button" value="提交"  onclick="Common2(this)"/>
        </div>
        <div>
            <ul id="commonlist2">
                <li>alex</li>
                <li>eric</li>
            </ul>
        </div>
            
        
        <script type="text/javascript">
            function Common(obj){
                var val = obj.previousElementSibling.value;
                obj.previousElementSibling.value ='' ;
                var commonlist = document.getElementById('commonlist');
                //形式一
                var str = '<li>'+val+'</li>';
                commonlist.insertAdjacentHTML('beforeEnd',str);
            }
            function Common2(obj){
                var val = obj.previousElementSibling.value;
                obj.previousElementSibling.value ='' ;
                var commonlist = document.getElementById('commonlist2');
                //形式二
                tag = document.createElement('li');
                tag.innerText = val;
//                commonlist.appendChild(tag);
//                commonlist.insertBefore(tag,commonlist.children[1]);
                
                var temp = document.createElement('a');
                temp.innerText = '百度';
                temp.href = 'http://www.baidu.com';
                tag.appendChild(temp);
                commonlist.appendChild(tag);
                
            }
            

        </script>
    </body>
</html>

demo

五、樣式操做

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

#注意轉換:
background-color  =>  backgroundColor

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            .input-black{
                color: black;
            }
            .input-gray{
                color: gray;
            }
            
        </style>
    </head>
    <body>
        <input type="text" placeholder="請輸入內容" />
        <p>test 1:</p>
        
        <input type="text" class="input-gray" value="請輸入內容" onfocus="In(this)" onblur="Out(this)"/>
        
        
        
        
        <script type="text/javascript">
            function In(obj){
                obj.className = 'input-black';
                var current = obj.value;
                if(current == '請輸入內容'){
                    obj.value = '';
                }
            }
            function Out(obj){
                
                var current = obj.value;
                if(current == '請輸入內容'  || current.trim().length == 0){
                    obj.value = '請輸入內容';
                    obj.className = 'input-gray';
                }
            }
            
            
            
        </script>
    </body>
</html>

demo

六、位置操做

特指整個窗口
document.documentElement

總文檔高度(文檔流)
document.documentElement.offsetHeight
  
當前文檔佔屏幕高度(視口高度)
document.documentElement.clientHeight
  
可見範圍高度: (自身height+border+padding)
tag.offsetHeight
  
當前標籤距離文檔''頂部''高度(距離上級定位高度)
#若是當前標籤,的父標籤有position 的話 就是距離position高度
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>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .content{
                height: 2000px;
            }
            .top{
                width: 40px;
                height: 40px;
                background-color: burlywood;
                position: fixed;
                right: 20px;
                bottom: 10px;
            }
            .hide{
                display: none;
            }
        </style>
    </head>
    <body onscroll="f1()">
        <div class="content"></div>
        
        <div class="top" onclick="Gotop()" id='top'>
            <a href="javascript:void(0)">返回頂部</a>
        </div>
        
        <script type="text/javascript">
            function Gotop(){
                document.body.scrollTop = 0 ;
            }
            function f1(){
                var top = document.body.scrollTop;
                var go_top = document.getElementById('top');
                if(top > 100){
                    go_top.classList.remove('hide');
                }else{
                    go_top.classList.add('hide');
                }
            }

        </script>
    </body>
</html>

返回頂部按鈕

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            body{
                margin: 0;
                background-color: gray;
                
            }
            .pg-head{
                background: #000000;
                height: 48px;
            }
            .menu{
                position: absolute;
                width: 180px;
                left: 200px;
                background-color: white;
                float: left;
            }
            .content{
                position: absolute;
                width: 180px;
                left: 385px;
                background-color: white;
                float: left;
            }
            .item{
                background-color: white;
                width: 800px;
                height: 900px;
            }
            .pg-body .fixed{
                position: fixed;
                top:10px;
            }
            .pg-body .menu .active{
                background-color: #426ebe;
                color: white;
            }
        </style>
    </head>
    
    <body onscroll="Hua();">
        <div class="pg-head"></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 type="text/javascript">
            
            function Hua(){
                
                
                var a = document.body.offsetHeight;
                var b = document.getElementById('content').offsetHeight;
                var c = document.documentElement.clientHeight;
                
//                console.log(document.body.scrollTop , document.body.clientHeight , document.body.scrollHeight  );
                var huagao = document.body.scrollTop;
                var menu = document.getElementById('menu');
                if (huagao > 48 ){
                    menu.classList.add('fixed');
                }else{
                    menu.classList.remove('fixed');
                }
                
                var items = document.getElementById('content').children;
                for(var i=0;i<items.length;i++){
                    var currentItem = items[i];
//                    console.log(currentItem.offsetTop);
//                    console.log(currentItem.offsetTop , currentItem.offsetParent.offsetTop);
                    var currentItemBodyTop = currentItem.offsetTop + currentItem.offsetParent.offsetTop
//                    console.log(currentItemTop , huagao);
                    var currentItemWindowTop = currentItemBodyTop - huagao ;
                    var currentHeight = items[i].offsetHeight;
//                    console.log(currentItemWindowTop);
                    if(currentItemWindowTop < 0 && huagao < (currentHeight + currentItemBodyTop)){
                        menu.getElementsByTagName('li')[i].classList.add('active');
                        var li = menu.getElementsByTagName('li');
                        for(var j=0;j<li.length;j++){
                            if(li[j] != menu.getElementsByTagName('li')[i]){
                                li[j].classList.remove('active');
                            }
                        }
                        break;
                    }
                        
                }
                
                //當最後一部分高度不夠時!
                if( (a+b) == (huagao+c) ){
                    var mu = document.getElementById('menu').children[0].lastElementChild;
                    var ac = document.getElementById('menu').children[0].getElementsByClassName('active')[0];
                    ac.classList.remove('active');
                    mu.classList.add('active');
                }
                
            }
        </script>
    </body>
</html>

滾動菜單

七、提交表單

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

八、其餘操做

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


setInterval(function (){...} , 1000 )  每1秒執行一次這個函數

3、事件

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

this
event
事件鏈以及跳出

1.註冊事件:
a. <div onxxxx=''>
b.document....on.... =function()

2.this     代指當前正在操做的標籤
3.event	   觸發當前標籤的事件內容

onkeydown='down(this,event)'

console.log(e.KeyCode)

4. 自定義事件>默認事件 (優先級)

若是想要阻止後面事件發生, 須要 return false;
<a href='#' onclick = 'return Func();' ></a> 

若是Func返回false 後面事件再也不執行!!!!

實例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            .logo{
                background-color:red ;
                height: 60px;
                color:white;
                font-size: 60px;
                text-align: center;
            }
        </style>
    </head>
    <body>
        <div id="logo" class='logo'>歡迎蒞臨指導</div>
        
        <script type="text/javascript">
            
            setInterval(function f1(){
                
                var logo = document.getElementById('logo').innerText;
                var first_str = logo[0];
                var sub_str = logo.slice(1,logo.length);
                var new_str = sub_str + first_str;
                document.getElementById('logo').innerText = new_str;
                
            },800)
            

        </script>
        
    </body>
</html>

跑馬燈

練習題:

demo 1:class操做

demo 2:標籤操做(多層標籤嵌套)

demo 3:樣式操做

demo 4:返回頂部按鈕

demo 5:滾動菜單

demo 6:事件-跑馬燈

1.摺疊菜單:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            ul{
                padding: 0;
                margin: 0;
            }
            .father{
                width: 200px;
                height: 500px;
                background-color: gray;
            }
            .hidetitle{
                display:none;
            }
            .title{
                background-color: red;
                cursor: pointer;
            }
            .context{
                background-color: aquamarine;
            }
        </style>
    </head>
    <body>
        <div class="father">
            <div class="item">
                <div class="title" onclick="Show(this)">菜單一</div>
                <div class="context">
                    <ul>
                        <li>123</li>
                        <li>123</li>
                        <li>123</li>
                    </ul>
                </div>
            </div>
            
            <div class="item">
                <div class="title" onclick="Show(this)">菜單二</div>
                <div class="context hidetitle">
                    <ul>
                        <li>123</li>
                        <li>123</li>
                        <li>123</li>
                    </ul>
                </div>
            </div>
        
            <div class="item">
                <div class="title" onclick="Show(this)">菜單三</div>
                <div class="context hidetitle">
                    <ul>
                        <li>123</li>
                        <li>123</li>
                        <li>123</li>
                    </ul>
                </div>
            </div>
        
            <div class="item">
                <div class="title" onclick="Show(this)">菜單四</div>
                <div class="context hidetitle">
                    <ul>
                        <li>123</li>
                        <li>123</li>
                        <li>123</li>
                    </ul>
                </div>
            </div>
        </div>
        
        <script type="text/javascript">
            function Show(obj){
                
                var pre_node = obj.parentElement;
                obj.nextElementSibling.classList.remove('hidetitle');
                
                var father = obj.parentElement.parentElement;
                var all_son = father.children;
                for(var i=0;i<all_son.length;i++){
                    if (all_son[i] != pre_node){
                        all_son[i].children[1].classList.add('hidetitle');
                    }
                }
            }
        </script>
        
    </body>
</html>