window.onload
什么條件下觸動這個事件呢？頁面加載（文本和圖片）完畢的時候。
//用途
//js的加載時和html同步加載的。（如果使用元素在定義元素之間，容易報錯。）
//整個頁面上所有元素加載完畢在執(zhí)行js內(nèi)容
//window.onload可以預防使用標簽在定義標簽之前。
關閉京東廣告欄
//需求：點擊案例，隱藏盒子。
//思路：點擊a鏈接，讓top-banner這個盒子隱藏起來（加隱藏類名）。
//步驟：
//1.獲取事件源和相關元素
//2.綁定事件
//3.書寫事件驅(qū)動程序
//1.獲取事件源和相關元素
var closeBanner = document.getElementById("closeBanner");
var topBanner = document.getElementById("topBanner");
//2.綁定事件
closeBanner.onclick = function () {
//3.書寫事件驅(qū)動程序
// console.log(1);
//類控制
// topBanner.className += " hide"; //保留原類名，添加新類名
topBanner.className = "hide";//替換舊類名
// topBanner.style.display = "none";
}
京東狗
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script>
//window.onload頁面加載完畢以后再執(zhí)行此代碼
window.onload = function () {
//需求：鼠標放到img上，修改路徑（src的值）。
//步驟：
//1.獲取事件源
//2.綁定事件
//3.書寫事件驅(qū)動程序
//1.獲取事件源
var img = document.getElementById("box");
//2.綁定事件(懸停事件：鼠標進入到事件源中立即出發(fā)事件)
img.onmouseover = function () {
//3.書寫事件驅(qū)動程序(修改src)
img.src = "image/jd2.png";
// this.src = "image/jd2.png";
}
//1.獲取事件源
var img = document.getElementById("box");
//2.綁定事件(懸停事件：鼠標進入到事件源中立即出發(fā)事件)
img.onmouseout = function () {
//3.書寫事件驅(qū)動程序(修改src)
this.src = "image/jd1.png";
}
//獲取事件源（元素可以不獲取直接使用id的值）
// var img = document.getElementById("box");
// //調(diào)用函數(shù)
// img.onmouseover = fn1;
// img.onmouseout = fn2;
// //定義函數(shù)
// function fn1() {
// img.src = "image/jd2.png";
// }
// function fn2() {
// img.src = "image/jd1.png";
// }
}
</script>
</head>
<body>
</body>
</html>
dom概述
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div class="box1">
<div class="box2" id="box2"></div>
<div class="box3"></div>
</div>
<script>
//節(jié)點的訪問關系是以屬性形式存在
//1.box1是box的父節(jié)點
// var box2 = document.getElementsByClassName("box2")[0];
// var box2 = document.getElementById("box2")
// console.log(box2.parentNode);
//
// //2.nextElementSibling下一個兄弟節(jié)點
// console.log(box2.nextElementSibling);
//
// //firstElementChild第一個子節(jié)點
// console.log(box2.parentNode.firstElementChild);
//
// //所有子節(jié)點
// console.log(box2.parentNode.childNodes);
// console.log(box2.parentNode.children);
//節(jié)點的操作
//1.創(chuàng)建
var aaa = document.createElement("li");
var bbb = document.createElement("afadsfadsf");
console.log(aaa);
console.log(bbb);
//添加
var box1 = document.getElementsByClassName("box1")[0];
box1.appendChild(aaa);
box1.insertBefore(bbb,aaa);
//刪除
box1.removeChild(bbb);
aaa.parentNode.removeChild(aaa);//自殺，自己刪除自己
//克隆
var ccc = box1.cloneNode();
var ddd = box1.cloneNode(true);
console.log(ccc);
console.log(ddd);
</script>
</body>
</html>
節(jié)點的屬性
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script>
window.onload = function () {
var eleNode = document.getElementsByTagName("img")[0];
//屬性、賦值獲取兩種方式
//1.元素節(jié)點.屬性或者元素節(jié)點[屬性]
eleNode.src = "image/jd2.png";
eleNode.aaa = "bbb";
console.log(eleNode.aaa);
console.log(eleNode.src);
console.log(eleNode.tagName);
console.log(eleNode["title"]);
console.log(eleNode["className"]);
console.log(eleNode["alt"]);
//2.元素節(jié)點.方法();
console.log(eleNode.getAttribute("id"));
eleNode.setAttribute("id","你好");
eleNode.setAttribute("ccc","ddd");
eleNode.removeAttribute("id");
}
</script>
</head>
<body>
</body>
</html>
```
####圖片切換
```html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--<a href="javacript:;">切換</a>-->
<!--<a href="#">切換</a>-->
<a style="margin:10px;display: block" onclick="fn();return false;">切換</a>
<script>
//需求：點擊a鏈接，img圖片切換（行內(nèi)式）
//步驟：
//1.獲取事件源和圖片
//2.綁定事件
//3.書寫事件驅(qū)動程序
//1.獲取事件源和圖片
// var a = document.getElementsByTagName("a")[0];
// var img = document.getElementById("img");
// //2.綁定事件
// a.onclick = function () {
// //3.書寫事件驅(qū)動程序
// img.src = "image/2.jpg";
// //return false的目的是禁止a連接跳轉(zhuǎn)；
// return false;
// }
var img = document.getElementById("img");
function fn(){
img.src = "image/2.jpg";
}
</script>
</body>
</html>
```
####顯示和隱藏盒子
```html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
button {
margin: 10px;
}
div {
width: 200px;
height: 200px;
background-color: pink;
}
.show {
display: block;
}
.hide {
display: none;
}
</style>
</head>
<body>
<button id="btn">隱藏</button>
<div>
臨千仞之溪，非才長也，位高也！
</div>
<script>
//需求：點擊button,隱藏盒子。改變文字，在點擊按鈕，顯示出來。
//步驟：
//1.獲取事件源和相關元素
//2.綁定事件
//3.書寫事件驅(qū)動程序
//1.獲取事件源和相關元素
var btn = document.getElementById("btn");
var div = document.getElementsByTagName("div")[0];
//2.綁定事件
btn.onclick = function () {
//3.書寫事件驅(qū)動程序
//判斷btn的innerHTML屬性值，如果為隱藏就隱藏盒子，并修改按鈕內(nèi)容為顯示。
//反之，則顯示，并修改按鈕內(nèi)容為隱藏
if(this.innerHTML === "隱藏"){
div.className = "hide";
//修改文字（innerHTML）
btn.innerHTML = "顯示";
}else{
div.className = "show";
//修改文字（innerHTML）
btn.innerHTML = "隱藏";
}
}
</script>
</body>
</html>
```
####美女相冊
````html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body {
font-family: "Helvetica", "Arial", serif;
color: #333;
background-color: #ccc;
margin: 1em 10%;
}
h1 {
color: #333;
background-color: transparent;
}
a {
color: #c60;
background-color: transparent;
font-weight: bold;
text-decoration: none;
}
ul {
padding: 0;
}
li {
float: left;
padding: 1em;
list-style: none;
}
#imagegallery {
list-style: none;
}
#imagegallery li {
margin: 0px 20px 20px 0px;
padding: 0px;
display: inline;
}
#imagegallery li a img {
border: 0;
}
</style>
</head>
<body>
<h2>
美女畫廊
</h2>
<a href="#">注冊</a>
<ul id="imagegallery">
<li>
<a href="image/1.jpg" title="美女A">
</a>
</li>
<li>
<a href="image/2.jpg" title="美女B">
</a>
</li>
<li>
<a href="image/3.jpg" title="美女C">
</a>
</li>
<li>
<a href="image/4.jpg" title="美女D">
</a>
</li>
</ul>
<div style="clear:both"></div>
<p id="des">選擇一個圖片</p>
<script>
//需求：點擊小圖片，改變下面的大圖片的src屬性值。賦值為a鏈接的href屬性值。
//讓p標簽的innnerHTML屬性值，變成a標簽的title屬性值。
//步驟：
//1.獲取事件源和相關元素
//2.綁定事件
//3.書寫事件驅(qū)動程序
//1.獲取事件源和相關元素
//利用元素獲取其下面的標簽。
var ul = document.getElementById("imagegallery");
var aArr = ul.getElementsByTagName("a");
// console.log(aArr[0]);
var img = document.getElementById("image");
var des = document.getElementById("des");
//2.綁定事件
//以前是一個一個綁定，但是現(xiàn)在是一個數(shù)組。for循環(huán)綁定
for(var i=0;i<aArr.length;i++){
aArr[i].onclick = function () {
//3.書寫事件驅(qū)動程序
//修改屬性
//this指的是函數(shù)調(diào)用者，和i并無關系，所以不會出錯。
img.src = this.href;
// img.src = aArr[i].href;
des.innerHTML = this.title;
return false;
}
}
</script>
</body>
</html>
```
####value和innerHTML 和innerText
```html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--<input type="button" value="我是input中的button"/>-->
<!--<button>我是button</button>-->
<input id="inp1" type="text" value="我是inpput的value屬性值"/>
<div id="box1">
我是box1的內(nèi)容
<div id="box2">我是box2的內(nèi)容</div>
</div>
<div id="box3">
我是box1的內(nèi)容
<div id="box4">我是box2的內(nèi)容</div>
</div>
<script>
//value：標簽的value屬性。
console.log(document.getElementById("inp1").value);
//innerHTML：獲取雙閉合標簽里面的內(nèi)容。（識別標簽）
console.log(document.getElementById("box1").innerHTML);
document.getElementById("box1").innerHTML = "<h1>我是innerHTML</h1>";
//innerText：獲取雙閉合標簽里面的內(nèi)容。（不識別標簽）（老版本的火狐用textContent）
console.log(document.getElementById("box3").innerText);
document.getElementById("box3").innerText = "<h1>我是innerText</h1>";
</script>
</body>
</html>
```
####顯示和隱藏文本框
```html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.nodeSmall {
width: 50px;
height: 50px;
background: url(images/bgs.png) no-repeat -159px -51px;
position: fixed;
right: 10px;
top: 40%;
}
.erweima {
position: absolute;
top: 0;
left: -150px;
}
.nodeSmall a {
display: block;
width: 50px;
height: 50px;
}
.hide {
display: none;
}
.show {
display: block;
}
</style>
<script>
window.onload = function () {
//需求：鼠標放到a鏈接上，顯示二維碼（添加show類名，去掉hide類名）
// 鼠標移開a鏈接，隱藏二維碼（添加hide類名，去掉show類名）
//步驟：
//1.獲取事件源和相關元素
//2.綁定事件
//3.書寫事件驅(qū)動程序
//1.獲取事件源和相關元素
var a = document.getElementsByTagName("a")[0];
var div = document.getElementsByClassName("erweima")[0];
//2.綁定事件
a.onmouseover = fn1;
a.onmouseout = fn2;
//定義方法
function fn1() {
//3.書寫事件驅(qū)動程序
div.className = "erweima show";
// div.className = div.className.replace("hide","show");
}
function fn2() {
div.className = "erweima hide";
//了解,字符串操作，把字符串中的hide替換成show。
// div.className = div.className.replace("show","hide");
}
}
</script>
</head>
<body>
<div class="nodeSmall" id="node_small">
<a href="#"></a>
<div class="erweima hide" id="er">
</div>
</div>
</body>
</html>
```
####禁用文本框
```html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
賬號: <input type="text" value="傳智你好..."/><button>禁用</button><button>解禁</button><br><br>
密碼: <input type="password" value="aaabbbccc"/>
<script>
//需求：禁用文本框
//步驟：
//1.獲取事件源和相關元素
//2.綁定事件
//3.書寫事件驅(qū)動程序
//1.獲取事件源和相關元素
var inp = document.getElementsByTagName("input")[0];
var btn1 = document.getElementsByTagName("button")[0];
var btn2 = document.getElementsByTagName("button")[1];
//2.綁定事件
btn1.onclick = function () {
//3.書寫事件驅(qū)動程序
inp.disabled = "no";
}
btn2.onclick = function () {
//3.書寫事件驅(qū)動程序
inp.disabled = false;
// inp.removeAttribute("disabled");
}
</script>
</body>
</html>
```
####文本框獲取焦點
```html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
input {
width: 300px;
height: 36px;
padding-left: 5px;
color: #ccc;
}
label {
position: absolute;
top: 82px;
left: 56px;
font-size: 12px;
color: #ccc;
cursor: text;
}
.hide {
display: none;
}
.show {
display: block;
}
</style>
</head>
<body>
京東:<input id="inp1" type="text" value="我是京東"/><br><br>
淘寶:<label for="inp2">我是淘寶</label><input id="inp2" type="text"/><br><br>
placeholder:<input type="text" placeholder="我是placeholder"/>
<script>
//需求：京東的獲取焦點。
//思路：京東的input按鈕獲取了插入條光標立刻刪除內(nèi)容。失去插入條光標顯示文字。
//步驟：
//1.獲取事件源和相關元素
//2.綁定事件
//3.書寫事件驅(qū)動程序
//1.獲取事件源和相關元素
var inp1 = document.getElementById("inp1");
//2.綁定事件(獲取焦點事件)
inp1.onfocus = function () {
//判斷，如果input里面的內(nèi)容是“我是京東”，那么把值賦值為“”；
if(this.value === "我是京東"){
// inp1.style.color = "#000";
inp1.value = "";
}
}
//(失去焦點事件)焦點：插入條光標
inp1.onblur = function () {
//失去焦點后判斷，如果input內(nèi)容為空，那么把內(nèi)容賦值為我是京東。
if(this.value === ""){
//3.書寫事件驅(qū)動程序
// inp1.style.color = "#ccc";
inp1.value = "我是京東";
}
}
//需求：淘寶的獲取焦點。
//思路：在input中輸入文字，label標簽隱藏，里面的文字變成空字符串，label顯示。
//步驟：
//1.獲取事件源和相關元素
//2.綁定事件
//3.書寫事件驅(qū)動程序
//1.獲取事件源和相關元素
var inp2 = document.getElementById("inp2");
var lab = document.getElementsByTagName("label")[0];
//2.綁定事件(輸入事件，文字的輸入和刪除都會觸動這個事件)
//獲取插入條光標
// inp2.focus();
inp2.oninput = function () {
//3.書寫事件驅(qū)動程序
//判斷input中的值是否為空，如果為空，那么label顯示，否則隱藏。
if(this.value === ""){
lab.className = "show";
}else{
lab.className = "hide";
}
}
</script>
</body>
</html>
```
####用戶注冊高亮顯示
```html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.wrong {
border: 2px solid red;
}
.right {
border: 2px solid #91B81D;
}
</style>
</head>
<body>
賬號：<input type="text" onblur="fn(this)"/><br><br>
密碼：<input type="password" onblur="fn(this)"/>
<script>
//需求：失去焦點的時候判斷input按鈕中的值，如果賬號或密碼在6-12個字符之間通過，否則報錯。
//步驟：
//1.獲取事件源
//2.綁定事件
//3.書寫事件驅(qū)動程序
//3.書寫事件驅(qū)動程序
function fn(aaa){
//html中的input標簽行內(nèi)調(diào)用function的時候,是先通過window調(diào)用的function，所以打印this等于打印window
// console.log(this)
//只有傳遞的this才指的是標簽本身。
// console.log(aaa)
// console.log(this.value)
if(aaa.value.length < 6 || aaa.value.length>12){
aaa.className = "wrong";
}else{
aaa.className = "right";
}
}
</script>
</body>
</html>
```
####設置水果
```html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<button>識別鯉魚</button><br><br>
<button>去掉</button><br><br>
<select id="sel" multiple>
<option value="0">香蕉</option>
<option value="1">蘋果</option>
<option value="2" selected="">鯉魚</option>
<option value="3">鴨梨</option>
</select>
<script>
//需求：點擊識別水產(chǎn)，立刻把option對應的鯉魚選擇的屬性設置為selected;
//步驟：
//1.獲取事件源和相關元素
//2.綁定事件
//3.書寫事件驅(qū)動程序
//1.獲取事件源和相關元素
var btn1 = document.getElementsByTagName("button")[0];
var btn2 = document.getElementsByTagName("button")[1];
var sel = document.getElementById("sel");
var optArr = sel.getElementsByTagName("option");
//2.綁定事件
// btn1.onclick = function () {
// //3.書寫事件驅(qū)動程序
// optArr[2].selected = true;
// }
//
// btn2.onclick = function () {
// //3.書寫事件驅(qū)動程序
// optArr[2].selected = false;
// optArr[3].selected = true;
// }
</script>
</body>
</html>
```
####for循環(huán)為文本框賦值和取值
```html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="text"/><br><br>
<input type="text"/><br><br>
<input type="text"/><br><br>
<input type="text"/><br><br>
<input type="text"/><br><br>
<input type="text"/><br><br>
<button>賦值</button><br><br>
<button>取值</button><br><br>
<script>
//for循環(huán)賦值
//老三步
var inpArr = document.getElementsByTagName("input");
var btnArr = document.getElementsByTagName("button");
//賦值
btnArr[0].onclick = function () {
//循環(huán)為每一個input賦值
for(var i=0;i<inpArr.length;i++){
inpArr[i].value = i;
}
}
//獲取值
btnArr[1].onclick = function () {
//循環(huán)獲取nput的值賦值為一個數(shù)組
var newArr = [];
for(var i=0;i<inpArr.length;i++){
newArr.push(inpArr[i].value);
}
console.log(newArr.join(" "));
}
</script>
</body>
</html>
```
####全選反選
```html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
* {
padding: 0;
margin: 0;
}
.wrap {
width: 300px;
margin: 100px auto 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
border: 1px solid #c0c0c0;
width: 300px;
}
th,
td {
border: 1px solid #d0d0d0;
color: #404060;
padding: 10px;
}
th {
background-color: #09c;
font: bold 16px "微軟雅黑";
color: #fff;
}
td {
font: 14px "微軟雅黑";
}
tbody tr {
background-color: #f0f0f0;
}
tbody tr:hover {
cursor: pointer;
background-color: #fafafa;
}
</style>
<script>
window.onload = function () {
//需求1：點擊上面的的input，下面全選或者反選。
//思路：獲取了上面的input按鈕，只需要判斷，checked屬性是true還是false，如果是true，下面的全部變成true；false同理。
//老三步
var topInp = document.getElementById("theadInp");
var tbody = document.getElementById("tbody");
var botInpArr = tbody.getElementsByTagName("input");
//綁定事件
topInp.onclick = function () {
//牛勁版
// for(var i=0;i<botInpArr.length;i++){
// if(topInp.checked === true){
// botInpArr[i].checked = true;
// }else{
// botInpArr[i].checked = false;
// }
// }
//費勁版
// if(topInp.checked){
// for(var i=0;i<botInpArr.length;i++){
// botInpArr[i].checked = true;
// }
// }else{
// for(var i=0;i<botInpArr.length;i++){
// botInpArr[i].checked = false;
// }
// }
//優(yōu)化版（被點擊的input按鈕的checked屬性值，應該直接作為下面的所有的input按鈕的checked屬性值）
for(var i=0;i<botInpArr.length;i++){
botInpArr[i].checked = this.checked;
}
}
//需求2：點擊下面的的input，如果下面的全部選定了，上面的全選，否則相反。
//思路：為下面的每一個input綁定事件，每點擊一次都判斷所有的按鈕
// checked屬性值是否全部都是true，如果有一個是false，
// 那么上面的input的checked屬性也是false;都是true，topInp的checked就是true；
//老三步
for(var i=0;i<botInpArr.length;i++){
botInpArr[i].onclick = function () {
//開閉原則
var bool = true;
//檢測每一個input的checked屬性值。
for(var j=0;j<botInpArr.length;j++){
if(botInpArr[j].checked === false){
bool = false;
}
}
topInp.checked = bool;
}
}
}
</script>
</head>
<body>
<div class="wrap">
<table>
<thead>
<tr>
<th>
<input type="checkbox" id="theadInp" />
</th>
<th>菜名</th>
<th>飯店</th>
</tr>
</thead>
<tbody id="tbody">
<tr>
<td>
<input type="checkbox" />
</td>
<td>地三鮮</td>
<td>田老師</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>西紅柿雞蛋</td>
<td>田老師</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>醋溜土豆絲</td>
<td>田老師</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>蘿卜干炒黃豆兒</td>
<td>田老師</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
```
####屬性的方法操作
```html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="box" title="主體" class="asdfasdfadsfd">我愛你中國</div>
<script>
//兩種方式不能交換使用，賦值和獲取值必須使用用一種方法。
var div = document.getElementById("box");
//元素節(jié)點.屬性（元素節(jié)點[屬性]）:綁定的屬性值不會出現(xiàn)在標簽上。
div.aaaa = "1111";
console.log(div.aaaa);
//get/set/removeAttribut: 綁定的屬性值會出現(xiàn)在標簽上。
div.setAttribute("bbbb","2222");
console.log(div.getAttribute("aaaa"));
console.log(div.bbbb);
</script>
</body>
</html>
```
####tab欄切換
```html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
* {
padding: 0;
margin: 0;
}
.box {
width: 500px;
height: 400px;
border: 1px solid #ccc;
margin: 100px auto;
overflow: hidden;
}
ul {
width: 600px;
height: 40px;
margin-left: -1px;
list-style: none;
}
li {
float: left;
width: 101px;
height: 40px;
text-align: center;
font: 600 18px/40px "simsun";
background-color: pink;
cursor: pointer;
}
span {
display: none;
width: 500px;
height: 360px;
background-color: yellow;
text-align: center;
font: 700 150px/360px "simsun";
}
.show {
display: block;
}
.current {
background-color: yellow;
}
</style>
<script>
window.onload = function () {
//需求：鼠標放到上面的li上，li本身變色(添加類)，對應的span也顯示出來(添加類);
//思路：1.點亮盒子。 2.利用索引值顯示盒子。
//步驟：
//1.獲取事件源和相關元素
//2.綁定事件
//3.書寫事件驅(qū)動程序（排他思想）
//1.獲取事件源和相關元素
var boxArr = document.getElementsByClassName("box");
//函數(shù)調(diào)用
for(var i=0;i<boxArr.length;i++){
fn(boxArr[i]);
}
//函數(shù)封裝
function fn(ele){
var liArr = ele.getElementsByTagName("li");
var spanArr = ele.getElementsByTagName("span");
//2.綁定事件（循環(huán)綁定）
for(var i=0;i<liArr.length;i++){
//綁定索引值(自定義屬性)
liArr[i].setAttribute("index",i);
liArr[i].onmouseover = function () {
//3.書寫事件驅(qū)動程序（排他思想）
//1.點亮盒子。 2.利用索引值顯示盒子。(排他思想)
for(var j=0;j<liArr.length;j++){
liArr[j].removeAttribute("class");
spanArr[j].removeAttribute("class");
}
this.setAttribute("class","current");
spanArr[this.getAttribute("index")].setAttribute("class","show");
}
}
}
}
</script>
</head>
<body>
<div class="box">
<ul>
<li class="current">鞋子</li>
<li>襪子</li>
<li>帽子</li>
<li>褲子</li>
<li>裙子</li>
</ul>
<span class="show">鞋子</span>
<span>襪子</span>
<span>帽子</span>
<span>褲子</span>
<span>裙子</span>
</div>
<div class="box">
<ul>
<li class="current">鞋子</li>
<li>襪子</li>
<li>帽子</li>
<li>褲子</li>
<li>裙子</li>
</ul>
<span class="show">鞋子</span>
<span>襪子</span>
<span>帽子</span>
<span>褲子</span>
<span>裙子</span>
</div>
<div class="box">
<ul>
<li class="current">鞋子</li>
<li>襪子</li>
<li>帽子</li>
<li>褲子</li>
<li>裙子</li>
</ul>
<span class="show">鞋子</span>
<span>襪子</span>
<span>帽子</span>
<span>褲子</span>
<span>裙子</span>
</div>
</body>
</html>
```
####點亮盒子
```html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
button {
margin: 10px;
width: 100px;
height: 40px;
cursor: pointer;
}
.current {
background-color: yellow;
}
</style>
</head>
<body>
<button>按鈕1</button>
<button>按鈕2</button>
<button>按鈕3</button>
<button>按鈕4</button>
<button>按鈕5</button>
<script>
//需求：鼠標放到哪個button上，改button變成黃色背景（添加類）
//步驟：
//1.獲取事件源
//2.綁定事件
//3.書寫事件驅(qū)動程序
//1.獲取事件源
var btnArr = document.getElementsByTagName("button");
//2.綁定事件
for(var i=0;i<btnArr.length;i++){
btnArr[i].onmouseover = function () {
//排他思想（干掉所有人，剩下我一個）
//排他思想是和for循環(huán)連用
for(var j=0;j<btnArr.length;j++){
btnArr[j].className = "";
}
this.className = "current";
}
}
//3.書寫事件驅(qū)動程序
</script>
</body>
</html>
```
####彈出盒子的索引值
```html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
button {
margin: 10px;
width: 100px;
height: 40px;
cursor: pointer;
}
.current {
background-color: yellow;
}
</style>
</head>
<body>
<button>按鈕1</button>
<button>按鈕2</button>
<button>按鈕3</button>
<button>按鈕4</button>
<button>按鈕5</button>
<script>
//需求：鼠標放到哪個button上，改button變成黃色背景（添加類）
//步驟：
//1.獲取事件源
//2.綁定事件
//3.書寫事件驅(qū)動程序
//1.獲取事件源
var btnArr = document.getElementsByTagName("button");
//2.綁定事件
for(var i=0;i<btnArr.length;i++){
//每次循環(huán)綁定一個屬性，屬性值為該盒子的索引值
// btnArr[i].setAttribute("index",i);
btnArr[i].index = i;
btnArr[i].onmouseover = function () {
//排他思想（干掉所有人，剩下我一個）
//排他思想是和for循環(huán)連用
for(var j=0;j<btnArr.length;j++){
btnArr[j].className = "";
}
this.className = "current";
// alert(this.getAttribute("index"));
alert(this.index);
}
}
//3.書寫事件驅(qū)動程序
</script>
</body>
</html>
```
####tab欄切換(精簡版)
```html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
* {
padding: 0;
margin: 0;
}
.box {
width: 500px;
height: 400px;
border: 1px solid #ccc;
margin: 100px auto;
overflow: hidden;
}
ul {
width: 600px;
height: 40px;
margin-left: -1px;
list-style: none;
}
li {
float: left;
width: 101px;
height: 40px;
text-align: center;
font: 600 18px/40px "simsun";
background-color: pink;
cursor: pointer;
}
span {
display: none;
width: 500px;
height: 360px;
background-color: yellow;
text-align: center;
font: 700 150px/360px "simsun";
}
.show {
display: block;
}
.current {
background-color: yellow;
}
</style>
<script>
window.onload = function () {
var boxArr = document.getElementsByClassName("box");
for(var i=0;i<boxArr.length;i++){
fn(boxArr[i]);
}
function fn(ele){
var liArr = ele.getElementsByTagName("li");
var spanArr = ele.getElementsByTagName("span");
for(var i=0;i<liArr.length;i++){
liArr[i].index = i;
liArr[i].onmouseover = function () {
for(var j=0;j<liArr.length;j++){
liArr[j].className = "";
spanArr[j].className = "";
}
this.className = "current";
spanArr[this.index].className = "show";
}
}
}
}
</script>
</head>
<body>
<div class="box">
<ul>
<li class="current">鞋子</li>
<li>襪子</li>
<li>帽子</li>
<li>褲子</li>
<li>裙子</li>
</ul>
<span class="show">鞋子</span>
<span>襪子</span>
<span>帽子</span>
<span>褲子</span>
<span>裙子</span>
</div>
<div class="box">
<ul>
<li class="current">鞋子</li>
<li>襪子</li>
<li>帽子</li>
<li>褲子</li>
<li>裙子</li>
</ul>
<span class="show">鞋子</span>
<span>襪子</span>
<span>帽子</span>
<span>褲子</span>
<span>裙子</span>
</div>
<div class="box">
<ul>
<li class="current">鞋子</li>
<li>襪子</li>
<li>帽子</li>
<li>褲子</li>
<li>裙子</li>
</ul>
<span class="show">鞋子</span>
<span>襪子</span>
<span>帽子</span>
<span>褲子</span>
<span>裙子</span>
</div>
</body>
</html>
```
####訪問關系
```html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
li {
list-style: none;
width: 100px;
height: 100px;
background-color: pink;
margin: 5px;
}
</style>
</head>
<body>
<ul>
<li class="box1"></li>
<li class="box2"></li>
<li id="box3"></li>
<li class="box4"></li>
<li class="box5"></li>
</ul>
<script>
//parentNode父盒子
var box3 = document.getElementById("box3");
box3.parentNode.style.backgroundColor = "blue";
//兄弟節(jié)點（前一個和后一個：previousSibling和nextSibling）
//previousElementSibling和nextElementSibling在IE678中不支持。IE678不能獲取文本節(jié)點。
// box3.previousElementSibling.style.backgroundColor = "red";
// box3.nextElementSibling.style.backgroundColor = "yellow";
// box3.previousSibling.style.backgroundColor = "red";
// box3.nextSibling.style.backgroundColor = "yellow";
var pre = box3.previousElementSibling || box3.previousSibling;
var net = box3.nextElementSibling || box3.nextSibling;
pre.style.backgroundColor = "red";
net.style.backgroundColor = "yellow";
//單個子元素（firstChild和lastChild）
// box3.parentNode.firstElementChild.style.backgroundColor = "orange";
// box3.parentNode.lastElementChild.style.backgroundColor = "green";
var first = box3.parentNode.firstElementChild || box3.parentNode.firstChild;
var last = box3.parentNode.lastElementChild || box3.parentNode.lastChild;
first.style.backgroundColor = "orange";
last.style.backgroundColor = "green";
//所有子元素
var arr = box3.parentNode.children;
for(var i=0;i<arr.length;i++){
arr[i].style.backgroundColor = "black";
}
console.log(box3.parentNode.childNodes);
var arr2 = box3.parentNode.childNodes;
for(var i=0;i<arr2.length;i++){
if(arr2[i].nodeType === 1){
console.log(arr2[i]);
}
}
//隨意獲取指定兄弟節(jié)點
var index = 0;
var node = box3.parentNode.children[index];
//獲取所有的兄弟節(jié)點
function siblings(elm) {
var a = [];
var p = elm.parentNode.children;
for(var i =0;i<p.length;i++) {
if(p[i] !== elm) {
a.push(p[i]);
}
}
return a;
}
</script>
</body>
</html>
```
####nodeType和nodeName和nodeValue
```html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="box" value="111">你好</div>
<script>
var ele = document.getElementById("box");//元素節(jié)點
var att = ele.getAttributeNode("id");//屬性節(jié)點
var txt = ele.firstChild;
// console.log(ele);
// console.log(att);
// console.log(txt);
//nodeType
console.log(ele.nodeType);//1
console.log(att.nodeType);//2
console.log(txt.nodeType);//3
//nodeName
console.log(ele.nodeName);//DIV
console.log(att.nodeName);//id
console.log(txt.nodeName);//#text
//nodeValue
console.log(ele.nodeValue);//null
console.log(att.nodeValue);//box
console.log(txt.nodeValue);//你好
</script>
</body>
</html>
```
####隔行變色
```html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
ul {
width: 1210px;
margin: 100px auto;
}
li {
height: 34px;
cursor: pointer;
font: 500 16px/34px "simsun";
}
</style>
</head>
<body>
<ul>
<li>北京股指 3063.31-22.18 (-0.72%)</li>
<li>上海股指 3063.31-22.18 (-0.72%)</li>
<li>廣州股指 3063.31-22.18 (-0.72%)</li>
<li>深圳股指 3063.31-22.18 (-0.72%)</li>
<li>北京股指 3063.31-22.18 (-0.72%)</li>
<li>上海股指 3063.31-22.18 (-0.72%)</li>
<li>廣州股指 3063.31-22.18 (-0.72%)</li>
<li>深圳股指 3063.31-22.18 (-0.72%)</li>
</ul>
<script>
//需求：利用childNodes實現(xiàn)各行變色
//簡單版
// var arr = document.getElementsByTagName("li");
// for(var i=0;i<arr.length;i++){
// if(i%2===0){
// arr[i].style.backgroundColor = "#ccc";
// }
// }
//復雜版
//獲取ul
var ul = document.getElementsByTagName("ul")[0];
var arr = ul.childNodes;
//把元素節(jié)點重新放入一個新數(shù)組
var newArr = [];
for(var i=0;i<arr.length;i++){
if(arr[i].nodeType === 1){
newArr.push(arr[i]);
}
}
//隔行變色
for(var i=0;i<newArr.length;i++){
if(i%2!=0){
newArr[i].style.backgroundColor = "red";
}
}
</script>
</body>
</html>
```
#### 訪問關系
````html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
li {
width: 100px;
height: 100px;
background-color: pink;
margin: 5px;
list-style: none;
}
</style>
</head>
<body>
<ul>
<li></li>
<li></li>
<li id="box"></li>
<li></li>
<li></li>
</ul>
<script src="tools.js"></script>
<script>
//獲取box改為red
var box = getEle("box");
box.style.backgroundColor = "red"
//獲取第一個和最后一個子節(jié)點
var parent = box.parentNode;
getFirstNode(parent).style.backgroundColor = "yellow";
getLastNode(parent).style.backgroundColor = "yellow";
//獲取上一個和下一個兄弟節(jié)點
getNextNode(box).style.backgroundColor = "blue";
getPrevNode(box).style.backgroundColor = "blue";
//指定兄弟節(jié)點
getEleOfIndex(box,0).style.backgroundColor = "green";
getEleOfIndex(box,1).style.backgroundColor = "green";
//獲取所有的兄弟節(jié)點（返回值是數(shù)組，所以用for循環(huán)操作）
var arr = getAllSiblings(box);
for(var i=0;i<arr.length;i++){
arr[i].style.backgroundColor = "black";
}
// //父節(jié)點
// div.parentNode;
//
// //訪問兄弟節(jié)點
// div.previousSibling;
// div.previousElementSibling;
// div.nextSibling;
// div.nextElementSibling;
//
// //訪問單個子節(jié)點
// div.firstChild;
// div.firstElementChild;
// div.lastChild;
// div.lastElementChild;
//
//
// //獲取所有子節(jié)點
// div.childNodes;
// div.children;
//
//
// //獲取指定的兄弟節(jié)點
// div.parentNode.children[index];
//
// //獲取所有的兄弟節(jié)點（返回值是一個數(shù)組）
// function fn(ele){
// //定義一個新數(shù)組，裝所有的兄弟元素，將來返回
// var newArr = [];
// var arr = ele.parentNode.children;
// for(var i=0;i<arr.length;i++){
// //判斷，如果不是傳遞過來的元素本身，那么添加到新數(shù)組中。
// if(arr[i]!==ele){
// newArr.push(arr[i]);
//// newArr[newArr.length] = arr[i];
// }
// }
// return newArr;
// }
</script>
</body>
</html>
tools.js
/**
* Created by Lenovo on 2016/9/2.
*/
function getEle(id){
return document.getElementById(id);
}
/**
* 功能：給定元素查找他的第一個元素子節(jié)點，并返回
* @param ele
* @returns {Element|*|Node}
*/
function getFirstNode(ele){
var node = ele.firstElementChild || ele.firstChild;
return node;
}
/**
* 功能：給定元素查找他的最后一個元素子節(jié)點，并返回
* @param ele
* @returns {Element|*|Node}
*/
function getLastNode(ele){
return ele.lastElementChild || ele.lastChild;
}
/**
* 功能：給定元素查找他的下一個元素兄弟節(jié)點，并返回
* @param ele
* @returns {Element|*|Node}
*/
function getNextNode(ele){
return ele.nextElementSibling || ele.nextSibling;
}
/**
* 功能：給定元素查找他的上一個兄弟元素節(jié)點，并返回
* @param ele
* @returns {Element|*|Node}
*/
function getPrevNode(ele){
return ele.previousElementSibling || ele.previousSibling;
}
/**
* 功能：給定元素和索引值查找指定索引值的兄弟元素節(jié)點，并返回
* @param ele 元素節(jié)點
* @param index 索引值
* @returns {*|HTMLElement}
*/
function getEleOfIndex(ele,index){
return ele.parentNode.children[index];
}
/**
* 功能：給定元素查找他的所有兄弟元素，并返回數(shù)組
* @param ele
* @returns {Array}
*/
function getAllSiblings(ele){
//定義一個新數(shù)組，裝所有的兄弟元素，將來返回
var newArr = [];
var arr = ele.parentNode.children;
for(var i=0;i<arr.length;i++){
//判斷，如果不是傳遞過來的元素本身，那么添加到新數(shù)組中。
if(arr[i]!==ele){
newArr.push(arr[i]);
}
}
return newArr;
}
菜單練習
菜單
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#list li {
list-style-type: none;
width: 80px;
height: 30px;
line-height: 30px;
background-color:beige;
text-align: center;
float: left;
margin-left: 5px;
}
#list li.current {
background-color: burlywood;
}
#list li a {
text-decoration: none;
}
</style>
<script src="tools.js"></script>
<script>
window.onload = function () {
//需求：點擊a鏈接，讓a鏈接對應的li標簽添加類。
//思路：點擊a鏈接，讓他的父親添加類，其他的li標簽類名清空。
//步驟：
//1.獲取事件源
//2.綁定事件
//3.書寫事件驅(qū)動程序
//1.獲取事件源
var ul = getEle("list");
var aArr = ul.getElementsByTagName("a");
for(var i=0;i<aArr.length;i++){
aArr[i].onclick = function () {
//點擊哪個a鏈接，讓他的父親添加類
this.parentNode.className = "current";
//設置他的父元素的其他所有兄弟節(jié)點類名為空
var otherArr = getAllSiblings(this.parentNode);
for(var j=0;j<otherArr.length;j++){
otherArr[j].className = "";
}
}
}
// //1.獲取事件源
// var ul = getEle("list");
// var liArr = ul.children;
// //2.綁定事件
// for(var i=0;i<liArr.length;i++){
// var a = getFirstNode(liArr[i]);
// a.onclick = function () {
// //3.書寫事件驅(qū)動程序
// //排他思想
// for(var j=0;j<liArr.length;j++){
// liArr[j].className = "";
// }
// this.parentNode.className = "current";
// }
// }
}
</script>
</head>
<body>
<div id="menu">
<ul id="list">
<li class="current"><a href="#">首頁</a></li>
<li><a href="javascript:void(0)">播客</a></li>
<li><a href="javascript:void(0)">博客</a></li>
<li><a href="javascript:void(0)">相冊</a></li>
<li><a href="javascript:void(0)">關于</a></li>
<li><a href="javascript:void(0)">幫助</a></li>
</ul>
</div>
</body>
</html>
style屬性
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.box {
border: 10px solid #000;
}
</style>
</head>
<body>
<div class="box" style="width: 100px;height: 100px;background-color: pink;">我愛你中國</div>
<script>
var box = document.getElementsByTagName("div")[0];
// 1.樣式少的時候使用
console.log(box.style.backgroundColor);
// 2.style是對象
console.log(box.style);
console.log(typeof box.style);
//3.值是字符串，沒有設置值是“”；
console.log(box.style.lineHeight);
console.log(box.style.border);
// 4.命名規(guī)則，駝峰命名。和css不一樣
console.log(box.style.backgroundColor);
// 5.設置了類樣式不能獲取。（只和行內(nèi)式交互，和內(nèi)嵌和外鏈無關）
console.log(typeof box.className);
// 6.box.style.cssText = “字符串形式的樣式”；
console.log(box.style.cssText);
box.style.cssText = "width: 200px; height: 200px; background-color: red;line-height:200px;text-align:center;"
</script>
</body>
</html>
文本框獲取焦點高亮顯示
文本框獲取焦點高亮顯示
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
input {
display: block;
}
</style>
</head>
<body>
<ul>
<input type="text"/>
<input type="text"/>
<input type="text"/>
<input type="text"/>
<input type="text"/>
<button>設置</button>
</ul>
<script>
//需求：點擊設置按鈕，讓所有的input標簽獲取焦點后高亮顯示
//步驟：
//1.獲取事件源
//2.綁定事件
//3.書寫事件驅(qū)動程序
//1.獲取事件源
var inpArr = document.getElementsByTagName("input");
var button = inpArr[inpArr.length-1].nextElementSibling || inpArr[inpArr.length-1].nextSibling ;
//2.綁定事件
button.onclick = function () {
//3.書寫事件驅(qū)動程序
for(var i=0;i<inpArr.length;i++){
//當button按鈕被點擊以后，所有的input標簽被綁定事件，onfocus事件
inpArr[i].onfocus = function () {
this.style.border = "2px solid red";
this.style.backgroundColor = "#ccc";
}
//綁定onblur事件，取消樣式
inpArr[i].onblur = function () {
this.style.border = "";
this.style.backgroundColor = "";
}
}
}
</script>
</body>
</html>
高級隔行變色
高級隔行變色
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
* {
padding: 0;
margin: 0;
text-align: center;
}
.wrap {
width: 500px;
margin: 100px auto 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
border: 1px solid #c0c0c0;
width: 500px;
}
th,
td {
border: 1px solid #d0d0d0;
color: #404060;
padding: 10px;
}
th {
background-color: #09c;
font: bold 16px "微軟雅黑";
color: #fff;
}
td {
font: 14px "微軟雅黑";
}
tbody tr {
background-color: #f0f0f0;
cursor: pointer;
}
.current {
background-color: red!important;
}
</style>
</head>
<body>
<div class="wrap">
<table>
<thead>
<tr>
<th>序號</th>
<th>姓名</th>
<th>課程</th>
<th>成績</th>
</tr>
</thead>
<tbody id="target">
<tr>
<td>
1
</td>
<td>呂不韋</td>
<td>語文</td>
<td>100</td>
</tr>
<tr>
<td>
2
</td>
<td>呂布</td>
<td>日語</td>
<td>100</td>
</tr>
<tr>
<td>
3
</td>
<td>呂蒙</td>
<td>營銷學</td>
<td>100</td>
</tr>
<tr>
<td>
4
</td>
<td>呂尚</td>
<td>數(shù)學</td>
<td>100</td>
</tr>
<tr>
<td>
5
</td>
<td>呂雉</td>
<td>英語</td>
<td>100</td>
</tr>
<tr>
<td>
6
</td>
<td>呂超</td>
<td>體育</td>
<td>100</td>
</tr>
</tbody>
</table>
</div>
<script>
//需求：讓tr各行變色，鼠標放入tr中，高亮顯示。
//1.隔行變色。
var tbody = document.getElementById("target");
var trArr = tbody.children;
//循環(huán)判斷并各行賦值屬性（背景色）
for(var i=0;i<trArr.length;i++){
if(i%2!==0){
trArr[i].style.backgroundColor = "#a3a3a3";
}else{
trArr[i].style.backgroundColor = "#ccc";
}
//鼠標進入高亮顯示
//難點：鼠標移開的時候要回復原始顏色。
//計數(shù)器（進入tr之后，立刻記錄顏色，然后移開的時候使用記錄好的顏色）
var color = "";
trArr[i].onmouseover = function () {
//賦值顏色之前，先記錄顏色
color = this.style.backgroundColor;
this.style.backgroundColor = "#fff";
}
trArr[i].onmouseout = function () {
this.style.backgroundColor = color;
}
}
</script>
</body>
</html>
百度皮膚
百度皮膚
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
* {
padding: 0;
margin: 0;
}
body {
background: url(image/1.jpg) no-repeat;
}
.box {
height: 165px;
padding-top: 35px;
text-align: center;
background: rgba(255,255,255,0.3);
}
img {
cursor: pointer;
margin: 0 10px;
}
</style>
</head>
<body>
<div class="box">
<img src="image/1.jpg" alt="" width="200px"/>
<img src="image/2.jpg" alt="" width="200px"/>
<img src="image/3.jpg" alt="" width="200px"/>
<img src="image/4.jpg" alt="" width="200px"/>
<img src="image/5.jpg" alt="" width="200px"/>
</div>
<script>
//需求：點擊圖片，body的背景圖修改。
//步驟：
//1.獲取事件源
//2.綁定事件
//3.書寫事件驅(qū)動程序
//1.獲取事件源
var box = document.getElementsByTagName("div")[0];
//body的獲取js內(nèi)部幫我們優(yōu)化完畢
var body = document.body;
var imgArr = box.children;
//2.綁定事件
for(var i=0;i<imgArr.length;i++){
imgArr[i].index = i;
imgArr[i].onclick = function () {
//3.書寫事件驅(qū)動程序
//改body的背景
// body.style.backgroundImage = "url(image/"+(this.index+1)+".jpg)";
body.style.backgroundImage = "url("+this.src+")";
}
}
</script>
</body>
</html>
隱藏盒子
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div class="box"></div>
<script>
//獲取盒子，設置樣式
var box = document.getElementsByClassName("box")[0];
// box.style.width = "100px";
// box.style.height = "100px";
// box.style.backgroundColor = "pink";
box.style.cssText = "width:100px;height:100px;background-color:red";
//隱藏盒子
box.onclick = function () {
this.style.display = "none";
// this.style.visibility = "hidden";
this.style.opacity = "0";
// this.style.position = "absolute";
// this.style.top = "-50px";
}
</script>
</body>
</html>
定位和層級
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
div {
margin-top: 20px;
width: 200px;
height: 200px;
background-color: red;
position: absolute;
top: 100px;
left: 10px;
z-index: 1;
}
img {
position: absolute;
top: 100px;
left: 10px;
}
</style>
</head>
<body>
<button>動?。?！</button>
<div></div>
<img src="image/mm.png" alt="" width="200px"/>
<script>
//需求：點擊按鈕，讓盒子和圖片同事移開，并且，圖片壓住盒子.
var btn = document.getElementsByTagName("button")[0];
var div = document.getElementsByTagName("div")[0];
var img = document.getElementsByTagName("img")[0];
//綁定事件
btn.onclick = function () {
div.style.top = "300px";
div.style.left = "300px";
img.style.top = "300px";
img.style.left = "300px";
img.style.zIndex = "2";
}
</script>
</body>
</html>
dom元素的創(chuàng)建
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<button>創(chuàng)建</button>
<ul>
aaaaa
</ul>
<script>
//第一種創(chuàng)建方式：document.write();
document.write("<li>我是document.write創(chuàng)建的</li>");
var btn = document.getElementsByTagName("button")[0];
var ul = document.getElementsByTagName("ul")[0];
// btn.onclick = function () {
// document.write("<li>我是document.write創(chuàng)建的</li>");
// }
//第二種：直接利用元素的innerHTNL方法。（innerText方法不識別標簽）
ul.innerHTML += "<li id='li1'>我是innerHTML創(chuàng)建的</li>"
//第三種：利用dom的api創(chuàng)建元素
var newLi = document.createElement("li");
newLi.innerHTML = "我是createElement創(chuàng)建的";
// console.log(newLi);
//在父元素的最后面添加元素。
// ul.appendChild(newLi);
//指定位置添加
var li1 = document.getElementById("li1");
ul.insertBefore(newLi,li1);
</script>
</body>
</html>
