javascript基礎（DOM查詢）（二十六）
1.DOM查詢：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="style/css.css" />
<script type="text/javascript">
/*
* 定義一個函式，專門用來為指定id的元素繫結單擊響應函式
* 引數：
* idStr 要繫結的元素的id屬性值
* fun 要繫結的單擊響應函式，該函式在元素的單擊事件觸發時執行
*/
function myClick(idStr , fun){
//根據idStr來獲取元素
var btn = document.getElementById(idStr);
//為btn繫結單擊響應函式
btn.onclick = fun;
}
window.onload = function(){
//為id為btn01的按鈕繫結一個單擊響應函式
var btn01 = document.getElementById("btn01");
btn01.onclick = function(){
//查詢#bj節點
var bj = document.getElementById("bj");
//輸出bj
/*
* innerHTML
* - 可以獲取標籤內部的HTML程式碼
*/
alert(bj.innerHTML);
};
//為id為btn02的按鈕繫結單擊響應函式
var btn02 = document.getElementById("btn02");
btn02.onclick = function(){
//查詢所有li節點
var lis = document.getElementsByTagName("li");
alert(lis.length);
//遍歷lis
/*for(var i=0 ; i<lis.length ; i++){
alert(lis[i].innerHTML);
}*/
};
//為id為btn03的按鈕繫結一個單擊響應函式
var btn03 = document.getElementById("btn03");
btn03.onclick = function(){
//查詢name=gender的所有節點
var gender = document.getElementsByName("gender");
//遍歷gender
for(var i=0 ; i<gender.length ; i++){
//innerHTML不能用於自結束標籤
//alert(gender[i].innerHTML);
/*
* 讀取元素的屬性：
* 元素.屬性名
* 元素.id 元素.value 元素.src 元素.type
*
* 由於class是JS中的保留字，所以不能直接.class來讀取class屬性值
* 而需要使用className代替
*
*/
//alert(gender[i].className);
alert(gender[i].value);
}
};
//為id為btn04的按鈕繫結一個單擊響應函式
var btn04 = document.getElementById("btn04");
btn04.onclick = function(){
//獲取id為city的節點
var city = document.getElementById("city");
//查詢#city下所有li節點
var lis = city.getElementsByTagName("li");
alert(lis.length);
};
//為id為btn05的按鈕繫結一個單擊響應函式
myClick("btn05",function(){
//獲取id為city的節點
var city = document.getElementById("city");
//返回#city的所有子節點
var cns = city.childNodes;
/*
* 根據DOM標準，空白的內容也會被當成子節點
* 注意在IE8及以下的瀏覽器中沒有將空白當成子節點
* 所以IE8中childNodes不會返回空白的節點
*/
//遍歷cns
/*for(var i=0 ; i<cns.length ; i++){
alert(cns[i]);
}*/
//alert(cns.length);
/*
* children可以用來獲取當前元素的所有子元素（不包括文字）
*/
var cr = city.children;
alert(cr.length);
});
//返回#phone的第一個子節點
myClick("btn06",function(){
//獲取id為phone的元素
var phone = document.getElementById("phone");
//獲取它的第一個子節點(包括文字)
var fc = phone.firstChild;
//alert(fc.innerHTML);
//獲取第一個子元素（不包括文字）
/*
* firstElementChild不支援IE8及以下的瀏覽器
*/
var fe = phone.firstElementChild;
alert(fe);
});
//返回#bj的父節點
myClick("btn07",function(){
//獲取id為bj的元素
var bj = document.getElementById("bj");
//獲取bj的父節點
var pn = bj.parentNode;
alert(pn.innerHTML);
});
//返回#android的前一個兄弟節點
myClick("btn08",function(){
//獲取id為android的節點
var android = document.getElementById("android");
//獲取它的前一個兄弟節點
//會將空白的文字當前兄弟節點
var ps = android.previousSibling;
alert(ps);
});
//讀取#username的value屬性值
myClick("btn09",function(){
//獲取id為username的元素
var um = document.getElementById("username");
alert(um.value);
});
//設定#username的value屬性值
myClick("btn10",function(){
var um = document.getElementById("username");
um.value = "太陽天空照";
});
//返回#bj的文字值
myClick("btn11",function(){
//獲取bj
var bj = document.getElementById("bj");
//使用innerHTML
//alert(bj.innerHTML);
/*var bjText = bj.firstChild;
alert(bjText.nodeValue);*/
//元素.firstChild.nodeValue
//alert(bj.firstChild.nodeValue);
/*
* innerText可以用來獲取標籤內部的文字內容
* 它會自動去除HTML標籤
*/
//alert(bj.innerText);
//獲取id為city的節點
var city = document.getElementById("city");
//alert(city.innerHTML);
alert(city.innerText);
});
};
</script>
</head>
<body>
<div id="total">
<div class="inner">
<p>
你喜歡哪個城市?
</p>
<ul id="city">
<li id="bj">北京</li>
<li>上海</li>
<li>東京</li>
<li>首爾</li>
</ul>
<br>
<br>
<p>
你喜歡哪款單機遊戲?
</p>
<ul id="game">
<li id="rl">紅警</li>
<li>實況</li>
<li>極品飛車</li>
<li>魔獸</li>
</ul>
<br />
<br />
<p>
你手機的作業系統是?
</p>
<ul id="phone"><li>IOS</li><li id="android">Android</li><li>Windows Phone</li></ul>
</div>
<div class="inner">
gender:
<input class="hello" type="radio" name="gender" value="male"/>
Male
<input class="hello" type="radio" name="gender" value="female"/>
Female
<br>
<br>
name:
<input type="text" name="name" id="username" value="abcde"/>
</div>
</div>
<div id="btnList">
<div><button id="btn01">查詢#bj節點</button></div>
<div><button id="btn02">查詢所有li節點</button></div>
<div><button id="btn03">查詢name=gender的所有節點</button></div>
<div><button id="btn04">查詢#city下所有li節點</button></div>
<div><button id="btn05">返回#city的所有子節點</button></div>
<div><button id="btn06">返回#phone的第一個子節點</button></div>
<div><button id="btn07">返回#bj的父節點</button></div>
<div><button id="btn08">返回#android的前一個兄弟節點</button></div>
<div><button id="btn09">返回#username的value屬性值</button></div>
<div><button id="btn10">設定#username的value屬性值</button></div>
<div><button id="btn11">返回#bj的文字值</button></div>
</div>
</body>
</html>
@CHARSET "UTF-8";
body {
width: 800px;
margin-left: auto;
margin-right: auto;
}
button {
width: 300px;
margin-bottom: 10px;
}
#btnList {
float:left;
}
#total{
width: 450px;
float:left;
}
ul{
list-style-type: none;
margin: 0px;
padding: 0px;
}
.inner li{
border-style: solid;
border-width: 1px;
padding: 5px;
margin: 5px;
background-color: #99ff99;
float:left;
}
.inner{
width:400px;
border-style: solid;
border-width: 1px;
margin-bottom: 10px;
padding: 10px;
float: left;
}
練習：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#outer{
width: 500px;
margin: 0 auto;
padding: 10px;
background-color: greenyellow;
text-align: center;
}
</style>
<script type="text/javascript">
window.onload = function(){
/*
* 點選按鈕切換圖片
*/
//獲取img標籤
var img = document.getElementsByTagName("img")[0];
//獲取兩個button
var prev = document.getElementById("prev");
var next = document.getElementById("next");
//建立一個陣列，用來儲存圖片的路徑
var imgArr = ["img/1.jpg","img/2.jpg","img/3.jpg","img/4.jpg","img/5.jpg"];
//建立一個變數，來記錄當前圖片的索引
var index = 0;
//設定圖片的資訊
var info = document.getElementById("info");
//向info中設定資訊
info.innerHTML = "一共有 "+imgArr.length+" 張圖片，當前是第 "+(index+1)+" 張";
//為兩個按鈕來繫結單擊響應函式
prev.onclick = function(){
//使index自減
index--;
//判斷index的值，是否合法
if(index < 0){
index = imgArr.length - 1;
}
//修改圖片的路徑
img.src = imgArr[index];
//更新info中的資訊
info.innerHTML = "一共有 "+imgArr.length+" 張圖片，當前是第 "+(index+1)+" 張";
};
next.onclick = function(){
//使index自增
index++;
//判斷index值是否合法
if(index > imgArr.length - 1){
index = 0;
}
//點選next以後，切換圖片為2.jpg
//修改圖片的src屬性，修改元素的屬性：元素.屬性名 = 屬性值
//要想切換圖片就是修改img的src屬性，src屬性一變，瀏覽器就會去重新載入圖片
img.src = imgArr[index];
//更新info中的資訊
info.innerHTML = "一共有 "+imgArr.length+" 張圖片，當前是第 "+(index+1)+" 張";
};
};
</script>
</head>
<body>
<div id="outer">
<p id="info"></p>
<img src="img/1.jpg" alt="冰棍"/>
<button id="prev">上一張</button>
<button id="next">下一張</button>
</div>
</body>
</html>
相關文章
- javascript基礎（Dom查詢練習）（二十七）JavaScript
- JavaScript之DOM查詢JavaScript
- 回到基礎：理解 JavaScript DOMJavaScript
- JavaScript基礎之DOM操作JavaScript
- javascript基礎（Dom查詢的其他方法：body，documentElement，all，getElementsByClassName()，querySelectorAll()）（二十八）JavaScript
- JavaScript 基礎(四) – HTML DOM EventJavaScriptHTML
- JavaScript學習7：DOM基礎JavaScript
- DOM查詢
- JavaScript基礎 —— DOM：遍歷 與 範圍JavaScript
- javascript快速入門14--DOM基礎JavaScript
- javascript基礎（dom增刪改）（二十九）JavaScript
- 資料庫基礎查詢--單表查詢資料庫
- MySQL資料庫基礎——多表查詢：子查詢MySql資料庫
- JavaScript的基礎語法及DOM元素和事件JavaScript事件
- 【零基礎上手JavaWeb】快速上手 JavaScript DOM操作WebJavaScript
- SQL的基礎查詢案例SQL
- MySQL基礎查詢語句MySql
- JavaScript中的瀏覽器檢測和DOM基礎JavaScript瀏覽器
- ElasticSearch基礎及查詢語法Elasticsearch
- SQL語言基礎(子查詢)SQL
- MySQL（三）DQL之基礎查詢MySql
- MSSQL基礎教程：多表格查詢SQL
- javascript基礎（DOM物件概述,事件，文件載入）（二十五）JavaScript物件事件
- Linux基礎命令---查詢程式idLinux
- MySQL學習（三） SQL基礎查詢MySql
- SQL語言基礎(高階查詢)SQL
- es 筆記二之基礎查詢筆記
- 基礎二分查詢總結
- MyBatis基礎：MyBatis關聯查詢（4）MyBatis
- Linux基礎：檔案查詢findLinux
- 回到基礎：什麼是DOM及DOM操作？
- 學習前端你必須知道的JavaScript 基礎和HTML DOM前端JavaScriptHTML
- Linux基礎命令---host域名查詢工具Linux
- SQL基礎的查詢語句烈鉍SQL
- Docker基礎：查詢映象和執行容器Docker
- 閃回查詢（基礎例項講解）
- mybatis入門基礎(八)-----查詢快取MyBatis快取
- MySQL基礎篇快速記憶和查詢MySql