DOM、BOM 操作超級集合

本文轉載自查看原文 2016-07-18 10:43 3103 JavaScript

本章內容：

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

定義

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

節點類型

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

節點類型		描述
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() 包含一個或多個節點時返回true

contains() 如果是后代節點返回true

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()	一個參數:包含一個或多個類名的字符串
classList	返回所有類名的數組 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); //1、2、3
        console.log(tT.outerText); //1、2、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); //1、2、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>

返回頂部

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 JavaScript之BOM和DOM及其兼容操作詳細總結 BOM,DOM常見操作和DHML 前端基礎之BOM和DOM dom和bom是什么？ BOM與DOM的區別 Javascript之BOM與DOM講解前端基礎之BOM和DOM Javascript組成--ECMAScript，DOM，BOM javascript-BOM操作理解JavaScript中BOM和DOM的關系