目錄
1，BOM對象
1.1：BOM簡述和消息框
1.2：location【重點】
1.3：history
2，元素内容體操作【本階段重點】
1，BOM對象
1.1：BOM簡述和消息框
将來一定會涉及到JS操作浏覽器進行特效BOM對象進行完成
BOM（Browser Object Model）浏覽器對象模型
浏覽器：IE，火狐，谷歌
作用：用來執行浏覽器的相關操作。（例如：浏覽器的位址，彈出消息等）
一般情況下，window代表了BOM對象。
Javascript知識【BOM對象&元素内容體操作】 
Javascript知識【BOM對象&元素内容體操作】 Javascript知識【BOM對象&元素内容體操作】 Javascript知識【BOM對象&元素内容體操作】 1.2：location【重點】
Javascript知識【BOM對象&元素内容體操作】 Javascript知識【BOM對象&元素内容體操作】 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
// console.log(location);
// console.log(location.host);
//alert(location.href);
function run() {
//頁面進行位址跳轉
location.href="http://www.czxy.com";
}
function run2() {
location.search="?username=zhangsan&pwd=123";
}
/*
href屬性或search屬性進行修改，都會導緻目前頁面進行跳轉式重新整理
*/
</script>
</head>
<body>
<input type="button" value="點我跳轉官網" onclick="run()"/>
<input type="button" value="點我修改位址欄參數清單" onclick="run2()"/>
<input type="text"/>
</body>
</html>
|
1.3：history
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>main</h1>
<a href="02.html">02</a>
<a href="03.html">03</a>
<br/>
<input type="button" value="back" onclick="history.back()"/>
<input type="button" value="forward" onclick="history.forward()"/>
<input type="button" value="back2" onclick="history.go(-1)"/>
<input type="button" value="forward2" onclick="history.go(1)"/>
<input type="button" value="back3" onclick="history.go(-2)"/>
</body>
</html>
|
Javascript知識【BOM對象&元素内容體操作】 go(-2) 向回跳2頁，如果曆史清單往回不足兩頁，停止進行功能。
2，元素内容體操作【本階段重點】
<P>内容體</P>
Javascript知識【BOM對象&元素内容體操作】 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
function run1() {
//1、擷取div
var div = document.getElementById("d1");
//2、操作内容體
div.innerHTML = "<font color='red'>你好</font>";
}
function run2() {
//1、擷取div
var div = document.getElementById("d1");
//2、操作内容體
alert(div.innerHTML);
}
</script>
</head>
<body>
<div id="d1"></div>
<hr/>
<input type="button" value="點我設定div的内容體為'你好'" onclick="run1()"/>
<input type="button" value="點我擷取div内容體" onclick="run2()"/>
</body>
</html>
|
課堂練習題：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
function setDivInnerHTML() {
//1、擷取文本框的值
var value = document.getElementById("t1").value;
//2、擷取div，設定div内容體
document.getElementById("d1").innerHTML = value;
}
function getDivData() {
alert(document.getElementById("d1").innerHTML);
}
</script>
</head>
<body>
<div id="d1"></div>
<hr/>
<input type="text" id="t1" /><br/>
<input type="button" value="點我設定div的内容體為輸入框值" onclick="setDivInnerHTML()"/>
<input type="button" value="點我擷取div内容體" onclick="getDivData()"/>
</body>
</html>
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
function run1() {
document.getElementById("d1").innerHTML+="AA";
}
function run2() {
var d1 = document.getElementById("d1");
d1.innerHTML = "CC"+d1.innerHTML;
}
</script>
</head>
<body>
<div id="d1">
<font color="#87ceeb">你好</font>
</div>
<hr/>
<input type="button" value="點我設定div的内容體尾部追加AA" onclick="run1()"/>
<input type="button" value="點我設定div的内容體頭部追加CC" onclick="run2()"/>
</body>
</html>
|
小結：
内容體操作：HTML代碼
内容體擷取：元素.innerHTML
