js 基礎（2）
阿新 • • 發佈：2018-12-22
一、js的DOM操作（重點）
1．js的DOM概述（document object model）
html文件載入到瀏覽器的記憶體中後，我們認為形成了一顆DOM樹，即html標籤按照層級結構而形成了一顆“家譜樹”，而任何一個html標籤、標籤屬性和文字都是這個樹上的節點元素。
我們可以通過js的DOM元件中的方法對記憶體中的DOM樹上的結構和內容進行修改，即通過js動態的修改記憶體中的那一份html及css的程式碼。
簡單的html頁面
<html> <head> <title>網頁的標題</title> </head> <body> <div> <a href="http://www.baidu.com">百度</a> </div> </body> </html>
2．js的DOM的操作方法
(1)標籤元素的操作
1）獲得元素物件：
- Document.getElementById();通過標籤的屬性值獲取標籤物件，返回的是單個的標籤物件.
- Document.getElementsByName();通過標籤的name屬性值獲取標籤物件，返回的是標籤物件的陣列。
- Document.getElementsByTagName();通過標籤的名稱獲取標籤的物件,返回的是標籤物件的陣列
- Document.getElementsByClassName();通過標籤的class屬性獲取標籤物件，返回的是標籤物件的陣列。
2）建立一個新元素
- Document.createElement(tagName);建立標籤物件
3）標籤體的獲取與設定：
- Element.innerHTML :獲取開始標籤到結束標籤之間的內容。包括標籤
- Element.innerText:獲取開始標籤到結束標籤之間的文字，不包括標籤
4）子節點的操作
- Element.hasChildNodes();判斷當前標籤物件下是否含有子節點。返回值是boolean值
- Element.remove();刪除當前標籤物件
- parentElement.removeChild(childElement); 通過父標籤物件刪除子標籤物件
- parentElement.replaceChild(newChild,oldChild);替換父節點下的子節點。
- parentElement.appendChild(ChildElement)；向父標籤下追加子標籤物件
- ParentElement.insertBefore(newElement,refElement);向父標籤下指定的子節點前新增標籤物件
案例1：
<body>
<form name="form1" action="test.html" method="post" >
<input class="ddd" type="text" name="username" value="傳智播客10週年_1" id="tid" onchange="" >
<input type="button" name="ok" value="儲存1"/>
</form>
</body>
<script language="JavaScript">
//知識點：getElementById();通過標籤的id的屬性值獲取標籤物件。返回值是單個的標籤物件
// 需求：輸出 <input type="text" name="username" value="heloworld" id="tid" >標籤value屬性的值
//首先獲取id為tid的標籤物件
var myinput = document.getElementById("tid");
// alert(myinput.value);
//輸出 <input type="text" name="username" value="傳智播客10週年_1" id="tid" >標籤type屬性的值
// alert(myinput.type);
alert(myinput.className);
</script>
案例2：
<body>
<form name="form1" action="test.html" method="post">
<input type="text" name="tname" value="helloworld_1" id="tid_1"><br>
<input type="text" name="tname" value="helloworld_2" id="tid_2"><br>
<input type="text" name="tname" value="helloworld_3" id="tid_3"><br>
<input type="button" name="ok" value="儲存1" />
</form>
<select name="edu" id="edu">
<option value="博士">博士^^^^^</option>
<option value="碩士" selected="selected">碩士^^^^^</option>
<option value="本科">本科^^^^^</option>
<option value="幼兒園">幼兒園^^^^^</option>
</select>
<select name="job" id="job">
<option value="美容">美容^^^^^</option>
<option value="IT">IT^^^^^</option>
<option value="程式設計師">程式設計師^^^^^</option>
<option value="建築師">建築師^^^^^</option>
</select>
</body>
<script type="text/javascript">
//getElementsByTagName();通過標籤的名稱來獲取標籤物件。返回值是陣列，陣列中放的是標籤物件。
//需求：獲取所有的input元素,返回值是陣列
var inputs = document.getElementsByTagName("input");
// alert(inputs.length);
/* for(var i=0;i<inputs.length;i++){
alert(inputs[i].value);
} */
/* for(var i=0;i<inputs.length;i++){
if(inputs[i].type=="text"){
alert(inputs[i].value);
}
} */
//需求：輸出所有下拉選 id="edu"中option標籤中 value屬性的值
//首先找到id為edu的標籤物件
/* var edu = document.getElementById("edu");
var options = edu.getElementsByTagName("option");
for(var i=0;i<options.length;i++){
alert(options[i].value);
}
*/
//需求：輸出所有下拉選select的option標籤中value的值
var options = document.getElementsByTagName("option");
for(var i=0;i<options.length;i++){
if(options[i].selected){
alert(options[i].value);
}
}
</script>
案例3：
<body>
<form name="form1" action="test.html" method="post" >
<input type="text" name="tname" onchange="" value="傳智播客10週年_1" id="tid_1" ><br>
<input type="text" name="tname" value="傳智播客10週年_2" id="tid_2" ><br>
<input type="text" name="tname" value="傳智播客10週年_3" id="tid_3" ><br>
<input type="button" name="ok" value="儲存1"/>
</form>
</body>
<script language="JavaScript">
//getElementsByName();通過標籤的name屬性值來獲取標籤物件。返回值是陣列。
//需求：通過元素的name屬性獲取所有元素的引用 name="tname"
var inputs = document.getElementsByName("tname");
//測試該資料的長度
// alert(inputs.length);
//需求：遍歷元素,輸出所有value屬性的值
/* for (var i=0;i<inputs.length;i++) {
alert(inputs[i].value);
}*/
//需求：為每個文字框(<input type="text">)增加chanage事件,當值改變時,輸出改變的值
for (var i=0;i<inputs.length;i++) {
//判斷標籤物件的type屬性，如果為text，那麼就繫結事件。
i=3;
if(inputs[i].type=="text"){
//動態給標籤物件繫結事件
inputs[i].onchange = function(){
//js中 this代表呼叫該函式的物件。
//此處：this就代表觸發當前onchange事件的input標籤物件
alert(i);
alert(this.value);
}
}
}
</script>
案例4：
<body>
<div id="city"><h1>海馬</h1></div>
</body>
<script language="JavaScript">
//innerHTML :獲取或者設定開始標籤到結束標籤之間的內容
//innerText:設定或者獲取開始標籤到結束標籤之間的文字。
//需求：在div層中插入 <h1>海馬</h1>
//首先獲取標籤物件
var mydiv = document.getElementById("city");
// mydiv.innerHTML = "<h1>海馬</h1>";
//需求：在div層中插入“<h1>海馬</h1>” 文字
mydiv.innerText = "<h1>海馬</h1>";
//需求：讀取div的標籤體內容
alert(mydiv.innerHTML);
//需求：讀取div的標籤體文字內容
alert(mydiv.innerText);
</script>
案例5：
<form name="form1" action="test.html" method="post" >
<input type="text" name="tname" value="helloworld_1" id="tid_1" ><br>
<input type="text" name="tname" value=helloworld_2" id="tid_2" ><br>
<input type="text" name="tname" value="helloworld_3" id="tid_3" ><br>
<input type="button" name="ok" value="儲存1"/>
</form>
<select name="edu" id="edu">
<option value="博士">博士^^^^^</option>
<option value="碩士">碩士^^^^^</option>
<option value="本科" selected="selected" >本科^^^^^</option>
<option value="幼兒園">幼兒園^^^^^</option>
</select>
<select name="job" id="job" >
<option value="美容">美容^^^^^</option>
<option value="IT">IT^^^^^</option>
<option value="程式設計師">程式設計師^^^^^</option>
<option value="建築師">建築師^^^^^</option>
</select>
案例6：
<body>
<ul id="city">
<li id="bj" name="beijing">北京</li>
<li id="sh" name="shanghai">上海</li>
<li id="cq" name="chongqing">重慶</li>
</ul>
</body>
<script language="JavaScript">
//parentElement.removeChild(childElement);通過父標籤刪除子標籤。
//自殺 childElement.remove();
//需求：刪除<ul id="city"> 下<li id="bj" name="beijing">北京</li>這個節點</ul>
//獲取北京的父節點
var city = document.getElementById("city");
//獲取需要被刪除的子節點
var li = document.getElementById("bj");
// city.removeChild(li);
li.remove();
</script>
案例7：
<body>
您喜歡的城市:<br>
<ul id="city">
<li id="bj" value="beijing" onclick="change()">北京</li>
<li id="sh" value="shanghai">上海</li>
<li id="cq" value="chongqing"> 重慶</li>
</ul>
您喜歡的遊戲:<br>
<ul>
<li id="fk" value="fankong">反恐精英</li>
<li id="ms" value="moshou">魔獸</li>
<li id="cq" value="chuanqi">傳奇</li>
</ul>
</body>
<script language="JavaScript">
//parentElement.replaceChild(newChild,oldChild);
//需求：點選北京節點， 將被反恐節點替換
function change(){
//獲取父節點
var city = document.getElementById("city");
var old = document.getElementById("bj");
var newElement = document.getElementById("fk");
city.replaceChild(newElement,old);
}
</script>
(2)屬性的操作
獲得屬性的值：element.getAtrribute(name)
設定屬性的值：element.setAtrribute(name,value)
刪除某個屬性：element.removeAtrribute(name)
二、js的物件
與java一樣，js也內建一些現成的物件供我們使用，js中內建物件有如下幾個：
1．Array物件（重點）
Array物件是陣列物件，跟java中的陣列一個意思，但是使用語法上稍微有些區別。
(1)建立陣列物件的方式：
建立一個空陣列：var arr = new Array();
建立一個指定大的陣列：var arr = new Array(size);
建立陣列並填充元素：var arr = new Array(element0, element1, …, elementn);
直接建立元素陣列：var arr = [element0, element1, …, elementn];
(2)陣列中元素的獲取：
通過索引的方式獲得陣列中的元素：
獲得陣列中的一個元素：arr[0]
遍歷獲得陣列中的所有元素：
for(var i=0;i<arr.length;i++){
alert(arr[i]);
}
(3)多維陣列操作
s中的陣列跟java中的集合相似，也就是陣列中的元素還是以是陣列
arr = [
[1,2,3],
[4,5,6],
[7,8,9]
]
獲取陣列中的8數字可以：arr[2][1]
2．日期物件
(1)建立方式
- 建立當前日期時間：var date = new Date();
- 建立指定日期時間：var date = new Date(毫秒值);（其中毫秒值為1970-01-01至今的時間毫秒值）
(2)時間的獲取
- 獲得年：getFullYear() 從 Date 物件以四位數字返回年份。
- 獲得月：getMonth() 從 Date 物件返回月份 (0 ~ 11)。
- 獲得星期：getDay() 從 Date 物件返回一週中的某一天 (0 ~ 6)。
- 獲得日：getDate() 從 Date 物件返回一個月中的某一天 (1 ~ 31)。
- 獲得毫秒值 ：getTime() 返回 1970 年 1 月 1 日至今的毫秒數。
yyyy-mm-dd hh:MM:ss
3．Math物件
Math物件是數學物件，是一個工具物件，因此Math物件不用使用new的方式建立，直接使用Math就可以呼叫物件內部的方法。
- abs(x) 返回數的絕對值。
- ceil(x) 對數進行上舍入。
- floor(x) 對數進行下舍入。
- random() 返回 0 ~ 1 之間的隨機數。
- round(x) 把數四捨五入為最接近的整數。
4．RegExp物件（重點）
<script type="text/javascript">
/*
js中的正則表示式要加上^ $;
regExp.test(str);驗證字串的格式
如果驗證成功，那麼返回true，失敗返回false。
* */
var regExp = new RegExp("^\\w{6}$");
var username = "admin";
var res = regExp.test(username);
alert(res);
</script>