前端三劍客之javascript
給個小目錄
一、JavaScript介紹
二、ECMAScript（核心）
三、BOM對象（浏覽器對象）
四、DOM對象（文檔對象模型）
總結：
JS的組成：
a) ECMAScript 是什麼：擔當的是一個翻譯的角色；是一個解釋器；幫助計算機來讀懂我們寫的程式；實作+-*/, 定義變量；幾乎沒有相容性問題；
b) DOM： 文檔對象模型；文檔指的就是網頁；把網頁變成一個JS可以操作的對象；給了JS可以操作頁面元素的能力；document;有一些相容性問題；
c) BOM：浏覽器對象模型；給了JS操作浏覽器的能力；window;幾乎不相容；
一、JavaScript介紹
前端三劍客之javascript，簡稱js，
完整的JavaScript是由以下三個部分組成的：
核心（ECMAScript）這個是ECMA（歐洲計算機制造協會）規範的版本
文檔對象模型（DOM）Document object model
浏覽器對象模型（BOM）Broswer object model
既然是一門程式設計語言，就會含有（
變量
資料類型
運算符
流程控制語句
函數（并不是所有的語言都有函數的概念）
類和對象（js沒有“類”）
）
二、ECMAScript（核心）
首先，js的注釋和Java一樣
//單行注釋
/*多行注釋*/ 記憶關鍵字：冒星*
1.變量（變量是一個杯子，它的類型是由它裡面存放的東西決定的）
（1）聲明變量時有var關鍵字，不用var關鍵字的話是全局變量，除非有需要，否則不建議用全局變量，會拖慢效率；
（2）變量要先聲明，再定義，
var i;
i=10;
或者簡寫成var i=10;（一般都這樣處理）
（3）js還支援一行聲明多個變量，并且可以是不同類型
var i=10,j="zhang";
（4）如果聲明一個變量x,卻不給他指派，列印的時候竟然也不報錯，而是列印undefined
2.資料類型
js中沒有print，我們可以用alert（彈窗）或者console.log()（在浏覽器的控制台列印）列印我們想要的結果
檢視資料類型用typeof指令
var x=10; console.log(typeof(x)); （1）js中有的資料類型有：
基本資料類型：Number（數值），String（字元串），Boolean（布爾值），Null，Undefined（聲明了但未指派）
引用資料類型：object
動态類型：var
js中并沒有清單，元組，字典這種資料類型，清單和元組是以數組對象實作的
（2）Number（數字類型）
（3）null和undefined類型
undefined類型隻有一個值，就是undefined，當函數沒有明确傳回值，或者聲明的變量沒有初識化的時候，就會産生這個值。
而null常出現在找不到對象的時候。
3.運算符
js中的運算符特殊的幾個：
（1）i++和++i
這個學過c++的一定知道，沒什麼可說的，應該是為了考試才出的這種東西吧
i++是先指派再計算
++i是先計算再指派
（2）=，+=，-=，*=，/=，%=
=，+=，-=，*=，/=，%=
x=5 是 最基本的指派運算符，即把右邊的值，賦給左邊的變量x。
x+=y, 表示 x=x+y。
其他都是一個道理。
（3）+
+ 具備多态特征
當兩邊都是數字的時候 ，表現為算數運算符
當任意一邊是字元串的時候，表現為字元串連接配接符
4.流程控制
（1）if條件語句
與excel裡的if條件語句一個樣
if (表達式){
執行語句
}
else if(表達式){
執行語句
}
else{
執行語句
} （2）switch-case語句
switch (表達式){
case 值1:語句1;break;
case 值2:語句2;break;
case 值3:語句3;break;
default:語句4;
} 注意：值1，值2。。。。這些是确定的值，default是上述值都不是表達式的值的時候執行的語句；
這個break是必要的，如果沒有break，這些語句将都會執行、
（3）while循環和for循環
for循環方式一：條件循環（最常用）
for(var i=0;i<10;i++){
console.log("i")
} for循環方式二：周遊循環
var arr=["a","b","c"];
for (var i in arr){
console.log(i)
} 5.對象
在我們學習了面向對象之後，應該有這種思想，見到“對象”這兩個字，就馬上想到對象有屬性和方法。
（1）字元串對象
建立方式有兩種：
變量=“字元串”； var str1="hello world"
字元串對象名稱=new String（字元串） var str1=new String("hello world")
字元串對象就一個屬性，length屬性
方法：s為字元串對象
s.toLowerCase() -----轉成小寫
s.toUpperCase() -----轉成大寫
s.trim() ------去除字元串兩邊空格
s.charAt() ------擷取指定位置字元，括号裡為要擷取的字元索引
s.indexOf() -------查詢指定字元的索引位置，括号裡為要查找的字元
s.lastIndexOf() -------跟上面這條功能一樣，但是是反着找
s.match() -------傳回比對字元串的數組，沒有比對到傳回null
s.seach() -------傳回比對到的字元串首字元的位置索引，比對不到傳回-1
s="hello";
console.log(s.toLowerCase()); //hello
console.log(s.toUpperCase()); //HELLO
console.log(s.charAt(2)); //l
console.log(s.indexOf("o")); //4
console.log(s.lastIndexOf("o")); //4
console.log(s.match("lo")); //[object Array]["lo"]
console.log(s.match("lol")); //null
console.log(s.search("lo")); //3
console.log(s.search("lol")); //-1
console.log(s.substr(1,3)); //ell
console.log(s.substring(1,3)); //el
console.log(s.slice(1,3)) ; //el
console.log(s.replace("ell","o")) ; //hoo
console.log(s.split("e")) ; //[object Array]["h", "llo"]
console.log(s.concat("world")) ; //helloworld s.substr(start,length) -----截取指定長度字元串，start是開始位置的索引值，length表示長度
s.substring(start,end) -----截取字元串，start是開始位置索引，end是結束位置索引，取之間的字元串
s.slice(start,end) -----切片字元串
s.replace(oldstr,newstr) -----替換字元串，（舊的，新的）
s.split() -----分割字元串，結果放到一個數組中
s.concat(addstr) -----拼接字元串，括号裡為要拼接的字元串
（2）數組對象（array對象）
建立數組的三種方式：
- var arr=[1,2,3];
- var arr=new Array[1,2,3];
- var arr=new Array(3);
arr[0]=1;
arr[1]=2;
arr[2]=3;
還可以建立二維數組，類似一個清單，arr[ ] [ ]，第一個索引為行，第二個索引為列
join方法：
在js的數組中正好反過來，
console.log(["hello","world"].join("-")) //結果是：hello-world reverse方法和sort方法：
都是對數組進行排序的，reverse是颠倒順序，sort是按首字母的ascii碼表位置排序
slice方法：
對數組進行切片操作，參數為開始位置和結束位置的索引值
splice方法：
删除子數組，有幾個參數
arr.splice(start,deleteCount,value)
start代表開始位置（從開始位置後面開始删），deleteCount 表示删除數組元素的個數，value 表示在删除位置插入的數組元素（可省略）
push和pop方法：
在數組的最後添加和删除元素
unshift和shift方法：
在數組開始位置添加和删除元素
（3）時間對象
建立時間對象：var timer = new Date()
擷取日期和時間
getDate() 擷取日
getDay () 擷取星期
getMonth () 擷取月（0-11）
getFullYear () 擷取完整年份
getYear () 擷取年
getHours () 擷取小時
getMinutes () 擷取分鐘
getSeconds () 擷取秒
getMilliseconds () 擷取毫秒
getTime () 傳回累計毫秒數(從1970/1/1午夜)
//設定日期和時間
//setDate(day_of_month) 設定日
//setMonth (month) 設定月
//setFullYear (year) 設定年
//setHours (hour) 設定小時
//setMinutes (minute) 設定分鐘
//setSeconds (second) 設定秒
//setMillliseconds (ms) 設定毫秒(0-999)
//setTime (allms) 設定累計毫秒(從1970/1/1午夜)
var x=new Date();
x.setFullYear (1997); //設定年1997
x.setMonth(7); //設定月7
x.setDate(1); //設定日1
x.setHours(5); //設定小時5
x.setMinutes(12); //設定分鐘12
x.setSeconds(54); //設定秒54
x.setMilliseconds(230); //設定毫秒230
document.write(x.toLocaleString( )+"<br>");
//傳回1997年8月1日5點12分54秒
x.setTime(870409430000); //設定累計毫秒數
document.write(x.toLocaleString( )+"<br>");
//傳回1997年8月1日12點23分50秒
時間對象 示範
（4）math對象，就是把内置函數封裝到math對象中，使用時需要用Math來調用方法
abs(x) 傳回數的絕對值。
exp(x) 傳回 e 的指數。
floor(x)對數進行下舍入。
log(x) 傳回數的自然對數（底為e）。
max(x,y) 傳回 x 和 y 中的最高值。
min(x,y) 傳回 x 和 y 中的最低值。
pow(x,y) 傳回 x 的 y 次幂。
random() 傳回 0 ~ 1 之間的随機數。
round(x) 把數四舍五入為最接近的整數。
sin(x) 傳回數的正弦。
sqrt(x) 傳回數的平方根。
tan(x) 傳回角的正切。 （5）函數對象（重點）
//定義一個函數
function 函數名(參數) {
函數體
}
//調用函數
函數名() 注意：js中函數的調用可以在定義之前，因為js是先編譯一遍，再去執行
三、BOM對象（浏覽器對象）
BOM即 浏覽器對象模型(Brower Object Model)
1.windows對象
在浏覽器中，每個打開的網頁是一個視窗，有三種方法實作彈出框：
浏覽器上常見的彈出框有
警告框alert
确認框confirm
提示框prompt
（1）alert(123) 在視窗中彈出“123”，點選确定消失
（2）var ret=confirm(\'zhang\');
console.log(ret); 在視窗中彈出“zhang“，有确定和取消兩個按鈕，點選确定，會在背景傳回一個true，點選取消，會傳回一個false
（3）var ret=prompt("input a number") 在視窗彈出一個輸入框，同樣可以通過一個變量來接收使用者輸入的内容
2.setInterval() 和 clearInterval()
setInterval()是按照指定的時間周期（毫秒為機關）來連續調用函數或者計算表達式，第一個參數為函數，第二個參數為時間間隔
clearInterval()是取消由setInterval()設定的操作，這個的參數為setInterval()的傳回值
示例：在一個input框右面有兩個按鈕，點選開始就在框中每隔1秒中列印一次目前時間，點選停止就停止重新整理
<body>
<input type="text">
<button class="start">開始</button>
<button class="end">停止</button>
<script>
ele_start=document.getElementsByClassName("start")[0];//開始按鈕
ele_end=document.getElementsByClassName("end")[0]; //停止按鈕
function foo() {
var timer=new Date().toString();
var ele=document.getElementsByTagName("input")[0];
ele.value=timer.slice(4,25);//是框内顯示最适合檢視代碼效果的部分
}
var ID;//定義一個全局變量，用于接收傳回值
ele_start.onclick=function () {
if (ID==undefined){ //為了解決第二次點選開始的時候，代碼不執行的bug
foo(); //為了實作一點選開始，馬上就能出現時間的效果
ID=setInterval(foo,1000);
}
}
ele_end.onclick = function () {
clearInterval(ID);
ID=undefined; //清除定時器後再給id重新指派
}
</script>
</body> 示範
四、DOM對象（文檔對象模型）
DOM 是Document Object Model( 文檔對象模型 )的縮寫。
DOM是把html裡面的各種資料當作對象進行操作的一種思路。
在DOM中，所有對象都是節點對象，其中
document對象是：整個html文檔
element對象是指：html中的任何一個标簽都是一個element對象
想要對标簽執行操作需要兩步：查找标簽和操作标簽
1.查找标簽
（1）直接查找
document.getElementsByClassName("classname");//根據class查找标簽
document.getElementsByTagName("elementname");//根據标簽名查找标簽
document.getElementById("idname"); //根據ID名查找标簽
document.getElementsByName("name"); //根據name屬性查找标簽 這四種方法中，隻有 document.getElementById("idname")是找到一個标簽，其他三種都是找到多個，将結果放到一個數組中，可以通過索引分别取到
（2）通過節點屬性查找
var ele=document.getElementsByClassName("start")[0];
ele.parentElement;// 查找父節點
ele.children; // 查找所有子标簽
ele.firstElementChild; //查找第一個子标簽元素
ele.lastElementChild; //查找最後一個子标簽元素
ele.nextElementSibling; //查找下一個兄弟标簽
ele.previousElementSibling;//查找上一個兄弟标簽 需要注意的是，沒有直接的屬性可以查找到所有的兄弟标簽，如果想在DOM中找到所有子标簽，可以通過周遊 操作标簽的父标簽的所有子标簽，然後用if條件判斷排除目前操作标簽的方法。
2.事件綁定的方式
方式一：
<body>
<div>
<button onclick="foo()">點選</button>
</div>
<script>
function foo() {
alert(123)
}
</script>
</body> 這種方式，js代碼和html代碼雜糅在一起，耦合性太強了
方式二：
<body>
<div>
<button>點選</button>
</div>
<script>
ele_button=document.getElementsByTagName("button")[0];
ele_button.onclick=function () {
alert(123)
}
</script>
</body> 但是這種方法會有一個問題：js代碼會在頁面出現的時候就已經加載完了，如果後面有新添加的标簽，就不能綁定這個事件了，因為js代碼已經加載過一遍，有幾個綁定事件的标簽就已經确定了，這個問題在jQuery中可以很友善解決，在DOM對象中，有兩種解決辦法可供參考：
1.把标簽綁定的事件寫到函數中，即第一種綁定事件的方式
2.在添加标簽的代碼中，再寫一遍事件綁定函數
如果上面這點沒看明白的話，可能你對查找到的标簽是個數組這件事還不太明白，再寫一個例子：
<body>
<div>
<button>添加</button>
<button>删除</button>
<button>編輯</button>
</div>
<script>
eles_button=document.getElementsByTagName("button");
//此時eles_button并不是一個标簽了，而是有三個标簽的集合
//給每個标簽綁定事件就要通過循環周遊這個數組來拿到每個标簽
for(var i=0;i<eles_button.length;i++){
eles_button[i].onclick=function () {
alert(123)
}
}
</script>
</body> 通過這個例子再說明上面的問題，在綁定事件的時候，找标簽的過程就已經完成了，隻找到了三個标簽，但是我們新添加一個button後，代碼不會再次重新重新整理，是以新添加的這個button并沒有綁定事件。
3.對标簽操作
（1）對class操作
ele.classList.add("hide") //為标簽添加class
ele.classList.remove("hide") //為标簽移除class 練習：左側菜單
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title</title>
<style>
.left{
width: 20%;
height: 800px;
background: grey;
float: left;
}
.right{
width:80%;
height:800px;
background: navajowhite;
float: left;
}
.title{
background: purple;
margin-top: 10px;
}
ul{
background: green;
}
.hide{
display: none;
}
</style>
</head>
<body>
<div class="left">
<div class="menu">
<div class="title">菜單一</div>
<ul>
<li>111</li>
<li>111</li>
<li>111</li>
</ul>
</div>
<div class="menu">
<div class="title">菜單二</div>
<ul class="hide">
<li>222</li>
<li>222</li>
<li>222</li>
</ul>
</div>
<div class="menu ">
<div class="title">菜單三</div>
<ul class="hide">
<li>333</li>
<li>333</li>
<li>333</li>
</ul>
</div>
</div>
<div class="right"></div>
<script>
// 查找标簽
var eles_title=document.getElementsByClassName("title");
for (var i=0;i<eles_title.length;i++){
eles_title[i].onclick=function () {
this.nextElementSibling.classList.remove("hide"); //this就是觸發事件的标簽
var eles_child=this.parentElement.parentElement.children;
for (var j=0;j<eles_child.length;j++){
if(eles_child[j].firstElementChild!=this) {
eles_child[j].lastElementChild.classList.add("hide")//添加hide屬性，就把這個标簽隐藏了
}
}
}
}
</script>
</body>
</html> 示範
4.節點操作
ele.createElement() //建立一個節點,括号裡是标簽名
ele.removeChild() //父标簽删除一個子節點，括号裡是标簽對象
ele.replaceChild() //替換标簽，ele是父标簽，括号裡依次是舊的标簽對象，新的标簽對象
ele.appendChild() //父标簽添加子标簽 這裡單獨說一下複制标簽：cloneNode
<script>
var ele_copy=document.getElementsByTagName("div")[0].cloneNode();//這種隻是拷貝最外層的節點
var ele_copy=document.getElementsByTagName("div")[0].cloneNode(true);//這種才是完整的拷貝
這裡有一個bug，如果被拷貝的對象有id屬性，仍然可以拷貝，而且拷貝出來的對象也有這個id
還有一個問題，源标簽的綁定事件不會被拷貝
</script> 5.擷取标簽中的文本
ele.innerText 和 ele.innerHTML 這是取值，指派就是
ele.innerText="<a href=\'#\'>click</a>"
ele.innerHTML="<a href=\'#\'>click</a>" innerText就是純文字，但是innerHTML 會把拿到的元素當時一個标簽（如果這個元素是一個标簽）
6.屬性值操作 attribute
我們平時取屬性值的時候就直接用的 标簽.屬性
給屬性指派就是直接用的 标簽.屬性=“ ”
但是事實上，是有個attribute方法的
屬性取值：ele.getAttribute(屬性名)
屬性指派：ele.setAttribute(屬性名)
删除屬性：ele.removeAttribute(屬性名)
7.DOM事件
onclick //點選标簽
ondbclick //輕按兩下标簽
onfocus //元素獲得焦點
onblur //元素失去焦點
onchange //域的内容發生改變，常用于表單元素
onkeydown //鍵盤按鍵被按下
onkeypress //某個鍵盤按鍵被按下并松開。
onkeyup //某個鍵盤按鍵被松開。
onload //一張頁面或一幅圖像完成加載。
onmousedown //滑鼠按鈕被按下。
onmousemove //滑鼠被移動。
onmouseout //滑鼠從某元素移開。
onmouseover //滑鼠移到某元素之上。
onmouseleave //滑鼠從元素離開
onselect //文本被選中。
onsubmit //确認按鈕被點選。 示範
（1）onchange事件
通常用于表單标簽，一個表格裡的内容被改變時（我們選擇一個選項時），觸發事件
練習：省市二級關聯
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title</title>
</head>
<!--需求：兩個表單，左邊是省份，右邊是城市，左邊選擇省份後，右邊内容是對應的城市-->
<body>
<select name="" id="province">
<option value="">請選擇省份</option>
<option value="">河北</option>
<option value="">山東</option>
</select>
<select name="" id="city">
<option value="" id="select_city">請選擇城市</option>
</select>
</body>
<script>
var info={
"河北":["北京","衡水"],
"山東":["青島","濰坊"]
};
// js中雖然沒有字典的說法，但是有類似的用法。
var ele_pvn=document.getElementById("province");
var ele_city=document.getElementById("city");
var ele_select; //定義一個全局變量
ele_pvn.onchange=function () {
ele_city.options.length=1; //保留一項，後面的内容全部清除
for (var i in info){
if (i==(this.children[this.selectedIndex]).innerText){ //判斷
// this.selectedIndex是取到選擇内容的索引值
for(var j in info[i]){
//思路是每選擇一個省份，就把後面城市裡的内容全部清空，然後從“字典”中根據選擇的省份，重新建立一個後面城市的标簽
var city_option=document.createElement("option");
city_option.id="selected";
ele_select=document.getElementById("selected");
city_option.innerText=info[i][j];
ele_city.appendChild(city_option);
}
}
}
}
</script>
</html> 示範
（2）onkeydown事件，用于input輸入框
這個事件是按鍵盤上任意按鍵都會觸發，這其實意義不大。如果想要指定按鍵，該怎麼做？
這裡用到一個event對象，event對象是儲存事件觸發狀态的對象，由作業系統發送
ele.onkeydown=function (e) {
e=e||window.event; //這句代碼是為了避免出現某些浏覽器的不相容問題
console.log(e.keyCode);//這樣會列印按鍵的ascii碼
console.log(String.fromCharCode(e.keyCode))//這句代碼可以把ascii碼轉換成字元
} （3）onload事件
script中涉及到查找标簽時，js代碼必須寫在html代碼下面，否則會因為找不到标簽而報錯
但是如果就是想讓js代碼在上面，就用到onload事件
或者再說一個應用場景：浏覽器加載圖檔實際上是和加載其他文本标簽分開的，是新開了一個線程。有時網速不給力的時候，就會出錯。這時就可以用到這個事件，讓其他标簽等待圖檔加載完才能操作
用法如下：
<script>
window.onload=function () {
var ele=document.getElementsByTagName("div")
ele.style.color="green";
}
</script> （4）onsubmit事件
這個事件是給form表單用到，是在表單送出的時候觸發。表單标簽裡面的那個submit标簽，點選之後會重新整理頁面，同時把資料送出給背景伺服器（如果action指定了位址），這是submit自己預設的事件，我們用onsubmit事件的意義就是要阻止submit的預設事件。比如在使用者登入輸入使用者名密碼的時候，前端可以先判斷一下格式是否正确，如果格式都不正确，就沒必要發送給後端了。
onsubmit事件一定是在submit事件之前觸發的，否則就沒意義了。
阻止submit預設事件的方法有兩個：
1.return false
2.e.preventDefault()
練習：使用者登入驗證
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title</title>
<style>
div{
margin-top: 30px;
}
</style>
</head>
<body>
<form action="" class="form">
<div id="abd" ><input type="text" placeholder="使用者名" class="text"></div>
<div><input type="password" placeholder="密碼" ></div>
<div id="abc"></div>
<div><input type="submit" value="送出" class="submit"></div>
</form>
</body>
<script>
var ele_text=document.getElementsByClassName("text")[0];
var ele_submit=document.getElementsByClassName("form")[0];
var ele_abd=document.getElementById("abd");
ele_submit.onsubmit=function () {
if (ele_text.value.length>5){
var ele_warm=document.createElement("h5");
ele_warm.innerText="使用者名超出規定長度!";
ele_warm.style.color="red";
ele_warm.style.display="inline";
ele_abd.appendChild(ele_warm);
return false;//阻止submit預設事件
}
}
</script>
</html> 示範
（5）onmouseout和onmouseleave事件
這兩個事件都是滑鼠移開時觸發的事件，不同的是：
- 不論滑鼠指針離開被選元素還是任何子元素，都會觸發onmouseout事件
- 隻有在滑鼠指針離開備選元素時，才會觸發onmouseleave事件
可以通過一個左側菜單的案例來搞清楚這兩個的差別
<style>
.container{
width: 300px;
}
.title{
background:green;
line-height: 44px;
text-align: center;
}
.list{
display: none;
}
.list div{
line-height: 40px;
}
.item1{
background: purple;
}
.item2{
background: orange;
}
.item3{
background: greenyellow;
}
</style>
</head>
<body>
<div class="container">
<div class="title">text</div>
<div class="list">
<div class="item1">111</div>
<div class="item2">222</div>
<div class="item3">333</div>
</div>
</div>
<script>
var ele=document.getElementsByClassName("title")[0];
var ele_list=document.getElementsByClassName("list")[0];
var ele_box=document.getElementsByClassName("container")[0];
ele.onmouseover =function () {
ele_list.style.display="block";
};
// ele.onmouseleave =function () {
// ele_list.style.display="none";
// }這樣是有問題的，滑鼠往下走也隐藏了,應該給盒子綁定
ele_box.onmouseleave =function () {
ele_list.style.display="none";
};
</script> 示範
8.事件傳播
父标簽綁定事件a,子标簽綁定事件b,那麼觸發事件b的時候，肯定事件a也會觸發，這就叫事件綁定
我們需要知道的是怎麼解除事件綁定，方法是在子标簽中添加e.stopPropagation
<script>
ele_inner.onclick =function (e) {
alert(123);
e.stopPropagation()
}
</script> 寫一個跑馬燈的例子，感覺還挺好玩的，下起了雨，下雨天留客天留我不留
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title</title>
</head>
<body>
<h4>下雨天留客天留我不留</h4>
</body>
<script>
function foo() {
var ele=document.getElementsByTagName("h4")[0];
var first_str= ele.innerText.charAt(0);
var second_str=ele.innerText.slice(1,ele.innerText.length);
var new_str=second_str + first_str;
ele.innerText=new_str
}
setInterval(foo,500)
</script>
</html> 示範
9.标簽與标簽之間綁定
考慮一個需求：京東下面的商品詳情，評論，售後這些内容，是通過點選“商品詳情”，“評論”，“售後”這些按鈕，就可以顯示對應的内容，這個對應關系是怎麼實作的呢，這用到了自定義屬性
<body>
<ul>
<li gname="c1">商品詳情</li>
</ul>
<div id="c1">商品介紹商品介紹商品介紹商品介紹商品介紹商品介紹商品介紹</div>
</body> 這樣就可以實作兩個标簽的綁定
前面說了，取屬性值一般都用點屬性的方式，但是在這裡取這個自定義屬性，就隻能用getAttribute方法了。