亚洲香蕉成人av网站在线观看_欧美精品成人91久久久久久久_久久久久久久久久久亚洲_热久久视久久精品18亚洲精品_国产精自产拍久久久久久_亚洲色图国产精品_91精品国产网站_中文字幕欧美日韩精品_国产精品久久久久久亚洲调教_国产精品久久一区_性夜试看影院91社区_97在线观看视频国产_68精品久久久久久欧美_欧美精品在线观看_国产精品一区二区久久精品_欧美老女人bb

首頁 > 網站 > WEB開發 > 正文

DOM、BOM操作集合

2024-04-27 15:06:12
字體：大 中 小
來源：轉載
供稿：網友

DOM、BOM操作集合

一、定義

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

二、節點

節點類型

節點類型 描述
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 下一個兄弟節點
nextElementCount 下一個兄弟標簽元素
childElementCount 第一層元素的個數（不包括文本節點和注釋）
ownerDocument 指向整個文檔的文本節點

代碼示例

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title></head><body> <div id="t"> <span></span> <span id="s"> <a></a> <h1>nick</h1> </span> <p></p> </div> <script type="text/Javascript"> 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); //<h1>nick</h1> 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>

節點關系方法：

hasChildNodes() 包含一個或多個節點時返回truecontains() 如果是后代節點返回trueisSaneNode()、isEqualNode() 傳入節點與引用節點的引用為同一個對象返回truecompareDocumentPostion() 確定節點之間的各種關系
數值 關系
1 給定節點不在當前文檔中
2 給定節點位于參考節點之前
4 給定節點位于參考節點之后
8 給定節點包含參考節點
16 給定節點被參考節點包含

代碼示例

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title></head><body> <div id="t"> <span></span> <span id="s"> <a></a> <h1>Nick</h1> </span> <p></p> </div> <script type="text/javascript"> 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>

三、選擇器

選擇器

getElementById() 一個參數：元素標簽的ID
getElementByTagName() 一個參數：元素標簽名
getElementByName() 一個參數：name屬性名
getElementsByClassName() 一個參數：包含一個或多個類名的字符串
classList 返回所有類名的數組 add(添加) contains(存在返回true，否則返回 false) remove(刪除) toggle(存在則刪除，否則添加)
querySelector() 接受CSS選擇符，返回匹配到的第一元素，沒有則null
querySelectorAll() 接收CSS選擇符，返回一個數組，沒有則返回[]

代碼示例

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title></head><body> <!--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></body></html>

四、style

樣式操作方法style

style.cssText 可對style中的代碼進行讀寫
style.item() 返回給定位置的CSS屬性的名稱
style.length style代碼塊中參數個數
style.getPropertyValue() 返回給定屬性的字符串值
style.getPropertyPriority() 檢測給定屬性是否設置了！important,設置了返回”important”;否則返回空字符串
style.removeProperty() 刪除指定屬性
style.setProperty() 設置屬性，可三個參數:設置屬性名，設置屬性值，是否設置為”important”(可不寫)

代碼示例

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</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>

五、表格操作

表格操作方法

createTHead() 創建 thead 元素，返回引用
deleteTHead() 刪除 thead 元素
createTBody() 創建 tbody 元素，返回引用
inseRow(0) 插入 tr 元素，從0開始
deleteRow(pos) 刪除指定位置的行
insertCell(0) 插入 td 元素，從0開始
deleteCell(pos) 刪除指定位置的單元格

代碼示例

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</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>

六、表單操作

表單操作方式

document.forms 獲取所有表單
.submit() 提交表單

代碼示例

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</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>

七、元素節點ELEMENT

nodeType:1

nodeName 訪問元素的標簽名
tagName 訪問元素的標簽名
createElement() 創建節點
appendChild() 末尾添加節點，并返回新增節點
insertBefore() 參照節點之前插入節點，兩個參數：要插入節點和參加節點
insertAfter() 參照節點之后插入節點，兩個參數：要插入的節點和參照節點
replaceChild() 替換節點，兩個參數：要插入的節點和要替換的節點（被移除）
removeChild() 移除節點
cloneNode() 克隆，一個布爾值參數，true為深拷貝，false為淺拷貝
importNode() 從文檔中復制一個節點，兩個參數：要復制的節點和布爾值（是否復制子節點）
insertAdjacentHTML() 插入文本，兩個參數:插入的位置和要插入的文本 “beforebegin”,在該元素前插入“afterbegin”,在該元素第一個子元素前插入“beforeend”,在該元素最后一個子元素后面插入“afterend”,在該元素后插入

代碼示例：

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</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><%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</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>

八、屬性節點attributes

nodeType:2

attributes 獲取所有標簽屬性
getAttribute() 獲取指定標簽屬性
setAttribute() 設置指定標簽屬性
removeAttribute() 移除指定標簽屬性
var s=document.createAttribute(“age”) s.nodeValue=”18” 創建age屬性 設置屬性值為18

代碼示例

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</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><%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</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>

九、文本節點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開始到count處的文本被text替換
substringData(offset,count) 提取從offset開始到count處的文本

代碼示例：

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</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><%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</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>

十、文檔節點 Document

nodeType: 4

document.documentElement 代表頁面中的 html 元素
document.body 代表頁面中的 body 元素
document.doctype 代表 !DOCTYPE 標簽
document.head 代表頁面中的 head 元素
document.title 代表 title 元素的文本，可修改
document.URL 當前頁面的URL地址
document.domain 當前頁面的域名
document.chartset 當前頁面使用的字符集
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() write()文本原樣輸出到屏幕、writeln()輸出后加換行符
open()/close() 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 滾動高度

代碼示例

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><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>

十二、定時器

setInterval 多次定時器(毫秒計時)>
clearInterval 清除多次定時器
setTimeout 單次定時器
clearTimeout 清除單次定時器

代碼示例

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</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

prompt

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

十四、location

location.href 獲取URL
location.href=”URL” 重定向
location.assign(“http://www.baidu.com”) 重定向到URL
location.search=”wd=hundan” 修改查詢字符串(百度搜索)
location.hostname 服務主機名，例：www.baidu.com
location.pathname 路徑，例：baidu
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()

十六、事件操作

屬性 此事件發生在何時….
onabort 圖像的加載被中斷。
onblur 元素失去焦點
onchange 域的內容被改變
onclick 當用戶點擊某個對象時調用的事件句柄
ondblclick 當用戶雙擊某個對象時調用的事件句柄
onerror 在加載文檔或圖像時發生錯誤
onfocus 元素獲得焦點
onkeydown 某個鍵盤按鍵被按下
onkeypress 某個鍵盤按鍵被按下并松開
onkeyup 某個鍵盤按鍵被松開
onload 一張頁面或一幅圖像完成加載
onmousemove 鼠標被移動
onmousedown 鼠標按鈕被按下
onmouSEOut 鼠標從某個元素移開
onmouseover 鼠標移到某元素之上
onmouseup 鼠標按鍵被松開
onreset 重置按鈕被點擊
onresize 窗口或框架被重新調整大小
onselect 文本被選中
onsubmit 確認按鈕被點擊
onunload 用戶退出頁面

上一篇：JavaScript學習

下一篇：CSS學習

發表評論 共有條評論
用戶名: 密碼:
驗證碼: 匿名發表
亚洲香蕉成人av网站在线观看_欧美精品成人91久久久久久久_久久久久久久久久久亚洲_热久久视久久精品18亚洲精品_国产精自产拍久久久久久_亚洲色图国产精品_91精品国产网站_中文字幕欧美日韩精品_国产精品久久久久久亚洲调教_国产精品久久一区_性夜试看影院91社区_97在线观看视频国产_68精品久久久久久欧美_欧美精品在线观看_国产精品一区二区久久精品_欧美老女人bb
亚洲欧美日本精品| 精品露脸国产偷人在视频| 在线观看欧美日韩国产| 92版电视剧仙鹤神针在线观看| 色悠久久久久综合先锋影音下载| 精品高清一区二区三区| 91视频免费在线| 欧美午夜精品久久久久久久| 欧美激情18p| 2019精品视频| 国产精品永久免费观看| 日韩日本欧美亚洲| 成人有码在线播放| 91手机视频在线观看| 国产成人精品视频在线观看| 不用播放器成人网| 国产成人激情小视频| 九色精品美女在线| 精品无码久久久久久国产| 国产精品美女免费视频| 欧美日韩激情视频| 欧美日韩一二三四五区| 9.1国产丝袜在线观看| 久久久精品视频在线观看| 欧美老女人www| 亚洲国产私拍精品国模在线观看| 亚洲福利视频二区| 岛国av午夜精品| 亚洲精品永久免费| 亚洲在线观看视频网站| 日av在线播放中文不卡| 疯狂欧美牲乱大交777| 久久伊人精品一区二区三区| 91精品在线观看视频| 成人免费视频网| 亚洲自拍小视频免费观看| 国产亚洲在线播放| 久久久久久久999精品视频| 日韩av黄色在线观看| 亚洲三级 欧美三级| 久久精品久久精品亚洲人| 日韩麻豆第一页| 亚洲free性xxxx护士hd| 日本精品视频在线播放| 国产一区二区三区视频在线观看| 欧美在线视频观看免费网站| 亚洲成人中文字幕| 国模吧一区二区三区| 久久大大胆人体| 国产性色av一区二区| 爽爽爽爽爽爽爽成人免费观看| 日韩欧中文字幕| 亚洲高清色综合| 激情亚洲一区二区三区四区| 国产成人免费av电影| 午夜精品一区二区三区在线视频| 91亚洲精品一区二区| 正在播放欧美视频| 欧美成人午夜免费视在线看片| 国产亚洲精品成人av久久ww| 91系列在线观看| 91chinesevideo永久地址| 久久精品国产v日韩v亚洲| 另类色图亚洲色图| 亚洲女人天堂av| 久久不射热爱视频精品| 亚洲电影av在线| 中文字幕av一区| 午夜精品久久久久久久白皮肤| www国产精品视频| 国产精品一区二区三区在线播放| 高清亚洲成在人网站天堂| 亚洲成年人影院在线| 日韩精品久久久久| 精品久久久久久久久久| 亚洲女人被黑人巨大进入| 亚洲第一国产精品| 日韩电影在线观看永久视频免费网站| 日韩精品一区二区视频| 国产国产精品人在线视| 国产欧美日韩丝袜精品一区| 亚洲欧美激情视频| 久久久国产精品x99av| 最新国产精品亚洲| 热久久视久久精品18亚洲精品| 久久精品国产亚洲7777| 九色成人免费视频| 国产精品成人av在线| 日韩美女av在线免费观看| 精品免费在线视频| 亚洲色图欧美制服丝袜另类第一页| 欧美激情精品久久久久久| 国产成人综合久久| 精品欧美aⅴ在线网站| 91亚洲精品久久久久久久久久久久| 国产精品国产三级国产专播精品人| 久久精品国产成人精品| 亚洲a中文字幕| 九九视频直播综合网| 亚洲乱码av中文一区二区| 人人做人人澡人人爽欧美| 亚洲片在线资源| 日韩在线视频导航| 91精品在线观看视频| 亚洲欧美资源在线| 最近中文字幕mv在线一区二区三区四区| 国内免费精品永久在线视频| 国产日产久久高清欧美一区| 亚洲一区二区三区乱码aⅴ蜜桃女| 欧美国产乱视频| 亚洲第一av在线| 国产午夜精品免费一区二区三区| 久久久中文字幕| 国产福利视频一区二区| 日韩中文字幕不卡视频| 亚洲成人av在线播放| 欧美久久久精品| 亚洲视频axxx| 亚洲欧美国产va在线影院| 欧美黑人一区二区三区| 日韩av观看网址| 成人午夜小视频| 欧美黑人一级爽快片淫片高清| 亚洲国产精久久久久久久| 亚洲国产另类久久精品| 秋霞午夜一区二区| 777午夜精品福利在线观看| 久久久国产精品免费| 欧美精品一区三区| 在线免费观看羞羞视频一区二区| 国产主播精品在线| 亚洲精品一区久久久久久| 日韩电影在线观看永久视频免费网站| 国产精品狠色婷| 中文字幕精品在线视频| 亚洲欧美成人精品| 亚洲性生活视频在线观看| 3344国产精品免费看| 精品久久久久久久久中文字幕| 久久久精品一区二区三区| 国产一区在线播放| 国产精品xxxxx| wwwwwwww亚洲| 欧美国产精品人人做人人爱| 日韩有码在线播放| 亚洲精品国产精品国自产观看浪潮| 日韩一区在线视频| 久久激情五月丁香伊人| 国产精品永久免费| 97精品久久久中文字幕免费| 色午夜这里只有精品| 亚洲黄色片网站| 国产成人aa精品一区在线播放| 亚洲国产婷婷香蕉久久久久久| 超碰精品一区二区三区乱码| 亚洲精品一区在线观看香蕉| 欧美国产日韩精品| 国产亚洲精品一区二区| 欧美日韩成人在线视频| 色视频www在线播放国产成人| 久久精品2019中文字幕| 亚洲网站在线看| 欧美精品第一页在线播放| 精品视频久久久久久久|