Bom
概念
Browser Object Model 瀏覽器對象模型
BOM提供了獨立於內容的、可以與瀏覽器窗口進行互動的對象結構
window對象
概念
稱爲 瀏覽器對象, 當瀏覽器打開一個 html 文檔的時候, 通常會創建一個 window 對象
屬性
| window對象屬性 | 含義 |
|---|---|
| history | 歷史- 表示客戶訪問過的歷史記錄(URL) |
| location | 當前頁面 URL (網址) 信息 |
| screen | 只讀屬性, 包含有關客戶端顯示屏幕的有關信息 |
方法
| 方法名 | 說明 |
|---|---|
| 彈窗 alert | 警告框 (帶有提示信息,和一個確定按鈕) |
| 彈窗 confirm | 確認框 (帶有提示信息, 和確認 與取消按鈕的對話框) |
| 彈窗 prompt | 輸入框 (可以使用對話框接收用戶的輸入信息) |
| close() | 關閉窗口功能 |
| open() | 打開一個新的瀏覽器窗口,加載指定URL 文檔 |
| setTimeout() | 在指定毫秒數後執行指定函數(一次性) |
| setInterval() | 在指定毫秒數後執行指定函數(週期性) |
| clearInterval() | 取消由 setInterval() 設置的 timeout。 |
彈窗案例
警告框
<button onclick="window.alert('有種再點我一次')">點我一下試試</button>
<button onclick="alert('有種再點我一次')">點我一下試試</button>
確認框
<button onclick="f1()">點我一下試試</button>
function f1(){
// confirm 確認框 有返回值, 當點擊確認的時候,返回true
var boo = confirm('有種再點我一次');
console.log(boo);
}
// 主要用處 刪除按鈕. 確認用戶是否確定要刪除
function f1(){
var boo = confirm('你確定要刪除嗎?');
if(boo){
console.log("刪除成功!");
}else{
console.log("取消刪除!");
}
}
輸入框
prompt(參數一,參數二) , 表示 提示信息 和 默認值
<button onclick="f1()">登錄</button>
function f1(){
var pwd = prompt('請輸入密碼');
console.log(pwd);
}
窗口案例
// 父頁面
<button onclick="open_win()">打開頁面</button>
function open_win(){
window.open("test.html"); // 可以傳遞一些參數, 用於表示新窗口的樣式
}
// 子頁面 test.html
<button onclick="close_win()">關閉頁面</button>
function close_win(){
window.close();
}
定時任務
setTimeout() 一次性定時任務
function open_win(){
// 執行定時任務
// window.setTimeout("要執行的函數",需要等待的毫秒數);
window.setTimeout("window.open('test.html')",3000);
}
setInterval() 週期性任務
// 向瀏覽器中 輸出一些小圖片(每隔兩秒鐘輸入一張圖片)
function setInterval_print(){
window.setInterval("document.write('<img src=\"a.gif\">')",2000);
}
setInterval_print();
撤銷定時任務 clearInterval()
<button onclick="setInterval_print()">開啓定時任務</button>
<button onclick="clearInterval_print()">關閉定時任務</button>
var num;
function setInterval_print(){
// 返回值表示 該定時任務的一個編號
num = window.setInterval("console.log('123')",200);
}
function clearInterval_print(){
// 取消 編號爲num的定時任務
window.clearInterval(num);
}
history
| history 方法 | 說明 |
|---|---|
| back() | 加載history 對象列表中 前一個 URL |
| forward() | 加載history 對象列表中 後一個 URL |
| go(參數) | 加載history 對象列表中 指定的一個 URL |
back() forward()
<button onclick="history.back()">返回到上一個頁面</button><br><br>
<button onclick="history.forward()">加載到一個頁面</button>
<h1>A 頁面</h1>
<a href="b.html">B頁面</a>
go()
<button onclick="history.back()">返回到上一個頁面</button><br><br>
<button onclick="history.forward()">加載到一個頁面</button>
/*******相當於********/
<button onclick="history.go(-1)">返回到上一個頁面</button><br><br>
<button onclick="history.go(1)">加載到一個頁面</button>
<button onclick="history.go(-2)">返回到上兩層頁面</button><br><br>
<h1>B 頁面</h1>
location
| 屬性方法 | 名稱 | 說明 |
|---|---|---|
| 屬性 | host | 主機號,url 端口號 |
| 屬性 | hostname | 主機名 |
| 屬性 | href | 返回完整URL |
| 方法 | reload() | 重新加載當前文檔 |
| 方法 | replace() | 用新文檔替換當前文檔 |
獲取屬性案例
console.log(window.location.host);
console.log(window.location.hostname)
console.log(window.location.href);
// 需要使用 webStorm 內置服務器打開頁面
設置屬性
location.href 直接獲取
location.href = “”; 設置新網址
window.location.href = "URL地址"; 跳轉頁面到指定地
<button onclick="changeURL()">改變網頁地址</button>
<br>
<br>
<a href="http://www.baidu.com">百度首頁</a>
function changeURL(){
//改變頁面網址, 類似於 使用a鏈接 跳轉頁面
window.location.href = "http://www.baidu.com";
}
方法案例
<script>
document.write(new Date());
document.write("<br/>");
document.write("<br/>");
function changeDate(){
//刷新頁面
window.location.reload();
}
</script>
<button onclick="changeDate()">改變時間</button>
Dom 文檔模型
DOM 文檔對象模型
基於文檔編程的一組API 接口
是W3C組織 編寫的一組規範, 允許訪問和操作 HTML 頁面中每一個單獨的元素
“W3C 文檔對象模型 （DOM） 是中立於平臺和語言的接口，它允許程序和腳本動態地訪問和更新文檔的內容、結構和樣式。”
類似於一個上帝視角, 可以對看到的每一個元素, 進行操作
下棋 沒有棋盤 , 定位某一個旗棋子的位置
document 文檔對象
獲取節點對象的常用方法
| 常用方法 | 方法含義 |
|---|---|
| write() | 向文檔書寫文本, html標籤 甚至 script 腳本 |
| getElementById() | 返回 指定ID的第一個對象的引用 |
| getElementsByName() | 返回所有該名稱屬性的對象集合 |
| getElementsByTagName() | 返回所有該標籤名稱的對象集合 |
事件和 Dom 聯動
行內方法聯動
<body>
<button onclick="f1()">點擊</button>
</body>
<script>
function f1(){
// 執行代碼
}
</script>
對象聯動
<body>
<button >點擊</button>
</body>
<script>
var button = document.getElementsByTagName("button")[0];
// 對象.事件 = 函數, (只能寫函數名, 不能加括號)
// button.onclick = f1(); //錯誤
button.onclick = f1; // 正確
//錯誤的原因 當程序運行到 f1() 認爲 是函數的調用 , 直接執行 f1 函數
function f1(){
alert(123);
}
</script>
匿名函數
<script>
var button = document.getElementsByTagName("button")[0];
// 對象.事件 = 匿名函數
button.onclick = function (){
alert(123);
}
</script>
this 關鍵字
button.onclick = function (){
// this 指代當前對象
alert(this.innerHTML);
}
DOM 節點
HTML DOM 將 HTML 文檔視作樹結構。這種結構被稱爲節點樹：
- 在節點樹中，頂端節點被稱爲根（root）
- 每個節點都有父節點、除了根（它沒有父節點）
- 一個節點可擁有任意數量的子節點
- 同胞是擁有相同父節點的節點 (兄弟節點)
節點分類
- 整個文檔是一個文檔節點
- 每個 HTML 元素是元素節點
- HTML 元素內的文本是文本節點
- 每個 HTML 屬性是屬性節點
- 註釋是註釋節點
每一個節點 都有相同的屬性
nodeName
nodeValue
nodeType 類型編號
| 分類(類型) | nodeType 值 |
|---|---|
| 元素 Element | 1 |
| 屬性 attr | 2 |
| 文本 text | 3 |
| 註釋節點 comments | 8 |
| 文檔節點document | 9 |
<html>
<!-- 註釋 -->
<head>
<meta charset="UTF-8" />
<title >標題</title>
</head>
</html>
節點的屬性
| 屬性名稱 | 描述 |
|---|---|
| parentNode | 獲取該節點的父節點 |
| childNodes | 獲取所有子節點的集合 |
| firstChild | 獲取該節點的第一個子節點(最常用的是獲取元素的文本節點) |
| lastChild | 獲取最後一個子節點 |
| nextSibling | 下一個節點 (兄弟節點) |
| previousSibling | 上一個節點 |
通常使用 firstChild 想要獲取元素節點 但是有可能 會被 空格 換行之類的內容影響, 所以需要換成
| 避免空格影響 | |
|---|---|
| firstElementChild | 獲取第一個子節點, 元素節點(標籤節點) |
| lastElementChild | |
| nextElementSibling | |
| previousElementSibling |
案例
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
<script>
// 根據標籤獲取對象 , 標籤可以重複, 對象是一個集合
var arr = document.getElementsByTagName("html");
// 獲取集合中的第一個對象
var obj = arr[0];
var children = obj.childNodes;
// console.log(children);
for(var i in children){
console.log(children[i].nodeName + "\t"+children[i].nodeType);
}
</script>
</html>
<body>
<div class="dv">
<p id="pid"></p>
</div>
</body>
<script>
var dvs = document.getElementsByClassName("dv");
// console.log(dvs[0].firstChild);
// console.log(dvs[0].lastChild);
// 使用 firstChild 用可能 會被 空格 換行之類的內容影響, 所以需要換成
console.log(dvs[0].firstElementChild);
console.log(dvs[0].lastElementChild);
</script>
</html>
獲取標籤屬性
獲取節點屬性 getAttribute(“屬性名”);
設置節點屬性 setAttribute(“屬性名”,“屬性值”);
<body>
<input type="text">
<br/>
<br/>
<input type="button">
<button onclick="fun()">改變樣式</button>
</body>
<script>
function fun(){
// 獲取input 節點對象
var ipt = document.getElementsByTagName("input")[0];
console.log(ipt.getAttribute("type"));
var ipt1 = document.getElementsByTagName("input")[1];
console.log(ipt1.getAttribute("type"));
ipt1.setAttribute("type","date");
}
</script>
獲取標籤文本
表單元素 value
<body>
<input type="text" >
<input type="radio" value="男" name="sex">男
<input type="radio" value="女" name="sex">女
<select name="" id="">
<option value="青島">青島</option>
<option value="濟南">濟南</option>
</select>
</body>
<script>
var set = document.getElementsByTagName("select")[0];
set.onchange = function(){
alert(set.value);
}
// 兩個焦點事件
var ipt = document.getElementsByTagName("input")[1]
// 光標從 輸入框移除的時候
ipt.onblur = f1;
function f1(){
alert(ipt.value);
}
/*
ipt.onfocus = f2;
function f2(){
alert("focus");
}*/
</script>
普通標籤 innerHTML
<p><b>123</b></p>
<button>點擊切換 p 標籤中的內容</button>
var btn = document.getElementsByTagName("button")[0];
var p = document.getElementsByTagName("p")[0];
btn.onclick = function (){
// innerHTML 獲取 標籤之內的所有內容
// alert(p.innerHTML); // <b>123</b>
p.innerHTML = "切換完成";
}
innerText
// innerText 只獲取文本 不獲取標籤
alert(p.innerText); // 123
創建節點,插入節點,刪除和替換節點
| 節點操作方法 | |
|---|---|
| createElement(“標籤名”) | 創建一個新元素節點 |
| A.appendChild(B) | 把B 標籤 添加到 A 標籤的(內部)尾部 |
| insertBefore(A,B) | 把A節點添加到B節點之前 |
| cloneNode(A) | 複製節點A |
| A.removeChild(B) | 從A節點中刪除節點B |
| replaceChild(A,B) | 使用新節點A 替換 舊節點B |
案例1
<body>
選擇你喜歡的書:
<input type="radio" name="book" onclick="add1()">我和狗狗一起活下來
<input type="radio" name="book" onclick="add2()">灰霾來了怎麼辦
<br><br>
</body>
<script>
function add1(){
// <img src="images/dog.jpg" alt="">
// 1- 創建一張圖片 對象
var img = document.createElement("img"); // <img />
// 2- 設置圖片的屬性爲 一個圖片路徑
img.setAttribute("src","images/dog.jpg"); // <img src="images/dog.jpg">
// 3- 把圖片添加到body 網頁中
var body = document.getElementsByTagName("body")[0];
body.appendChild(img);
}
function add2(){
// <img src="images/dog.jpg" alt="">
// 1- 創建一張圖片 對象
var img = document.createElement("img"); // <img />
// 2- 設置圖片的屬性爲 一個圖片路徑
img.setAttribute("src","images/mai.jpg"); // <img src="images/dog.jpg">
// 3- 把圖片添加到body 網頁中
var body = document.getElementsByTagName("body")[0];
body.appendChild(img);
}
</script>
案例2
<body>
<h1>微博發佈系統</h1>
<br><br>
<textarea name="" id="" cols="30" rows="10">
</textarea>
<br>
<button onclick="submit_1()">發佈</button>
<hr>
<ul>
<li>2018年 已成爲歷史</li>
</ul>
<script>
function submit_1(){
/*
1- 獲取到用戶輸入的內容
2- 把用戶輸入的內容 添加到之後的ul列表中(新添加的內容 優先顯示)
*/
// 獲取textarea 對象
var area = document.getElementsByTagName("textarea")[0];
// 表單元素 使用 value 屬性獲取 元素內容
// 創建li 對象
var li = document.createElement("li"); // <li></li>
// li 是 普通標籤 非表單標籤
li.innerHTML = area.value; //<li>新添加的信息</li>
// 添加元素到 列表
var ul = document.getElementsByTagName("ul")[0];
/*ul.appendChild(li);*/
// 獲取 ul 中的第一個元素
// 把 li 插入到 ul 中的第一個元素之前
ul.insertBefore(li,ul.firstElementChild);
}
</script>
</body>
案例3
<body>
<ul>
<li id="first">
<img src="images/f01.jpg" >
<p><button onclick="del()">刪除我吧</button></p>
</li>
<li id="second">
<img src="images/f02.jpg" >
<p><button onclick="rep()">替換我吧</button></p>
</li>
</ul>
</body>
<script>
function del(){
// 獲取第一個 li 對象
var first = document.getElementById("first");
// 獲取li 中的 img 對象
var li = first.firstElementChild;
// 移除
first.removeChild(li);
}
function rep(){
var second = document.getElementById("second");
// 先創建一個img 對象
var img = document.createElement("img");
img.setAttribute("src","images/f04.jpg");
// 使用新對象替換舊對象
second.replaceChild(img,second.firstElementChild);
}
</script>
操作節點樣式
對象.style.樣式屬性
案例1 購物車案例 , 鼠標指向顯示列表, 鼠標移除, 列表隱藏
<body>
<section id="shopping">
<div id="cart" onmouseover="over()" onmouseout="out()">我的購物車<span>1</span>
</div>
<div id="cartList">
<h2>最新加入的商品</h2>
<ul>
<li><img src="images/makeup.jpg"></li>
<li>倩碧經典三部曲套裝（液體皁200ml+明肌2號水200ml+潤膚乳125ml）</li>
<li>¥558.00×1<br/>刪除</li>
</ul>
<div class="footer">共1件商品<span>共計¥558.00</span> <span>去購物車</span></div>
</div>
</section>
</body>
<script>
function over(){
// 獲取 cartList 對象
var cartList = document.getElementById("cartList");
var cart = document.getElementById("cart");
// 把該對象的樣式切換爲 block
cart.style.borderBottom = "none";
cart.style.backgroundColor = "#fff";
cart.style.zIndex = 100; // 圖層級別很高
cartList.style.display = "block";
cartList.style.position = "relative";
cartList.style.top = "-1px";
}
function out(){
// 獲取 cartList 對象
var cartList = document.getElementById("cartList");
// 把該對象的樣式切換爲 none
cartList.style.display = "none";
}
</script>
*{margin: 0;padding: 0; font-family: "Arial", "微軟雅黑"; font-size: 12px; line-height: 25px;}
ul,li{list-style: none;}
#shopping{margin: 20px auto 0 auto; width: 320px;
}
#cart{
background: #f9f9f9 url("../images/cart.png") 20px 6px no-repeat;
border: solid 1px #dcdcdc;
float: right;
width: 100px;
height: 28px;
padding-left: 45px;
line-height: 28px;
position: relative;
cursor: pointer;
}
#cart span{
position: absolute;
color: #fff;
background: #dc1742;
display: block;
width: 15px;
height: 15px;
border-radius: 50%;
top:-5px;
right: 20px;
font-size: 8px;
line-height: 15px;
text-align: center;
}
#cartList{
width: 310px;
float: right;
border: solid 1px #dcdcdc;
display: none;}
#cartList h2{border-bottom: 1px dashed #cccccc; font-size: 14px; padding-left: 10px;}
#cartList li{float: left;}
#cartList li:nth-of-type(1){width: 65px; text-align: center;}
#cartList li:nth-of-type(2){width: 155px;}
#cartList li:nth-of-type(3){text-align: center; width: 85px;}
#cartList .footer{clear: both; height: 35px; line-height: 35px; background: #f5f5f5; padding:0 5px;}
#cartList .footer span{padding: 0 12px;}
#cartList .footer span:nth-of-type(2){
color: #fff;
background: #dc1742;
display: block;
height: 25px;
border-radius: 6px;
float: right;
text-align: center;
font-weight: bold;
margin-top: 5px;
}
#shopping .cartOver{
background-color: #ffffff;
z-index: 100;
border-bottom: none;
}
#shopping .cartListOver{
display:block;
position:relative;
top:-1px;
}
#shopping .cartOut{
background-color:#f9f9f9;
border-bottom:solid 1px #dcdcdc;
}
#shopping .cartListOut{
display:none;
}
案例優化 使用 className 優化
<script>
function over(){
// 獲取 cartList 對象
var cartList = document.getElementById("cartList");
var cart = document.getElementById("cart");
// 把該對象的樣式切換爲 block
cart.className = "cartOver";
cartList.className = "cartListOver";
}
function out(){
// 獲取 cartList 對象
var cartList = document.getElementById("cartList");
var cart = document.getElementById("cart");
// 把該對象的樣式切換爲 none
cartList.className = "cartListOut";
cart.className = "cartOut";
}
</script>
操作位置屬性
scrollTop scrollLeft
獲得滾動軸的位置
<script>
// 當 頁面 滾動軸 移動的時候 觸發事件
window.onscroll = f1;
// 獲取到 滾動軸的位置
var top1;
var left1;
function f1(){
/*top1 = parseInt(document.documentElement.scrollTop || document.body.scrollTop);
console.log(top1);*/
left1 = parseInt(document.documentElement.scrollLeft || document.body.scrollLeft);
console.log(left1);
}
</script>
案例
隔行換色
// 隔行換色功能
/*
1- 獲取所有li 對象
2- 如果是奇數行 設置爲一個顏色, 偶數行 相反
*/
var arr = document.getElementsByTagName("li");
for(var i in arr){
if(i % 2 == 0){
arr[i] .style.backgroundColor = "skyblue";
}else{
arr[i] .style.backgroundColor = "pink";
}
}
鼠標指向高亮顯示
第一種
var lis = document.getElementsByTagName("li");
for(let i in lis){
// 給每一個li 添加事件
lis[i].onmouseover = function (){
lis[i].style.backgroundColor = "gold";
}
lis[i].onmouseout = function (){
lis[i].style.backgroundColor = "#fff";
}
}
第二種
// 給每一個li 添加 樣式 給他的所有兄弟修改顏色
var lis = document.getElementsByTagName("li");
for(let i in lis){
// 給每一個li 添加事件
lis[i].onmouseover = function (){
// alert(123);
// 其他所有標籤全部變爲白色
for(let k in lis){
if(k == i){
lis[k].style.backgroundColor = "gold";
}else{
lis[k].style.backgroundColor = "white";
}
}
}
}
全選全不選案例/反選案例
<body>
<input type="checkbox" name="hobby">抽菸
<br>
<input type="checkbox" name="hobby">喝酒
<br>
<input type="checkbox" name="hobby">燙頭
<br>
<input type="checkbox" name="hobby">學Java
<br>
<input type="checkbox" name="check" >全選/全不選
<input type="checkbox" name="reverse">反選
</body>
<script>
// 1- 獲取所有的hobby 的 標籤對象
// 2- 獲取全選和全不選框的選擇狀態
// 3- 給全選框添加點擊事件
// 4- 更改 所有hobby的狀態 和 check的狀態保持一致
// 1
var hobbies = document.getElementsByName("hobby");
// 2 html 中 如果給標籤添加 checked 屬性 默認選中
var check01 = document.getElementsByName("check")[0];
// alert(check01.checked); 選中狀態 是 true , 非選中狀態爲 false
// 3
check01.onclick = function(){
// 4
for(let i in hobbies){
hobbies[i].checked = check01.checked;
}
}
// 反選步驟
// 1- 給反選按鈕添加點擊事件
// 2- 把所有 hobby 的 狀態修改爲相反的狀態
var reverse = document.getElementsByName("reverse")[0];
reverse.onclick = function(){
for(let i in hobbies){
hobbies[i].checked = !hobbies[i].checked;
}
}
</script>
圖片輪播器
<body>
<div class="main">
<img src="img/left.png" alt="" id="left">
<img src="img/right.png" alt="" id="right">
<img src="img/1.jpg" alt="" id="content">
</div>
</body>
樣式
div{
height: 400px;
width: 600px;
margin: 0 auto;
position: relative;
}
#left,#right{
position: absolute;
width: 50px;
height: 50px;
top: 175px;
}
#left{
left: 10px;
}
#right{
right: 10px;
}
#content{
width: 100%;
height: 100%;
}
</style>
JS 控制 手動切換
<script>
// 1- 左右兩個圖標 需要添加點擊事件
// 2- 每一次點擊需要切換圖片, 實際上就是修改圖片的src 屬性
var left = document.getElementById("left");
var right = document.getElementById("right");
var content = document.getElementById("content");
// 3- 因爲圖片 的名稱 是 從1-11 的 修改src 屬性就是修改這些 數字
// 設置當前圖片的 圖片數字名稱爲 count
var count = 1;
right.onclick = next;
left.onclick = pre;
function next(){
// 每一次向右切換 count + 1
count++;
// 如果超出第十一張圖片, 就需要重新回到第一張
if(count > 11){
count = 1;
}
content.src = "img/"+count+".jpg";
}
function pre(){
count--;
// 如果圖片小於 1
if(count < 1){
count = 11;
}
content.src = "img/"+count+".jpg";
}
// 定時任務完成自動切換
window.setInterval("next()",1500);
</script>
定時任務功能, 鼠標移入停止切換, 移除繼續切換
var main = document.getElementsByClassName("main")[0];
// 定時任務完成自動切換
var no;
function start(){
no = window.setInterval("next()",1500);
}
start();
main.onmouseover = function(){
clearInterval(no);
}
main.onmouseout = function(){
start()
}
使用按鈕控制 表格的添加
分析步驟
// 1- 獲取到用戶在輸入框中輸入的內容
// 2- 填充到表格分步
// 2-1 創建 4個td 對象, 把文本添加到td對象中
// 2-2 創建tr對象 , 把 td 添加到 tr 中
// 2-3 把tr 對象 添加到 table 中
案例準備
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width: 400px;
margin: 0 auto;
text-align: center;
background-color: skyblue;
}
div>table{
width: 100%;
border-collapse: collapse;
}
table tr>td,table tr>th{
border:1px solid black;
}
</style>
</head>
<body>
<!-- 學員統計 -->
<!--table>((tr>th*4)+(tr>td*4))-->
<div class="main">
<table>
<caption>學員統計</caption>
<tr>
<th>學號</th>
<th>姓名</th>
<th>年齡</th>
<th>操作</th>
</tr>
<tr>
<td>10086</td>
<td>畢吉倫</td>
<td>25</td>
<td><button>刪除</button></td>
</tr>
</table>
<hr>
<br>
學號: <input type="text" name="sid"> <br><br>
姓名: <input type="text" name="sname"> <br><br>
年齡: <input type="text" name="sage"> <br><br>
<button id="btn"> 提交 </button>
</div>
</body>
</html>
JS 代碼實現
<script>
var btn = document.getElementById("btn");
btn.onclick = btn_add;
function btn_add() {
// 1- 獲取到用戶在輸入框中輸入的內容
var sid = document.getElementsByName("sid")[0];
var sname = document.getElementsByName("sname")[0];
var sage = document.getElementsByName("sage")[0];
// 2- 填充到表格分步
// 2-1 創建 4個td 對象, 把文本添加到td對象中
var td1 = document.createElement("td");
var td2 = document.createElement("td");
var td3 = document.createElement("td");
var td4 = document.createElement("td");
td1.innerText = sid.value;
td2.innerText = sname.value;
td3.innerText = sage.value;
// 把刪除按鈕創建出來添加到第四個 td 中
var but = document.createElement("button");
but.innerText = "刪除";
// 給刪除按鈕添加事件, 點擊事件, 移除當前行
// 誰有權利移除一行 (父級標籤可以移除子集標籤)
// 通過but 找到當前行對象
but.onclick = function(){
// but > td > tr
var tr = this.parentNode.parentNode;
// tr > table , 通過table 刪除 tr
tr.parentNode.removeChild(tr);
}
td4.appendChild(but);
// 2-2 創建tr對象 , 把 td 添加到 tr 中
var tr = document.createElement("tr");
tr.appendChild(td1);
tr.appendChild(td2);
tr.appendChild(td3);
tr.appendChild(td4);
// 2-3 把tr 對象 添加到 table 中
var table = document.getElementsByTagName("table")[0];
table.appendChild(tr);
}
</script>
二級聯動案例
實例圖片
環境準備
<body>
省份: <select id="province"></select> 城市 : <select id="city"></select>
</body>
<script>
// 創建省份數組
var province = ["請選擇", "北京", "上海", "天津", "重慶", "山東", "河南", "湖北", "湖南", "廣東", "河北", "山西", "遼寧", "吉林", "內蒙古", "黑龍江", "江蘇", "浙江", "安微", "福建", "江西", "四川", "貴州", "雲南", "陝西", "甘肅", "青海", "廣西", "西藏", "寧夏", "新疆", "海南", "香港", "澳門", "臺灣"];
var city = [[],
["", "東城", "西城", "海淀", "朝陽", "豐臺", "石景山", "通州", "順義", "房山", "大興", "昌平", "懷柔", "平谷", "門頭溝", "密雲", "延慶"],
["", "黃浦", "浦東", "徐匯", "長寧", "靜安", "普陀", "閘北", "虹口", "楊浦", "閔行", "寶山", "嘉定", "金山", "松江", "青浦", "奉賢", "崇明"],
["", "和平", "河西", "南開", "河東", "河北", "紅橋", "東麗", "津南", "西青", "北辰", "濱海新區"],
["", "萬州", "黔江", "涪陵", "渝中", "大渡口", "江北", "沙坪壩", "九龍陂", "南岸", "北碚", "渝北", "巴南", "長區", "江津", "合川", "永川", "南川", "綦江", "大足", "銅梁"],
["", "濟南", "青島", "淄博", "棗莊", "東營", "煙臺", "濰坊", "濟寧", "泰安", "威海", "日照", "濱州", "德州", "聊城", "臨沂", "菏澤", "萊蕪"],
["", "鄭州", "開封", "洛陽", "平頂山", "安陽", "鶴壁", "新鄉", "焦作", "濮陽", "許昌", "漯河", "三門峽", "商丘", "周口", "駐馬店", "南陽", "信陽", "濟源"],
["", "武漢", "黃石", "十堰", "荊州", "宜昌", "襄陽", "鄂州", "荊門", "黃岡", "孝感", "咸寧", "仙桃", "潛江", "恩施", "神農架", "天門", "隨州"],
["", "長沙", "株洲", "湘潭", "衡陽", "邵陽", "岳陽", "常德", "張家界", "益陽", "婁底", "郴州", "永州", "懷化", "湘西"],
["", "廣州", "深圳", "珠海", "汕頭", "佛山", "東莞", "中山", "潮州", "惠州", "湛江", "肇慶", "江門", "茂名", "韶關", "揭陽", "雲浮", "梅州", "汕尾", "河源", "陽江", "清遠"],
["", "石家莊", "保定", "滄州", "衡水", "邢臺", "邯鄲", "張家口", "廊坊", "唐山", "秦皇島", "承德"],
["", "太原", "大同", "陽泉", "長治", "晉城", "朔州", "晉中", "運城", "忻州", "臨汾", "呂梁"],
["", "瀋陽", "大連", "鞍山", "撫順", "本溪", "丹東", "錦州", "營口", "阜新", "遼陽", "盤錦", "鐵嶺", "朝陽", "葫蘆島"],
["", "長春", "吉林", "四平", "遼源", "通化", "白山", "白城", "松原", "延邊", "長白山", "梅河口", "公主嶺"],
["", "呼和浩特", "包頭", "烏海", "赤峯", "通遼", "鄂爾多斯", "呼倫貝爾", "巴彥淖爾", "烏蘭察布", "興安盟", "錫林郭勒", "阿拉善"],
["", "哈爾濱", "齊齊哈爾", "雞西", "鶴崗", "雙鴨山", "大慶", "伊春", "佳木斯", "七臺河", "牡丹江", "黑河", "綏化", "大興安嶺"],
["", "南京", "無錫", "徐州", "常州", "蘇州", "南通", "連雲港", "淮安", "鹽城", "揚州", "鎮江", "秦州", "宿州"],
["", "杭州", "寧波", "溫州", "紹興", "湖州", "嘉興", "金華", "衢州", "舟山", "台州", "麗水"],
["", "合肥", "蕪湖", "蚌埠", "馬鞍山", "宿州", "安慶", "淮南", "銅陵", "黃山", "宣城", "池州", "滁州", "淮北", "阜陽", "六安", "毫州"],
["", "福州", "廈門", "漳州", "泉州", "三明", "莆田", "南平", "龍巖", "寧德", "平潭"],
["", "南昌", "九江", "上饒", "撫州", "宜春", "吉安", "贛州", "景德鎮", "萍鄉", "新餘", "鷹潭"],
["", "成都", "綿陽", "自貢", "攀枝花", "瀘州", "德陽", "廣元", "遂寧", "內江", "樂山", "資陽", "宜賓", "南充", "達州", "雅安", "阿壩", "甘孜", "涼山", "廣安", "巴中", "眉山"],
["", "貴陽", "六盤水", "遵義", "銅仁", "黔西", "畢節", "安順", "黔東", "黔南"],
["", "昆明", "曲靖", "玉溪", "保山", "昭通", "麗江", "普洱", "臨滄", "德宏", "怒江", "迪慶", "大理", "楚雄", "紅河", "文山", "西雙版納"],
["", "西安", "寶雞", "咸陽", "渭南", "銅川", "治中", "安康", "商洛", "榆林", "延安", "漢中", "楊陵"],
["", "蘭州", "嘉峪關", "金昌", "白銀", "天水", "酒泉", "張掖", "武威", "定西", "隴南", "平涼", "慶陽", "臨夏", "甘南"],
["", "西寧", "海東", "海北", "黃南", "海南", "果洛", "玉樹", "海西"],
["", "南寧", "柳州", "桂林", "梧州", "北海", "防城港", "欽州", "貴港", "玉林", "百色", "賀州", "河池", "來賓", "崇左"],
["", "拉薩", "昌都", "日喀則", "山南", "那曲", "阿里", "林芝"], ["", "銀川", "石嘴山", "吳忠市", "固原市", "中衛"],
["", "烏魯木齊", "克拉瑪依", "吐魯番", "哈密", "昌吉", "博爾塔", "巴音郭楞", "阿克蘇", "克孜勒蘇柯爾克", "喀什", "和田", "伊犁", "塔城", "阿勒泰", "石河子", "阿拉爾", "圖木舒克", "五家渠", "北屯", "鐵門關", "雙河市"],
["", "海口", "三亞", "三沙"],
["", "中西區", "灣仔區", "東區", "南區", "油尖旺", "深水埗", "九龍城", "黃大仙", "觀塘", "葵青", "荃灣", "屯門", "元朗", "北區", "大埔", "沙田", "西貢", "離島"],
["", "花地瑪堂", "聖安多尼堂", "大堂", "望德堂", "風順堂", "嘉模堂", "聖方濟各堂"], ["", "臺北", "新北", "桃園", "臺中", "臺南", "高雄", "基隆", "新竹", "嘉義"]
];
</script>
步驟分析
// 1- 頁面加載之後需要把省份數組中的所有數據填充到 省份下拉菜單中
// 2- 給省份下拉菜單添加 切換事件
// 3- 獲取到用戶選擇的是哪個省
// 4- 找到該省所對應的所有城市
// 5- 把所有城市添加到對應的城市 下拉菜單中
JS 代碼實現
// 1- 頁面加載之後需要把省份數組中的所有數據填充到 省份下拉菜單中
// 獲取省份對象
var pro = document.getElementById("province");
var ct = document.getElementById("city");
function provinceinit(){
// 遍歷數組
for(let i = 0 ; i < province.length ; i++){
// 數組中每一個值 都對應一個 option
var option = document.createElement("option");
option.innerText = province[i];
// 不要求獲取 省份名稱, 只需要獲取該省份所在的下標, 和城市的下標一一對應
option.setAttribute("value",i);
// 把每一項 都添加到 省份下拉菜單中
pro.appendChild(option);
}
}
provinceinit();
// 2- 給省份下拉菜單添加 切換事件
pro.onchange = function(){
// 每一次事件切換的時候, 城市下拉菜單內容都需要重置
ct.innerHTML = "";
// 3- 獲取到用戶選擇的是哪個省
// 4- 找到該省所對應的所有城市
var cityArr = city[pro.value];
console.log(cityArr);
// 5- 把所有城市添加到對應的城市 下拉菜單中
for(let i in cityArr){
// 每循環一次, 需要創建一個option 對象
let option = document.createElement("option");
option.innerText = cityArr[i];
ct.appendChild(option);
}
}