BOM对象åDOM对象çåºå«
BOM对象åDOM对象
ä¸ãBOM对象
BOMï¼Browser Object Modelï¼æ¯ææµè§å¨å¯¹è±¡æ¨¡åï¼å¯ä»¥å¯¹æµè§å¨çªå£è¿è¡è®¿é®åæä½ãä½¿ç¨ BOMï¼å¼åè å¯ä»¥ç§»å¨çªå£ãæ¹åç¶ææ ä¸çææ¬ä»¥åæ§è¡å ¶ä»ä¸é¡µé¢å 容ä¸ç´æ¥ç¸å ³çå¨ä½ã
使 JavaScript æè½åä¸æµè§å¨"对è¯"ã
1. window对象
window对象æ¯å®¢æ·ç«¯JavaScriptæé«å±å¯¹è±¡ä¹ä¸ï¼ç±äºwindow对象æ¯å ¶å®å¤§é¨å对象çå ±åç¥å ï¼å¨è°ç¨window对象çæ¹æ³åå±æ§æ¶ï¼å¯ä»¥çç¥window对象çå¼ç¨ãä¾å¦ï¼window.document.write()å¯ä»¥ç®åæï¼document.write()ã
- æææµè§å¨é½æ¯æ window 对象ãå®è¡¨ç¤ºæµè§å¨çªå£ï¼
- æ¦å¿µä¸è®²ï¼ä¸ä¸ªhtmlæ档对åºä¸ä¸ªwindow对象ï¼
- åè½ä¸è®²ï¼æ§å¶æµè§å¨çªå£çï¼
- 使ç¨ä¸è®²ï¼window对象ä¸éè¦å建对象ï¼ç´æ¥ä½¿ç¨å³å¯ï¼
- ææ JavaScript å ¨å±å¯¹è±¡ãå½æ°ä»¥ååéåèªå¨æ为 window 对象çæåï¼
- å ¨å±åéæ¯ window 对象çå±æ§ãå ¨å±å½æ°æ¯ window 对象çæ¹æ³ã
æ¥ä¸æ¥è¦è®²çHTML DOM ç document ä¹æ¯ window 对象çå±æ§ä¹ä¸ã
window对象æ¹æ³
alert() æ¾ç¤ºå¸¦æä¸æ®µæ¶æ¯åä¸ä¸ªç¡®è®¤æé®çè¦åæ¡ã
confirm() æ¾ç¤ºå¸¦æä¸æ®µæ¶æ¯ä»¥å确认æé®ååæ¶æé®ç对è¯æ¡ã
prompt() æ¾ç¤ºå¯æ示ç¨æ·è¾å
¥ç对è¯æ¡ã
open() æå¼ä¸ä¸ªæ°çæµè§å¨çªå£ææ¥æ¾ä¸ä¸ªå·²å½åççªå£ã
close() å
³éæµè§å¨çªå£ã
setInterval() æç
§æå®çå¨æï¼ä»¥æ¯«ç§è®¡ï¼æ¥è°ç¨å½æ°æ计ç®è¡¨è¾¾å¼ã
clearInterval() åæ¶ç± setInterval() 设置ç timeoutã
setTimeout() å¨æå®ç毫ç§æ°åè°ç¨å½æ°æ计ç®è¡¨è¾¾å¼ã
clearTimeout() åæ¶ç± setTimeout() æ¹æ³è®¾ç½®ç timeoutã
window.alert("Hello worldï¼"); æè ç´æ¥alert("Hello worldï¼");
var ret=confirm(âæ¨ç¡®å®è¦å é¤å?â); // æè¿åå¼
console.log(ret);
// prompt()ï¼å¼¹åºä¸ä¸ªçªå£ï¼ç¨æ·è¾å
¥ä»ä¹å°±è¿åä»ä¹
var ret=prompt(â请è¾å
¥â¦â)
console.log(ret)
//open()ï¼æå¼ä¸ä¸ªæ°ççªå£å¹¶è¿å
¥æå®ç½å
open(âhttp://www.baidu.comâ);
åæ°1ä»ä¹é½ä¸å¡«å°±æ¯æå¼ä¸ä¸ªæ°çªå£ï¼åæ°2å¡«å
¥æ°çªå£çåå(ä¸è¬å¯ä»¥ä¸å¡«)ï¼åæ°3æ°æå¼çªå£çåæ°
open(ââ,ââ,âwidth=200,resizable=no,height=100â);
//close()ï¼å°å½åææ¡£çªå£å
³é
close();
setInterval()åclearInterval()
// æ¯éä¸æ®µæ¶é´å°±æ§è¡ä¸æ¬¡ç¸åºå½æ° let timer = setInterval(function(){ alert("Hello World!")}, 3000); // åæ¶setInterval设置ï¼è¯æ³ï¼clearInterval(setintervalçè¿åå¼); clearInterval(timer);
<!DOCTYPE html> <html lang="cn"> <head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>å®æ¶å¨</title> <script> var intervalId;
function f() {
var current_time = (new Date()).toLocaleString();var inputEle = document.getElementById(âi1â);
inputEle.value = current_time;
}
function start() {
f();
if (intervalId === undefined) {
intervalId = setInterval(f, 1000); // æ¯è¿1ç§å°±è°ç¨å½æ°fã
}
}
function end() {
clearInterval(intervalId);
intervalId = undefined; // åæ¶setInterval设置
}
</script>
</head>
<body>
<input type=âtextâ id=âi1â>
<input type=âbuttonâ value=âå¼å§â id=âstartâ οnclick=âstart();â>
<input type=âbuttonâ value=âç»æâ id=âendâ οnclick=âend();â>
</body>
</html>
setTimeout()åclearTimeout()
var ID = setTimeout(f,2000); // åªè°ç¨ä¸æ¬¡å¯¹åºå½æ° function f() { alert('Hello worldï¼'); } // clearTimeout(ID); 触åä»ä¹è¡ä¸ºååæ§è¡çè¿å¥
2. Location对象
Location 对象å å«æå ³å½å URL çä¿¡æ¯ã
Location å¯¹è±¡æ¯ Window 对象çä¸ä¸ªé¨åï¼å¯éè¿ window.location å±æ§æ¥è®¿é®ã
Location 对象æ¹æ³ï¼
location.reload() //éæ°å 载页é¢ï¼å³å·æ°
// 跳转å°æå®é¡µé¢ï¼å¯ä»¥è¿åä¸ä¸ä¸ªé¡µé¢ï¼
location.assign(âURLâ)
location.href=âURLâ
// 跳转å°æå®é¡µé¢ï¼ä¸å¯ä»¥è¿åä¸ä¸ä¸ªé¡µé¢ï¼
location.replace(âURLâ)
3. History对象 ï¼äºè§£å³å¯ï¼
History 对象å å«ç¨æ·ï¼å¨æµè§å¨çªå£ä¸ï¼è®¿é®è¿ç URLã
History å¯¹è±¡æ¯ window 对象çä¸é¨åï¼å¯éè¿ window.history å±æ§å¯¹å ¶è¿è¡è®¿é®ã
history.forward() // åè¿ä¸é¡µ history.back() // åéä¸é¡µ
äºãDOM对象
1. ä»ä¹æ¯DOMï¼
DOM ï¼Document Object Modelï¼æ¯ææ档对象模åï¼éè¿å®ï¼å¯ä»¥è®¿é®HTMLææ¡£çææå ç´ ã
DOM æ¯ W3Cï¼ä¸ç»´ç½èçï¼çæ åãDOM å®ä¹äºè®¿é® HTML å XML ææ¡£çæ åï¼
"W3C æ档对象模åï¼DOMï¼æ¯ä¸ç«äºå¹³å°åè¯è¨çæ¥å£ï¼å®å 许ç¨åºåèæ¬å¨æå°è®¿é®åæ´æ°ææ¡£çå 容ãç»æåæ ·å¼ã"
W3C DOM æ å被å为 3 个ä¸åçé¨åï¼
- æ ¸å¿ DOM - é对任ä½ç»æåææ¡£çæ å模å
- XML DOM - é对 XML ææ¡£çæ å模å
- HTML DOM - é对 HTML ææ¡£çæ å模å
ä»ä¹æ¯ XML DOMï¼
ããXML DOM å®ä¹äºææ XML å
ç´ ç对象åå±æ§ï¼ä»¥å访é®å®ä»¬çæ¹æ³ã
ä»ä¹æ¯ HTML DOMï¼
ããHTML DOM å®ä¹äºææ HTML å
ç´ ç对象åå±æ§ï¼ä»¥å访é®å®ä»¬çæ¹æ³ã
2. DOMèç¹
æ ¹æ® W3C ç HTML DOM æ åï¼HTML ææ¡£ä¸çææå 容é½æ¯èç¹(NODE)ï¼
- æ´ä¸ªææ¡£æ¯ä¸ä¸ªææ¡£èç¹ï¼document对象ï¼
- æ¯ä¸ª HTML å ç´ æ¯å ç´ èç¹ï¼element 对象ï¼
- HTML å ç´ å çææ¬æ¯ææ¬èç¹ï¼text对象ï¼
- æ¯ä¸ª HTML å±æ§æ¯å±æ§èç¹ï¼attribute对象ï¼
- 注éæ¯æ³¨éèç¹ï¼comment对象ï¼
ç»domæ æ¯ä¸ºäºå±ç¤ºææ¡£ä¸å个对象ä¹é´çå ³ç³»ï¼ç¨äºå¯¹è±¡ç导èªãè¿éåªéè¦è®°ä½ Document 对象å Element 对象å³å¯ã
èç¹ï¼èªèº«ï¼å±æ§ï¼
- attributes - èç¹ï¼å ç´ ï¼çå±æ§èç¹
- nodeType â èç¹ç±»å
- nodeValue â èç¹å¼
- nodeName â èç¹å称
- innerHTML - èç¹ï¼å ç´ ï¼çææ¬å¼ï¼è®°ä½è¿ä¸ªå°±å¯ä»¥äºï¼
导èªå±æ§ï¼
- parentNode - èç¹ï¼å ç´ ï¼çç¶èç¹ ï¼ä¸è¬ç¨è¿ä¸ªï¼
- firstChild â èç¹ä¸ç¬¬ä¸ä¸ªåå ç´
- lastChild â èç¹ä¸æåä¸ä¸ªåå ç´
- childNodes - èç¹ï¼å ç´ ï¼çåèç¹
JavaScript å¯ä»¥éè¿DOMå建å¨æç HTMLï¼
- JavaScript è½å¤æ¹å页é¢ä¸çææ HTML å ç´
- JavaScript è½å¤æ¹å页é¢ä¸çææ HTML å±æ§
- JavaScript è½å¤æ¹å页é¢ä¸çææ CSS æ ·å¼
- JavaScript è½å¤å¯¹é¡µé¢ä¸çææäºä»¶ååºååº
3. æ¥æ¾æ ç¾
ç´æ¥æ¥æ¾
document.getElementsByClassName æ ¹æ®classå±æ§è·å
document.getElementsByTagName æ ¹æ®æ ç¾åè·åæ ç¾åé
document.getElementById æ ¹æ®idå±æ§å¼è·åä¸ä¸ªæ ç¾
document.getElementsByName() æ ¹æ®nameå±æ§å¼è·åä¸ä¸ªæ ç¾
示ä¾ï¼
var ele=document.getElementsByClassName(âc1â)[0];
console.log(ele)
é´æ¥æ¥æ¾
parentElementããããããã//ç¶èç¹æ ç¾å ç´ childrenãããã ãããã //ææåæ ç¾ firstElementChildãããã //第ä¸ä¸ªåæ ç¾å ç´ lastElementChildãããã //æåä¸ä¸ªåæ ç¾å ç´ nextElementtSiblingãã //ä¸ä¸ä¸ªå å¼æ ç¾å ç´ previousElementSibling //ä¸ä¸ä¸ªå å¼æ ç¾å ç´ ç¤ºä¾: var ele1=document.getElementsByTagName("a")[0]; var ele2=ele1.parentElement; console.log(ele2);
4. èç¹æä½
å建èç¹ï¼
var divEle = document.createElement("div");
æ·»å èç¹ï¼
// 追å ä¸ä¸ªåèç¹ï¼ä½ä¸ºæåçåèç¹ï¼ Anode.appendChild(Bnode)ï¼ // æå¢å çèç¹æ¾å°æ个èç¹çåè¾¹ã Anode.insertBefore(Bnode,Cnode); // å¨Anodeèç¹ä¸ï¼å°Cnodeèç¹æå ¥Bnodeèç¹åé¢
// 示ä¾
var imgEle = document.createElement(âimgâ);
imgEle.src = â#â;
var d1Ele = document.getElementById(âd1â);
d1Ele.appendChild(imgEle);
æ¿æ¢èç¹ï¼
Anode.replaceChild(Bnode,Cnode);
å±æ§èç¹ï¼
// è·åææ¬èç¹çå¼ var ele = document.getElementById("d1")
// 1.å¦æid为d1çæ ç¾å
åµå¥å
¶ä»æ ç¾
ele.innerText // åªåd1æ ç¾å
çææææ¬å
容
ele.innerHTML // d1æ ç¾å
åµå¥çæ ç¾åææææ¬å
容é½å
// 2.å¦æid为d1çæ ç¾å åªæææ¬å 容ï¼é£ä¹è¿ä¸¤ä¸ªé½æ¯åææ¬
设置ææ¬èç¹çå¼ï¼
var ele = document.getElementById("d1") ele.innerText = "å¨å¹²å" ele.innerHTML = "<p>å¨å¹²å<p/>"
attributeæä½
var ele = document.getElementsByClassName("c1")[0]; ele.setAttribute("hobby","swimming"); console.log(ele.getAttribute("hobby")); ele.removeAttribute("hobby");
// èªå¸¦çå±æ§å¯ä»¥ç´æ¥.å±æ§åæ¥è·åå设置
ele.id;
ele.id = âxxxâ;
è·åå¼æä½
è¯æ³ï¼èç¹å.value
éç¨äºæ ç¾ï¼inputãselectãtextarea
var ele = document.getElementById("i1"); console.log(ele.value);
classçæä½
// elementNodeï¼èç¹åï¼ç®åç¨eleï¼åä¸é¢é£æ ·ï¼ ele.className è·åæææ ·å¼ç±»å(å符串)
ele.classList.remove(cls) å é¤æå®ç±» ele.classList.add(cls) æ·»å ç±» ele.classList.contains(cls) åå¨è¿åtrueï¼å¦åè¿åfalse ele.classList.toggle(cls) åå¨å°±å é¤ï¼å¦åæ·»å
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>classç¸å ³æä½</title> <style> .c1 { height: 200px; width: 200px; border-radius: 50%; background-color: grey; } .c2 { background-color: yellow; } </style> </head> <body>
<div class=âc1 c2 c3â οnclick=âchange(this);â>div</div>
<div class=âc1 c2 c3â>div</div>
<div class=âc1 c2 c3â>div</div>
<div class=âc1 c2 c3â>div</div>
<script>
// function change(ths) {
// ths.classList.toggle(âc2â);
// }
// 第äºç§ç»å®äºä»¶çæ¹å¼
var divEle = document.getElementsByTagName(âdivâ);
for (var i=0;i<divEle.length;i++){
divEle[i].onclick=function () {
this.classList.toggle(âc2â);
}
}
</script>
</body>
</html>
æå®CSSæä½
var ele = document.getElementById("d1"); ele.style.color = "red";
JSæä½CSSå±æ§çè§å¾ï¼
â 对äºæ²¡æä¸æ¨ªçº¿çCSSå±æ§ä¸è¬ç´æ¥ä½¿ç¨style.å±æ§åå³å¯ãå¦ï¼
ele.style.margin
ele.style.width
ele.style.left
ele.style.position
â¡å¯¹å«æä¸æ¨ªçº¿çCSSå±æ§ï¼å°ä¸æ¨ªçº¿åé¢ç第ä¸ä¸ªåæ¯æ¢æ大åå³å¯ãå¦ï¼
ele.style.marginTop
ele.style.borderLeftWidth
ele.style.zIndex
ele.style.fontFamily
5.äºä»¶
HTML 4.0 çæ°ç¹æ§ä¹ä¸æ¯æè½å使 HTML äºä»¶è§¦åæµè§å¨ä¸çå¨ä½ï¼actionï¼ï¼æ¯å¦å½ç¨æ·ç¹å»æ个 HTML å ç´ æ¶å¯å¨ä¸æ®µ JavaScriptãä¸é¢æ¯ä¸ä¸ªå±æ§å表ï¼è¿äºå±æ§å¯æå ¥ HTML æ ç¾æ¥å®ä¹äºä»¶å¨ä½ã
常ç¨äºä»¶ï¼
onclick å½ç¨æ·ç¹å»æ个对象æ¶è°ç¨çäºä»¶å¥æã
ondblclick å½ç¨æ·åå»æ个对象æ¶è°ç¨çäºä»¶å¥æã
onfocus å
ç´ è·å¾ç¦ç¹ã //ç»ä¹ ï¼è¾å
¥æ¡
onblur å
ç´ å¤±å»ç¦ç¹ã //åºç¨åºæ¯ï¼ç¨äºè¡¨åéªè¯ï¼ç¨æ·ç¦»å¼æ个è¾å
¥æ¡æ¶ï¼ä»£è¡¨å·²ç»è¾å
¥å®äºï¼æ们å¯ä»¥å¯¹å®è¿è¡éªè¯ã
onchange åçå
容被æ¹åã//åºç¨åºæ¯ï¼é常ç¨äºè¡¨åå
ç´ ,å½å
ç´ å
容被æ¹åæ¶è§¦åï¼ï¼ä¸çº§èå¨ï¼
onkeydown æ个é®çæé®è¢«æä¸ã//åºç¨åºæ¯: å½ç¨æ·å¨æåä¸ä¸ªè¾å
¥æ¡æä¸å车æé®æ¶ï¼è¡¨åæ交ã
onkeypress æ个é®çæé®è¢«æä¸å¹¶æ¾å¼ã
onkeyup æ个é®çæé®è¢«æ¾å¼ã
onload ä¸å¼ 页é¢æä¸å¹
å¾åå®æå è½½ã
onmousedown é¼ æ æé®è¢«æä¸ã
onmousemove é¼ æ 被移å¨ã
onmouseout é¼ æ ä»æå
ç´ ç§»å¼ã
onmouseover é¼ æ 移å°æå
ç´ ä¹ä¸ã
onmouseleave é¼ æ ä»å
ç´ ç¦»å¼
onselect ææ¬è¢«éä¸ã
onsubmit 确认æé®è¢«ç¹å»ã
ç»å®æ¹å¼ï¼
æ¹å¼1
<!DOCTYPE html> <html lang="cn"> <head> <meta charset="UTF-8"> <title>xx</title> </head> <body> <div id="d1" οnclick="changeColor(this);">ç¹æåä½åé¢è²</div> <script> function changeColor(that) { that.style.color="red"; } </script> </body> </html>
注æï¼thisæ¯å®åï¼è¡¨ç¤ºè§¦åäºä»¶çå½åå ç´ ï¼å½æ°å®ä¹è¿ç¨ä¸çthat为形åï¼å¯ä»¥åå ¶ä»ååã
æ¹å¼2ï¼
<!DOCTYPE html> <html lang="cn"> <head> <meta charset="UTF-8"> <title>xx</title> </head> <body> <div id="d1">ç¹ææ¹åææ¬å 容</div> <script> var ele= document.getElementById("d1"); ele.onclick = function () { this.innerText="æ³å¹²åå¢ï¼"; } </script> </body> </html>
onload
onload å±æ§å¼åä¸åªç» bodyå
ç´ å ã
è¿ä¸ªå±æ§ç触å æ å¿ç 页é¢å
容被å è½½å®æã
åºç¨åºæ¯ï¼å½æäºäºæ
æ们å¸æ页é¢å è½½å®ç«å»æ§è¡ï¼é£ä¹å¯ä»¥ä½¿ç¨è¯¥äºä»¶å±æ§ã
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script> function f() { var ele = document.getElementsByClassName("c1")[0]; ele.style.color = "red"; } </script> </head> <body οnlοad="f()"> <div class="c1">i'm div1.</div> </body> </html>
onsubmit
å½è¡¨åå¨æ交æ¶è§¦åï¼è¯¥å±æ§ä¹åªè½ç» form å ç´ ä½¿ç¨ï¼åºç¨åºæ¯ï¼å¨è¡¨åæ交åéªè¯ç¨æ·è¾å ¥æ¯å¦æ£ç¡®ï¼å¦æéªè¯å¤±è´¥ï¼å¨è¯¥æ¹æ³ä¸æ们åºè¯¥é»æ¢è¡¨åçæ交ã
<!DOCTYPE html> <html lang="cn"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body>
<form id=âformâ>
<input type=âtextâ/>
<input type=âsubmitâ value=âç¹æ!â />
</form>
<script type=âtext/javascriptâ>
// é»æ¢è¡¨åæ交æ¹å¼1
// onsubmitå½åçäºä»¶å½æ°ï¼å¯ä»¥æ¥åè¿åå¼ï¼å
¶ä¸è¿åfalse表示æ¦æªè¡¨åæ交ï¼å
¶ä»ä¸ºæ¾è¡ã
var ele = document.getElementById(âformâ);
ele.onsubmit = function(event) {
// alert(âéªè¯å¤±è´¥ï¼è¡¨åä¸ä¼æ交!â);
// return false;
// é»æ¢è¡¨åæ交æ¹å¼2
alert(âéªè¯å¤±è´¥ï¼è¡¨åä¸ä¼æ交!â);
event.preventDefault(); // éç¥æµè§å¨ä¸è¦æ§è¡ä¸äºä»¶å
³èçé»è®¤å¨ä½ã
}
</script>
</body>
</html>
Event 对象
Event 对象代表äºä»¶çç¶æï¼æ¯å¦äºä»¶å¨å ¶ä¸åççå ç´ ãé®çæé®çç¶æãé¼ æ çä½ç½®ãé¼ æ æé®çç¶æã
äºä»¶é常ä¸å½æ°ç»å使ç¨ï¼å½æ°ä¸ä¼å¨äºä»¶åçå被æ§è¡ï¼event对象å¨äºä»¶åçæ¶ç³»ç»å·²ç»å建好äºï¼å¹¶ä¸ä¼å¨äºä»¶å½æ°è¢«è°ç¨æ¶ä¼ ç»äºä»¶å½æ°ï¼æ们è·å¾ä» ä» éè¦æ¥æ¶ä¸ä¸å³å¯ã
æ¯å¦onkeydownï¼æ们æ³ç¥éåªä¸ªé®è¢«æä¸äºï¼éè¦é®ä¸event对象çå±æ§ï¼è¿éå°±æ¯KeyCodeã
äºä»¶ä¼ æ
<!DOCTYPE html> <html lang="cn"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .outer{ width: 200px; height: 200px; background-color: antiquewhite; } .inner{ width: 100px; height: 100px; background-color: rebeccapurple; } </style> </head> <body>
<div class=âouterâ>
<div class=âinnerâ></div>
</div>
<script>
var ele1 = document.getElementsByClassName(âinnerâ)[0];
ele1.onclick = function (e) {
alert(âI am inner!â);
e.stopPropagation();
};
var ele2 = document.getElementsByClassName(âouterâ)[0];
ele2.onclick = function () {
alert(âI am outer!â)
};
</script>
</body>
</html>