DOM、BOM 操做

時間  2019-12-08
標籤 dom bom 欄目 HTML 简体版
原文   原文鏈接

本章內容：javascript

  • 定義
  • 節點類型
  • 節點關係
  •  選擇器
  • 樣式操做方法style
  • 表格操做方法
  • 表單操做方法
  • 元素節點ELEMENT
  • 屬性節點attributes
  • 文本節點TEXT
  • 文檔節點 Document
  • 位置操做方法
  • 定時器
  • 彈出框
  • location
  • 其它
  • 事件操做
  • 實例

 

定義

文檔對象模型（Document Object Model，DOM）是一種用於HTML和XML文檔的編程接口。css

 

節點類型

 12中節點類型都有NodeType屬性來代表節點類型html

節點類型 描述
1 Element 表明元素
2 Attr 表明屬性
3 Text 表明元素或屬性中的文本內容。
4 CDATASection 表明文檔中的 CDATA 部分（不會由解析器解析的文本）。
5 EntityReference 表明實體引用。
6 Entity 表明實體。
7 ProcessingInstruction 表明處理指令。
8 Comment 表明註釋。
9 Document 表明整個文檔（DOM 樹的根節點）。
10 DocumentType 向爲文檔定義的實體提供接口
11 DocumentFragment 表明輕量級的 Document 對象，可以容納文檔的某個部分
12 Notation 表明 DTD 中聲明的符號。

 

節點關係

nodeType 返回節點類型的數字值（1~12）
nodeName 元素節點:標籤名稱(大寫)、屬性節點:屬性名稱、文本節點:#text、文檔節點:#document
nodeValue 文本節點:包含文本、屬性節點:包含屬性、元素節點和文檔節點:null
parentNode 父節點
parentElement 父節點標籤元素
childNodes 全部子節點
children 第一層子節點
firstChild 第一個子節點，Node 對象形式
firstElementChild 第一個子標籤元素
lastChild 最後一個子節點
lastElementChild 最後一個子標籤元素
previousSibling 上一個兄弟節點
previousElementSibling 上一個兄弟標籤元素
nextSibling 下一個兄弟節點
nextElementSibling 下一個兄弟標籤元素
childElementCount 第一層子元素的個數(不包括文本節點和註釋)
ownerDocument 指向整個文檔的文檔節點 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="t">
        <span></span>
        <span id="s">
            <a></a>
            <h1>Nick</h1>
        </span>
        <p></p>
    </div>
    <script>
        var tT = document.getElementById("t"); console.log(tT.nodeType,tT.nodeName,tT.nodeValue); //1 "DIV" null
        console.log(tT.parentNode); //<body>...</body>
        console.log(tT.childNodes); //[text, span, text, span#s, text, p, text]
        console.log(tT.children); //[span, span#s, p, s: span#s]

        var sT = document.getElementById("s"); console.log(sT.previousSibling); //#text, Node 對象形式
        console.log(sT.previousElementSibling); //<span></span>
        console.log(sT.nextSibling); //#text
        console.log(sT.nextElementSibling); //<p></p>
        console.log(sT.firstChild); //#text
        console.log(sT.firstElementChild); //<a></a>
        console.log(sT.lastChild); //#text
        console.log(sT.lastElementChild); //<h1>Nick</h1>
 console.log(tT.childElementCount); //3
        console.log(tT.ownerDocument); //#document

    </script>
</body>
</html>
View Code

節點關係方法：

hasChildNodes()  包含一個或多個節點時返回truejava

contains()  若是是後代節點返回truenode

isSameNode()、isEqualNode()  傳入節點與引用節點的引用爲同一個對象返回true編程

compareDocumentPostion()  肯定節點之間的各類關係數組

數值 關係 1 給定節點不在當前文檔中 2 給定節點位於參考節點以前 4 給定節點位於參考節點以後 8 給定節點包含參考節點 16    給定節點被參考節點包含
compareDocumentPostion() 節點對應關係 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="t">
        <span></span>
        <span id="s">
            <a></a>
            <h1>Nick</h1>
        </span>
        <p></p>
    </div>
    <script>
        var tT = document.getElementById("t"); var sT = document.getElementById("s"); console.log(tT.hasChildNodes()); //true
        console.log(tT.contains(document.getElementById('s'))); //true
        console.log(tT.compareDocumentPosition(document.getElementById('s'))); //20,由於s被tT包含，因此爲16；而又在tT以後,因此爲4，二者相加爲20.
        console.log(tT.isSameNode(document.getElementById('t'))); //true
        console.log(tT.isEqualNode(document.getElementById('t'))); //true
        console.log(tT.isSameNode(document.getElementById('s'))); //false
    </script>
</body>
</html>
View Code

 

選擇器

getElementById()瀏覽器

 一個參數:元素標籤的ID
getElementsByTagName() 一個參數:元素標籤名
getElementsByName() 一個參數:name屬性名
getElementsByClassName() 一個參數:包含一個或多個類名的字符串

classListapp

返回全部類名的數組dom

  • add （添加）
  • contains （存在返回true,不然返回false）
  • remove（刪除）
  • toggle（存在則刪除，不然添加）
querySelector() 接收CSS選擇符，返回匹配到的第一個元素，沒有則null
querySelectorAll() 接收CSS選擇符，返回一個數組，沒有則返回[]

 

<!--getElementById()-->
    <div id="t"></div>
    <script>
        var tT = document.getElementById('t'); console.log(tT); </script>


<!--getElementsByTagName()-->
    <div id="t">
        <div></div>
        <div></div>
        <div></div>
    </div>
    <script>
        var tT = document.getElementsByTagName('div'); console.log(tT); //[div#t, div, div, div, t: div#t]
        console.log(tT[0]); //<div id="t">...</div>
        console.log(tT.length); //4
    </script>


<!--getElementsByName()-->
    <div name="nick"></div>
    <script>
        var tT = document.getElementsByName("nick"); console.log(tT); //[div]
    </script>


<!--getElementsByClassName()-->
    <div class="t">
        <div></div>
        <div></div>
        <div></div>
    </div>
    <script>
        var tT = document.getElementsByClassName('t'); console.log(tT); //[div.t]
        console.log(tT[0]); //<div id="t">...</div>
        console.log(tT.length); //1
    </script>


<!--classList-->
    <div class="t t2 t3"></div>
    <script>
        var tT = document.getElementsByTagName('div')[0]; tTList = tT.classList; console.log(tT); //<div class="t t2 t3"></div>
        console.log(tTList); //["t", "t2", "t3"]
        tTList.add("t5"); console.log(tTList.contains("t5")); //true
        tTList.remove("t5"); console.log(tTList.contains("t5")); //false
        tTList.toggle("t5"); console.log(tTList.contains("t5")); //true
    </script>


<!--querySelector()-->
    <div class="t t2 t3"></div>
    <div class="t" id="t"></div>
    <div name="nick"></div>
    <script>
        var tT = document.querySelector("div"); console.log(tT); //<div class="t t2 t3"></div>
        var tI = document.querySelector("#t"); console.log(tI); //<div class="t" id="t"></div>
        var tC = document.querySelector(".t"); console.log(tC); //<div class="t t2 t3"></div>
        var tN = document.querySelector("[name]"); console.log(tN); //<div name="nick"></div>
    </script>


<!--querySelectorAll()-->
    <div class="t t2 t3"></div>
    <div class="t" id="t"></div>
    <div name="nick"></div>
    <script>
        var tT = document.querySelectorAll("div"); console.log(tT); //[div.t.t2.t3, div#t.t, div]
        var tI = document.querySelectorAll("#t"); console.log(tI); //[div#t.t]
        var tC = document.querySelectorAll(".t"); console.log(tC); //[div.t.t2.t3, div#t.t]
        var tN = document.querySelectorAll("[name]"); console.log(tN); //[div]
    </script>
View Code

 

樣式操做方法style

style.cssText 可對style中的代碼進行讀寫
style.item() 返回給定位置的CSS屬性的名稱
style.length style代碼塊中參數個數
style.getPropertyValue() 返回給定屬性的字符串值
style.getPropertyPriority() 檢測給定屬性是否設置了!important，設置了返回"important";不然返回空字符串
style.removeProperty() 刪除指定屬性
style.setProperty() 設置屬性，可三個參數:設置屬性名，設置屬性值，是否設置爲"important"(可不寫或寫"") 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="t" style="background-color: yellow; width: 100px; height: 100px">8</div>

    <script>
        var tT = document.getElementById("t"); console.log(tT.style.cssText); //width: 100px; height: 100px; background-color: yellow;
        tT.style.cssText = "background-color: yellow; width: 200px; height: 200px"; //修改屬性
        console.log(tT.style.cssText); //width: 200px; height: 200px; background-color: yellow;
        console.log(tT.style.item("0")); //background-color
        console.log(tT.style.length); //3
        console.log(tT.style.getPropertyValue("background-color")); //yellow
        console.log(tT.style.getPropertyPriority("background-color")); //空字符串
        console.log(tT.style.removeProperty("width")); //200px
        tT.style.setProperty("width","200px",""); //設置屬性，第三個值爲important優先值，可不寫
        
    </script>
</body>
</html>
View Code

 

表格操做方法

createTHead()

建立<thead>元素，返回引用

deleteTHead()

 刪除<thead>元素

createTBody()

建立<tbody>元素，返回引用

insertRow(0)

插入<tr>元素，從0開始

deleteRow(pos)

  刪除指定位置的行

insertCell(0)

插入<td>元素，從0開始

deleteCell(pos)

 刪除指定位置的單元格

 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script>
        var table = document.createElement("table"); table.border = "1px"; table.width = "150px"; var theadt = table.createTHead(); var tbody = table.createTBody(); var trH0 = theadt.insertRow(0); trH0.insertCell(0).appendChild(document.createTextNode("姓名")); trH0.insertCell(1).appendChild(document.createTextNode("年齡")); var trB0 = tbody.insertRow(0); var trB1 = tbody.insertRow(1); trB0.insertCell(0).appendChild(document.createTextNode("nick")); trB0.insertCell(1).appendChild(document.createTextNode("18")); trB1.insertCell(0).appendChild(document.createTextNode("jenny")); trB1.insertCell(1).appendChild(document.createTextNode("21")); trB0.deleteCell(1); console.log(table); document.body.appendChild(table); </script>
</body>
</html>
View Code

 

表單操做方法

document.forms

獲取全部表單

.submit()

 提交表單 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <form action="https://www.baidu.com/s" method="get">
        <input type="text" name="wd" />
        <input type="button" value="百度一下" onclick="this.disable=true;BaiDu(this);" />
    </form>

    <script>
        var form = document.forms;  //獲取全部表單
        var formOne = form[0]; console.log(form); console.log(formOne); function BaiDu(ths) { var inputBaiDu = ths; inputBaiDu.parentNode.submit(); } </script>
</body>
</html>
View Code

 

元素節點ELEMENT

nodeType:1

nodeName 訪問元素的標籤名
tagName 訪問元素的標籤名
createElement() 建立節點
appendChild() 末尾添加節點，並返回新增節點
insertBefore() 參照節點以前插入節點，兩個參數：要插入的節點和參照節點
insertAfter() 參照節點以後插入節點，兩個參數：要插入的節點和參照節點
replaceChild() 替換節點，兩個參數：要插入的節點和要替換的節點(被移除)
removeChild() 移除節點
cloneNode() 克隆，一個布爾值參數，true爲深拷貝，false爲淺拷貝
importNode() 從文檔中複製一個節點，兩個參數：要複製的節點和布爾值(是否複製子節點)
insertAdjacentHTML()

插入文本，兩個參數：插入的位置和要插入文本

  • "beforebegin",在該元素前插入
  • "afterbegin",在該元素第一個子元素前插入
  • "beforeend",在該元素最後一個子元素後面插入
  • "afterend",在該元素後插入
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="t">
        <span id="one"></span>
        <span id="s">
            <a></a>
            <h1>Nick</h1>
        </span>
        <p></p>
    </div>
    <script>
        var tT = document.getElementById("t"); //appendChild()
        var a1New = document.createElement('a'); tT.appendChild(a1New); console.log(tT.lastElementChild); //<a></a>

        //insertBefore()
        var a2New = document.createElement('a'); a2New.className = 't'; //設置css樣式
        a2New.id = 'oneNew'; a2New.innerText = 'jenny'; //設置標籤中間文本
        tT.insertBefore(a2New,document.getElementById('one')); console.log(tT.firstElementChild); //<a class="t">jenny</a>

        //replaceChild()
        var a3New = document.createElement('h3'); tT.replaceChild(a3New,document.getElementById('oneNew')); console.log(tT.firstElementChild); //<h3></h3>

        //removeChild()
 tT.removeChild(tT.firstElementChild); console.log(tT.firstElementChild); //<span id="one"></span>

        //cloneNode()
        var clNo = tT.cloneNode(true); console.log(clNo); //<div id="t">...</div>

        //importNode()
        var imNoT = document.importNode(tT,true); console.log(imNoT.firstChild); //#text
        var imNoF = document.importNode(tT,false); console.log(imNoF.firstChild); //null

        //insertAdjacentHTML()
        tT.insertAdjacentText("beforebegin","beforebegin"); tT.insertAdjacentText("afterbegin","afterbegin"); tT.insertAdjacentText("beforeend","beforeend"); tT.insertAdjacentText("afterend","afterend"); </script>
</body>
</html>
View Code 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>title</title>
</head>
<body>
    <div id="t" class="tClass" title="tTitle" lang="en" dir="ltr"></div>

    <script>
        var tN = document.getElementById("t"); console.log(tN.nodeType); //1
        console.log(tN.tagName); //DIV
        console.log(tN.nodeName); //DIV
        console.log(tN.id); //t
        console.log(tN.title); //tTitle
        console.log(tN.lang); //en
        console.log(tN.dir); //ltr
        console.log(tN.className); //tClass

        var dirNew = document.createElement("div"); dirNew.className = "tC"; dirNew.innerText = "Nick"; console.log(dirNew); //<div class="tC">Nick</div>
    </script>
</body>
</html>
View Code

 

屬性節點attributes

nodeType:2

attributes

 獲取全部標籤屬性
getAttribute() 獲取指定標籤屬性
setAttribute() 設置指定標籤屬
removeAttribute() 移除指定標籤屬

var s = document.createAttribute("age")

s.nodeValue = "18"

建立age屬性

設置屬性值爲18

 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="t" class="s1 s2" name="nick"></div>

    <script>
        var tT = document.getElementById("t"); console.log(tT.attributes); //NamedNodeMap {0: id, 1: class, 2: name, length: 3}
        console.log(tT.attributes.id); //id="t"
        console.log(tT.attributes.class); //class="s1 s2"
 console.log(tT.attributes.getNamedItem("name")); //name="nick"
        console.log(tT.attributes.removeNamedItem("class")); //class="s1 s2"
        console.log(tT.attributes.getNamedItem("class")); //null
        var s = document.createAttribute("age"); //建立屬性
        s.nodeValue = "18"; //設置屬性值
 console.log(tT.attributes.setNamedItem(s)); console.log(tT.attributes); //NamedNodeMap {0: id, 1: name, 2: age, length: 3}
        console.log(tT.attributes.item("1")); //name="nick"
    </script>
</body>
</html>
View Code 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="t" class="s1 s2" name="nick"></div>

    <script>
        var tT = document.getElementById("t"); console.log(tT.attributes); //NamedNodeMap {0: id, 1: class, 2: name, length: 3}
        console.log(tT.attributes.id); //id="t"
        console.log(tT.attributes.class); //class="s1 s2"
 console.log(tT.getAttribute("name")); //nick
        tT.setAttribute("age",18); console.log(tT.getAttribute("age")); //18
        tT.removeAttribute("age"); console.log(tT.getAttribute("age")); //null
    </script>
</body>
</html>
View Code

 

文本節點TEXT

nodeType:3

innerText 全部的純文本內容，包括子標籤中的文本
outerText 與innerText相似
innerHTML 全部子節點(包括元素、註釋和文本節點)
outerHTML 返回自身節點與全部子節點
textContent 與innerText相似，返回的內容帶樣式
data 文本內容
length 文本長度
createTextNode() 建立文本
normalize() 刪除文本與文本之間的空白
splitText() 分割
appendData() 追加
deleteData(offset,count) 從offset指定的位置開始刪除count個字符
insertData(offset,text) 在offset指定的位置插入text
replaceData(offset,count,text) 替換，從offset開始到offscount處的文本被text替換
substringData(offset,count) 提取從ffset開始到offscount處的文本 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="t">Nick</div>

    <script>
        var tT = document.getElementById("t"); var tTOne = tT.firstChild; console.log(tTOne.nodeType); //3
 console.log(tTOne.data); //Nick
        console.log(tTOne.length); //4

        var tTNew = document.createTextNode("18"); console.log(tTNew.nodeType,tTNew.data); //3 "18"
 tTOne.appendData("18"); console.log(tTOne.data); //Nick18
        tTOne.deleteData(4,2); console.log(tTOne.data); //Nick
        tTOne.insertData(0,"jenny"); console.log(tTOne.data); //jennyNick
        tTOne.replaceData(0,5,"18"); console.log(tTOne.data); //18Nick
        var tTSub = tTOne.substringData(2,6); console.log(tTSub); //Nick
    </script>
</body>
</html>
View Code 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="t">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>

    <script>
        var tT = document.getElementById("t"); console.log(tT.innerText); //一、二、3
        console.log(tT.outerText); //一、二、3
        console.log(tT.innerHTML); //<div>1</div>、<div>2</div>、 <div>3</div>
        console.log(tT.outerHTML); //<div id="t">、<div>1</div>、<div>2</div>、<div>3</div>、</div>
        console.log(tT.textContent); //一、二、3（帶樣式）
    </script>
</body>
</html>
View Code

 

文檔節點 Document

nodeType:9

document.documentElement 表明頁面中的<html>元素
document.body 表明頁面中的<body>元素
document.doctype 表明<!DOCTYPE>標籤
document.head 表明頁面中的<head>元素
document.title 表明<title>元素的文本，可修改
document.URL 當前頁面的URL地址
document.domain 當前頁面的域名
document.charset 當前頁面使用的字符集
document.defaultView 返回當前 document對象所關聯的 window 對象，沒有返回 null
document.anchors 文檔中全部帶name屬性的<a>元素
document.links 文檔中全部帶href屬性的<a>元素
document.forms 文檔中全部的<form>元素
document.images 文檔中全部的<img>元素
document.readyState 兩個值:loading(正在加載文檔)、complete(已經加載完文檔)
document.compatMode

兩個值：BackCompat：標準兼容模式關閉、CSS1Compat：標準兼容模式開啓

write()、writeln()、

open()、close()

write()文本原樣輸出到屏幕、writeln()輸出後加換行符、

open()清空內容並打開新文檔、close()關閉當前文檔，下次寫是新文檔

 

位置操做方法

document.documentElement.offsetHeight

文檔總高度
document.documentElement.clientHeight

文檔佔當前屏幕高度
document.documentElement.clientWidth

文檔佔當前屏幕寬度

offsetHeight

 自身高度（height + padding + border）

scrollHeight

 文檔高度（height + padding）

offsetTop

 距離上級標籤訂位高度（magin）

clientTop

border高度（border）

offsetParent

 父級定位標籤，元素

scrollTop

滾動高度

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * { margin: 0; padding: 0; } .zg { height: 1000px; position: relative; border: 3px solid transparent; } .dg { height: 500px; padding-top: 10px; margin-top: 20px; border: 2px solid transparent; } </style>
</head>

<body onscroll="Scroll()">
    <div id="zg" class="zg">
        <div id="dg" class="dg">

        </div>
    </div>

    <script>
        var zg = document.documentElement.offsetHeight; console.log(zg); //1000、文檔總高度
        var dg = document.documentElement.clientHeight; console.log(dg); //667,可變、文檔佔屏幕高度

        var dgBox = document.getElementById("dg"); console.log(dgBox.offsetHeight); //514 (padding,border)、自身高度
        console.log(dgBox.scrollHeight); //510（padding）、文檔高度
        console.log(dgBox.offsetTop);  //20 (magin)、距離上級定位高度
        console.log(dgBox.clientTop); //2(border)、border高度
        console.log(dgBox.offsetParent); //<div id="zg" class="zg">...</div>元素、父級定位標籤

        function Scroll() { console.log(document.body.scrollTop); //滾動高度
 } </script>
</body>
</html>
View Code

 

定時器

setInterval 屢次定時器（毫秒計時）
clearInterval 清除屢次定時器
setTimeout 單次定時器
clearTimeout 清除單次定時器 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <input type="button" value="Interval" onclick="Interval();" />
    <input type="button" value="StopInterval" onclick="StopInterval();" />
    <script>
        function Interval() { s1 = setInterval(function () { console.log(123); }, 1000); s2 = setInterval(function () { console.log(456); }, 2000); console.log(1); } function StopInterval() { clearInterval(s1); clearInterval(s2); } </script>
</body>
</html>
定時器示例

 

彈出框

alert() 彈出框
confirm()

確認框

返回值：true、false
prompt()

輸入框

兩個參數：提示的文本和輸入的默認值，返回值：輸入的值、""、null

 
var result = prompt("What is your name?" ,"Nick"); if(result != null){ alert("welcome,"+result); } console.log(result)
prompt

 

location

location.href

location.href = "url"

獲取URL

重定向

location.assign("http://www.cnblogs.com/suoning")

 重定向到URL

location.search = "wd=suoning"

 修改查詢字符串(百度搜索)

location.hostname

 服務主機名，例：www.cnblogs.com

location.pathname

 路徑，例：suoning

location.port

 端口號

location.reload()

 從新加載

 

其它

navigator 包含有關瀏覽器的信息
screen 包含有關客戶端顯示屏幕的信息
history 包含用戶(在瀏覽器窗口中)訪問過的 URL
window.print();

顯示打印對話框

 
//後退一頁
history.go(-1) //前進一頁
history.go(1); //前進兩頁
history.go(2); //無參數時，刷新當前頁面
history.go() //後退一頁
history.back() //前進一頁
history.forward()
history 方法

 

事件操做

 

實例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <input type="text" placeholder="請輸入內容" />
    <input type="text" class="style_before" value="請輸入內容" onfocus="Focus(this)" onblur="Blur(this)" />
    <!--onfocus鼠標點進去事件、onblur鼠標點出去事件-->

    <script>
        function Focus(ths) { var th = ths; if (th.value == "請輸入內容"){ ths.value = ""; ths.className = "style_after"; } } function Blur(ths) { var th = ths; if (th.value == "請輸入內容" || th.value.trim().length == 0){ ths.value = "請輸入內容"; ths.className = "style_before"; } } </script>
</body>
</html>
 搜索框
搜索框 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="str_one" style="height: 150px; color: red; font-size: 50px; text-align: center; line-height: 150px"><b> &nbsp;瓜子花生款泉水，抽菸喝酒大保健&nbsp; </b></div>

    <script> setInterval( function () { str = document.getElementById("str_one"); str_text = str.innerText; first_char = str_text[0]; sub_char = str_text.slice(1,str_text.length); new_str = sub_char + first_char; str.innerText = new_str; },500); </script>
</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="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>
全選、反選 
<!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>
返回頂部
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程