查找Html元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>使用DOM訪問文檔對(duì)象的元素</title>
</head>
<body>
<h1>獲取元素節(jié)點(diǎn)</h1>
<input type="text" id="username" value="tom" name="uname"><br>
<input type="text" id="useremail" value="tom@163.com" name="uemail">
<div>today is very good</div>
</body>
</html>
<script>
//1.document.getElementById id屬性值獲取元素節(jié)點(diǎn)
var username = document.getElementById('username');
console.log(username);
var email=document.getElementById('useremail');
console.log(email);
//2.document.getElementsByTagName tag標(biāo)簽名稱獲得元素節(jié)點(diǎn)
var hh = document.getElementsByTagName('h1');
console.log(hh);
//通過getElementsByTagName收集的元素節(jié)點(diǎn)以“集合/數(shù)組”（即使只有一個(gè)節(jié)點(diǎn)）的形式返回
console.log(hh[0]);
var its = document.getElementsByTagName('input');
console.log(its);
console.log(its[1]);//訪問具體節(jié)點(diǎn)
console.log(its.item(0));//訪問具體節(jié)點(diǎn)
//3.document.getElementsByName name屬性值獲得元素節(jié)點(diǎn)
var it = document.getElementsByName('uname');
console.log(it);
//通過getElementsByName收集的元素節(jié)點(diǎn)以“集合/數(shù)組”（即使只有一個(gè)節(jié)點(diǎn)）的形式返回
console.log(it[0]);
console.log(it.item(0));
//文本節(jié)點(diǎn)獲取
var dv = document.getElementsByTagName('div')[0];
//firstChild獲得第一個(gè)子節(jié)點(diǎn)/lastChild獲得最后一個(gè)子節(jié)點(diǎn)
console.log(dv.firstChild);
//文本對(duì)象
//alert(dv.firstChild);
//獲得文本信息
console.log(dv.firstChild.wholeText);
//alert(dv.firstChild.wholeText);
//parentNode 獲得父節(jié)點(diǎn)
console.log(dv.parentNode);
// nextSibling:獲得下個(gè)兄弟節(jié)點(diǎn)
// previousSibling:獲得上個(gè)兄弟節(jié)點(diǎn)
//childNodes:父節(jié)點(diǎn)獲得內(nèi)部全部的子節(jié)點(diǎn)信息
</script>
屬性值操作
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>屬性值操作</title>
<script>
// 1.獲取屬性值
// 元素節(jié)點(diǎn).屬性名稱; //只能操作w3c規(guī)定的屬性
// 元素節(jié)點(diǎn).getAttribute(屬性名稱); //規(guī)定的 和 自定義的都可以獲取
// 2.設(shè)置屬性值
// 元素節(jié)點(diǎn).屬性名稱 = 值; //只能操作w3c規(guī)定的屬性
// 元素節(jié)點(diǎn).setAttribute(名稱，值); //規(guī)定的 和 自定義的都可以設(shè)置
</script>
</head>
<body>
<h2>屬性值操作</h2>
<a target="_blank" addr="beijing" class="apple">百度</a><br>
<input type="button" value="修改屬性" onclick="f1()"><br>
</body>
</html>
<script>
var baidu=document.getElementsByTagName('a')[0];
//1.獲得屬性的信息
console.log(baidu.href);
console.log(baidu.target);
console.log(baidu.addr);//這個(gè)是自定義的屬性
console.log(baidu.getAttribute('addr'));
console.log(baidu.getAttribute('href'));
//console.log(baidu.class);
console.log(baidu.className);//className是class的一個(gè)別名，不可以直接訪問class屬性
//2.設(shè)置屬性的信息
function f1(){
baidu.;
baidu.target="_self";
baidu.addr="tianjin";
//屬性修改，有就更新，沒有就創(chuàng)建
baidu.setAttribute('addr','shanghai');
baidu.setAttribute('height','170');//新創(chuàng)建
}
</script>
案例1
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>案例01</title>
<script>
function f1(){
var i =0;
i=Math.floor(Math.random()*4+1);
document.getElementById('imgs').src="img/"+i+".jpg";
timer=setTimeout("f1()",1000);
}
function f2(){
//清除定時(shí)器
clearTimeout(timer);
}
</script>
</head>
<body>
<img src="img/1.jpg" alt="" id="imgs" width="200px" height="200px">
<input type="button" value="開始" onclick="f1();">
<input type="button" value="停止" onclick="f2();">
</body>
</html>
案例02
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>案例02</title>
<script>
function fun(flag){
var sels = document.getElementsByName('ck');
for(var i=0;i<sels.length;i++){
sels[i].checked=flag;
}
}
</script>
</head>
<body>
<form action="">
請(qǐng)選擇你喜歡的戰(zhàn)隊(duì)：<br>
<input type="checkbox" name="ck" value="0">EDG
<input type="checkbox" name="ck" value="1">RNG
<input type="checkbox" name="ck" value="2">IG
<input type="checkbox" name="ck" value="3">FPX
<input type="button" value="全部選中" onclick="fun(true)">
<input type="button" value="全不選中" onclick="fun(false)">
</form>
</body>
</html>
增刪改元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>增刪改元素</title>
<script>
/*
節(jié)點(diǎn)創(chuàng)建
元素節(jié)點(diǎn)：document.createElement(tag標(biāo)簽名稱);
文本節(jié)點(diǎn)：document.createTextNode(文本內(nèi)容);
屬性設(shè)置：node.setAttribute(名稱，值);
節(jié)點(diǎn)追加：
父節(jié)點(diǎn).appendChild(子節(jié)點(diǎn));
父節(jié)點(diǎn).insertBefore(newnode,oldnode); //newnode放到oldnode的前邊
父節(jié)點(diǎn).replaceChild(newnode,oldnode); //newnode替換到oldnode節(jié)點(diǎn)
父節(jié)點(diǎn).removeChild(子節(jié)點(diǎn));
*/
</script>
</head>
<body>
<ul>
<li mean="熱情">red</li>
<li mean="憂郁">blue</li>
<li mean="生機(jī)">green</li>
</ul>
<ul>
<li mean="希望">orange</li>
</ul>
</body>
</html>
<script>
var color = ['red','blue','green'];
var color_mean=['熱情','憂郁','生機(jī)'];
//創(chuàng)建各種節(jié)點(diǎn)
var ull = document.createElement('ul');
for(var k in color){
var lii = document.createElement('li');
lii.setAttribute('mean',color_mean[k]);
var txt = document.createTextNode(color[k]);
//節(jié)點(diǎn)追加
lii.appendChild(txt);
ull.appendChild(lii);
}
document.body.appendChild(ull);
//給第二個(gè)ul追加頁(yè)面已有的節(jié)點(diǎn)：blue被追加進(jìn)來
//注意：被追加節(jié)點(diǎn)要發(fā)生物理位置移動(dòng)（節(jié)點(diǎn)個(gè)數(shù)是固定的）
var blue = document.getElementsByTagName('li')[1];
var second_ul = document.getElementsByTagName('ul')[1];
second_ul.appendChild(blue);
//orange追加給第一個(gè)ul，并設(shè)置到blue的前面
var orange=document.getElementsByTagName('li')[2];
console.log(orange);
var first_ul = document.getElementsByTagName('ul')[0];
console.log(first_ul);
//first_ul.appendChild(orange);//orange追加到最后
var red=document.getElementsByTagName('li')[0];
first_ul.insertBefore(orange,red); //orange放在red的前邊
first_ul.replaceChild(orange,red);//orange替換掉red
//刪除green節(jié)點(diǎn)
var green = document.getElementsByTagName('li')[1];
green.parentNode.removeChild(green);
</script>
window對(duì)象
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>window對(duì)象</title>
<script>
/*
瀏覽器里面，window對(duì)象指當(dāng)前的瀏覽器窗口。它也是當(dāng)前頁(yè)面的頂層對(duì)象，
即最高一層的對(duì)象，所有其他對(duì)象都是它的下屬。
*/
// alert("彈框1");
// window.alert("彈框2");
// window.confirm("確定要?jiǎng)h除嗎？");
// if(confirm("確定刪除嗎？")){
// alert("刪除");
// }
// var num =window.prompt("請(qǐng)輸入一個(gè)數(shù)字");
// document.write(num);
window.onload=function(){
var dv = document.getElementById('demo');
function f1(){
var time = new Date();
var year = time.getFullYear();
var month = time.getMonth()+1;
var date = time.getDate();
var hour = time.getHours();
var minute = time.getMinutes();
var second = time.getSeconds();
dv.innerHTML="現(xiàn)在是"+year+"-"+month+"-"+date+" "+hour+":"+minute+":"+second
}
window.setInterval(f1,1000);
}
function f2(){
//打開新窗口 open("url","name","窗口特征") 寬 高 菜單欄=1是顯示 工具欄，滾動(dòng)條，狀態(tài)欄的信息=1顯示
var newWin=window.open('demo06-1.html','',"width=500px,height=500px,menuBar=1,toolBar=1,scrollBars=1,status=1");
newWin.status="這個(gè)一個(gè)狀態(tài)";
}
function openWindow(){
//通過這種打開新窗口的方式，可以將子窗口的值傳給父窗體
var val = window.showModalDialog('demo06-1.html','','dialogWidth=300px,dialogHeight=300px');
//關(guān)閉子窗體的值會(huì)返回到val中
document.myform.add.value=val;
}
</script>
</head>
<body>
<div id="demo"></div>
<!-- 打開定制窗口 IE-->
<input type="button" value="打開定制新窗口" onclick="f2()">
<!-- 把子窗口的值傳回父窗口中 -->
<form name="myform">
請(qǐng)輸入你的地址：
<input type="text" name="add"> <a href="javascript:openWindow();">選擇送貨地址</a>
</form>
</body>
</html>
//demo06-1.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
function closeWindow(){
var addr = document.myform.addr.value;
console.log(addr);
//使用window.returnValue屬性把子窗體關(guān)閉后的值傳給父窗體 谷歌不支持
window.returnValue=addr;
window.close();
}
</script>
</head>
<body>
<form name="myform">
地址：<input type="text" name="addr">
<input type="button" value="確定" onclick="closeWindow()">
</form>
</body>
</html>
Document對(duì)象
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Document對(duì)象</title>
<script>
//Document對(duì)象的集合屬性是基于數(shù)組的，提供對(duì)象的數(shù)組 有forms[],images[],links[]
function pressMe(){
//Document對(duì)象的forms[]數(shù)組包含文檔中所有的form對(duì)象
//使用form對(duì)象的elements[]屬性代表表單中的元素
var val = document.forms[0].elements[0].value;
document.forms['f2'].elements[0].value=val;
}
</script>
</head>
<body>
<form name="f1">
<input type="text" name="message">
<input type="button" value="按下我的傳遞值" onclick="pressMe()">
</form>
<form name="f2">
<input type="text" name="show">
</form>
<h2>錨點(diǎn)</h2>
<ol>
<li><a href="#one">111111111111111</a></li>
<li><a href="#two">222222222222222</a></li>
<li><a href="#three">33333333333333</a></li>
</ol>
<a name="one">aaaaaaaaaaaaaaaa</a>
<a name="two">bbbbbbbb</a>
<a name="three">ccccccc</a>
<h2>超鏈接</h2>
<ol>
<li><a >百度</a></li>
<li><a >新浪</a></li>
</ol>
<script>
document.write("頁(yè)面定義了"+document.links.length+"個(gè)超鏈接<br>");
for(var i =0;i<document.links.length;i++){
document.write(document.links[i].href+"<br>");
}
//anchors(讀：aoke)
document.write("頁(yè)面定義了"+document.anchors.length+"個(gè)錨點(diǎn)<br>");
for(var j=0;j<document.anchors.length;j++){
document.write(document.anchors[j].name+"<br>");
}
</script>
</body>
</html>
Location對(duì)象
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Location對(duì)象</title>
<script>
function changeURL(){
window.location="http://www.baidu.com";
}
</script>
</head>
<body>
<input type="button" value="轉(zhuǎn)到百度" onclick="changeURL()">
</body>
</html>
History對(duì)象
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>History對(duì)象</title>
<script>
/*
window.history.back();
window.history.forward();
windiw.history.go(-1);//相當(dāng)于back()
window.history.go(1);//相當(dāng)于forwar()
window.history.go(0);//相當(dāng)于刷新
window.history.length;//查看歷史記錄棧中一共有多少個(gè)記錄
*/
</script>
</head>
<body>
<a href="javascript:history.go(-1)">返回</a><!-- 相當(dāng)于調(diào)用history對(duì)象的back()方法 -->
<a href="javascript:history.go(1)">前進(jìn)</a> <!-- 相當(dāng)于調(diào)用history對(duì)象的forword()方法 -->
</body>
</html>
