python學習之路前端-Dom

時間 2019-12-12

標籤 python 學習之路前端 dom 欄目 Python 简体版

原文原文鏈接

Dom簡介javascript

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

1、查找元素

1.直接查找java

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

根據ID來查找一個標籤node

HTML代碼以下：python

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Dom直接查找</title>
</head>
<body>
    <input id="i1" value="id標籤" />
</body>
</html>

根據name屬性來查找標籤編程

HTML代碼瀏覽器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Dom直接查找</title>
</head>
<body>
    <input type="radio" name="gender"/>
</body>
</html>

根據class屬性來查找標籤app

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Dom直接查找</title>
</head>
<body>
    <span class="c1">class屬性標籤</span>
</body>
</html>

根據標籤名來查找標籤，如p標籤、a標籤、div標籤編程語言

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Dom直接查找</title>
</head>
<body>
    <div style="color: #2459a2;">查找全部類型的標籤</div>
    <div style="font-size: 48px;color: blueviolet;">div標籤</div>
</body>
</html>

2.間接查找this

parentNode          // 父節點
childNodes          // 全部子節點
firstChild          // 第一個子節點
lastChild           // 最後一個子節點
nextSibling         // 下一個兄弟節點
previousSibling     // 上一個兄弟節點

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

2、操做元素

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);
*/

innerText和innerHTML的不一樣：

應用實例：全選反選取消

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

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/yamei"
 
// 方式二
var tag = "<a class='c1' href='http://www.cnblogs.com/wupeiqi'>yamei</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";

應用實例：搜索框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>輸入要查找的關鍵字</title>
</head>
<body>
    <input id="i1" type="text" value="請輸入你要查找的關鍵字" onfocus="Foucs();" onblur="Blur();"/>
    <script>
        function Foucs() {
            //console.log('Foucs');
            //獲取標籤，清空
            var tag = document.getElementById('i1');
            if(tag.value == "請輸入你要查找的關鍵字"){
                tag.value = "";
            }
            
        }
        function Blur() {
            //console.log('blur');
            var tag = document.getElementById('i1');
            var val = tag.value;
            if(val.trim().length == 0){
                tag.value = "請輸入你要查找的關鍵字";
            }
        }
    </script>
</body>
</html>

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

應用一：Demo

應用二：Demo-滾動固定

應用三：Demo-滾動菜單

應用四：Demo-滾動高度

7.提交表單

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

8.其餘操做

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>歡迎python大神蒞臨指導  </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>