建設(shè)銀行信用卡網(wǎng)站登錄seo優(yōu)化方向
目錄
查找html元素
1.通過(guò)id
2.通過(guò)標(biāo)簽名
3.通過(guò)類名
DOM?
1.創(chuàng)建動(dòng)態(tài)的HTML內(nèi)容
?2.修改元素內(nèi)容
3.改變HTML屬性?
4.改變css樣式
DOM事件?
DOM節(jié)點(diǎn)
1.添加HTML元素
2.刪除HTML元素
瀏覽器對(duì)象
?1.Window對(duì)象
?2.Screen對(duì)象
3.History對(duì)象
?4.Location對(duì)象
?
查找html元素
1.通過(guò)id
//根據(jù)id名稱獲取元素對(duì)象
var test = document.getElementsById("test");
//獲取元素內(nèi)容
var result = test.innerHTML;
2.通過(guò)標(biāo)簽名
//查找所有的段落元素<p>并獲取第一個(gè)段落標(biāo)簽內(nèi)部的文本內(nèi)容
var p = document.getElementByTagName("p");
var result = p[0].innerHTML;
3.通過(guò)類名
document.getElementsByByClassName("類名"）；
DOM?
1.創(chuàng)建動(dòng)態(tài)的HTML內(nèi)容
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>創(chuàng)建動(dòng)態(tài)的HTML內(nèi)容</title></head><body><h3>JavaScript DOM動(dòng)態(tài)創(chuàng)建內(nèi)容</h3><script>var date = new Date();document.write("本段文字為動(dòng)態(tài)生成。"+date.toLocaleString());</script></body>
</html>
?2.修改元素內(nèi)容
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>修改元素內(nèi)容</title></head><body><h3>修改元素內(nèi)容</h3><p id="test">World</p><script>var p = document.getElementById("test");var msg = p.innerHTML;p.innerHTML = "<strong>Hello</strong>";alert("段落元素的初始內(nèi)容是：\n"+msg);</script></body>
</html>
3.改變HTML屬性?
var img = document.getElementById("image");
img.src = "image/1.jpg";
4.改變css樣式
var p = document.getElementById("test");
p.style.backgroundColor = "blue";
DOM事件?
| onabort | 圖像加載過(guò)程被中斷 |
| onblur | 元素失去焦點(diǎn) |
| onchange | 域的內(nèi)容被改變 |
| onclick | 元素被鼠標(biāo)左鍵單擊 |
| ondbclick | 元素被鼠標(biāo)左鍵雙擊 |
| onerror | 加載文檔或圖像時(shí)發(fā)送錯(cuò)誤 |
| onfocus | 元素獲得焦點(diǎn) |
| onkeydown | 鍵盤(pán)按鍵被按下 |
| onkeypress | 鍵盤(pán)按鍵被按下并松開(kāi) |
| onkeyup | 鍵盤(pán)按鍵被松開(kāi) |
| onload | 頁(yè)面或圖像加載完成 |
| onmousedown | 鼠標(biāo)按鍵被按下 |
| onmousemove | 鼠標(biāo)被移動(dòng) |
| onmouseout | 鼠標(biāo)從當(dāng)前元素上移走 |
| onmouseover | 鼠標(biāo)移動(dòng)到當(dāng)前元素上 |
| onmouseup | 鼠標(biāo)按鍵被松開(kāi) |
| onreset | 重置按鈕被單擊 |
| onresize | 窗口或框架的大小被更改 |
| onselect | 文本被選中 |
| onsubmit | 提交按鈕被單擊 |
| onunload | 退出頁(yè)面 |
DOM節(jié)點(diǎn)
1.添加HTML元素
//創(chuàng)建新的元素
var box?= document.createElement("div");
//設(shè)置新元素的背景顏色為黃色
box.style.backgroundColor="yellow";
//設(shè)置新元素的內(nèi)容
box.innerHTML="這是動(dòng)態(tài)添加的div元素。"；
//將新創(chuàng)建的元素添加id="container"的段落元素中
p.appendChild(box);
2.刪除HTML元素
//獲取父元素
var test = document.getElementById("test");
//獲取子元素
var p = document.getElementById("p01");
//刪除子元素
test.removeChild(p);
瀏覽器對(duì)象
?1.Window對(duì)象
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"/><title>Window對(duì)象</title>
</head>
<body><h3>Window對(duì)象</h3><script>var width = window.innerWidth;var height = window.innerHeight;document.write("瀏覽器當(dāng)前可用寬度為："+width+"<br>瀏覽器可用高度為："+height);</script>
</body>
</html>
?2.Screen對(duì)象
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"/><title>Screen對(duì)象</title>
</head>
<body><h3>Screen對(duì)象</h3><script>var width = screen.availWidth;var height = screen.availHeight;document.write("屏幕當(dāng)前可用寬度為："+width+"<br>屏幕可用高度為："+height);</script>
</body>
</html>
3.History對(duì)象
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"/><title>History對(duì)象</title>
</head>
<body><h3>History對(duì)象</h3><button onClick="history.back()">后退</button><button onClick="history.forward()">前進(jìn)</button>
</body>
</html>
?4.Location對(duì)象
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"/><title>Location對(duì)象</title>
</head>
<body><h3>Location對(duì)象</h3><script>location.href = "http://www.baidu.com";</script>
</body>
</html>
?
5.Navigator對(duì)象
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"/><title>Navigator對(duì)象</title>
</head>
<body><h3>Navigator對(duì)象</h3><script>var mag = "瀏覽器代碼名："+navigator.appCodeName;msg+="<br><br>瀏覽器名稱："+navigator.appName;msg+="<br><br>瀏覽器版本："+navigator.appVersion;msg+="<br><br>瀏覽器是否允許使用："+navigator.cookieEnabled;msg+="<br><br>瀏覽器所在操作系統(tǒng)："+navigator.platform;msg+="<br><br>用戶代理："+navigator.userAgent;msg+="<br><br>瀏覽器語(yǔ)言："+navigator.language;msg+="<br><br>瀏覽器品牌："+navigator.vendor;document.write(msg);</script>
</body>
</html>