JavaWeb之04javaScript基礎&DOM目錄
目錄：
1、案例：在末尾新增節點(*****)
** 建立標籤 createElement方法
** 建立文字 createTextNode方法
** 把文字新增到標籤下面 appendChild方法
2、元素物件(瞭解)
** 如何獲取標籤的子標籤（唯一有效辦法）（*********）
- 使用getElementsByTagName方法
3、Node物件(瞭解)
** 屬性 nodeType nodeName nodeValue
** 記住nodeType值（******）
4、操作DOM樹（********）
* 父節點：parentNode
* appendChild方法
- 新增到末尾
- 剪下黏貼的效果
* insertBefore(新節點,舊節點)
- 通過父節點新增
* removeChild
- 通過父節點刪除
* replaceChild(新節點,舊節點)
- 通過父節點替換
5、innerHTML屬性（*******）
* 獲取文字內容
* 向標籤裡面設定內容（可以設定html程式碼）
==================================================
6、案例：動態顯示時間（******）
- 定時器 setInterval：某個時間內重複執行js程式碼
7、案例：全選練習（******）
- 屬性： checked=true：複選框是選中，false是不選中
8、案例：下拉列表左右選擇（******）
- select下拉列表裡面屬性 multiple：讓下拉框裡面的內容都顯示出來
- 屬性：selected=true：option是選中，false：option不是選中
9、案例：省市聯動（***重點中的重點***）
- 二維陣列：數組裡面加一個數組
- 事件：onchange事件，改變事件
- 方法 add1(this.value)
10、案例：動態生成表格（******）
- innerHTML屬性
- 使用一個變數存html程式碼
- tab += "</table>";
day04
上節內容回顧
1、Date物件裡面
** 獲取當前的月 getMonth(): 返回 0-11
** 獲取當前星期，星期日 返回 0
2、Math物件裡面
** 靜態方法，Math.floor()
3、全域性函式
eval()
4、js裡面的過載
arguments：陣列，儲存引數
5、js的bom裡面物件
navigator screen location history
6、window物件
setInterval和setTimeout
* clearInterval和clearTimeout
* alert confirm prompt close
**open("地址","","寬度高度")：開啟新視窗
* opener：得到建立此視窗的視窗
7、dom解析html
8、物件有哪些？
document物件：整個文件
element物件：標籤
屬性物件
文字物件
Node節點物件
9、document物件
** getElementById
** getElementsByName: 返回陣列
** getElementsByTagName: 返回陣列
** write方法
1、案例一：在末尾新增節點
第一步：獲取到ul標籤
第二步：建立li標籤
document.createElement("標籤名稱")方法
第三步：建立文字
document.createTextNode("文字內容");
第四步：把文字新增到li下面
使用 appendChild方法
第五步：把裡新增到ul末尾
使用 appendChild方法
2、元素物件（element物件）
** 要操作element物件，首先必須要獲取到element，
- 使用document裡面相應的方法獲取
** 方法
*** 獲取屬性裡面的值
getAttribute("屬性名稱")
- var input1 = document.getElementById("inputid");
//alert(input1.value);
alert(input1.getAttribute("value"));
*** 設定屬性的值
input1.setAttribute("class","haha");
*** 刪除屬性
input1.removeAttribute("name");
** 不能刪除value
*** 想要獲取標籤下面的子標籤
** 使用屬性 childNodes，但是這個屬性相容性很差
** 獲得標籤下面子標籤的唯一有效辦法，使用getElementsByTagName方法
- var ul11 = document.getElementById("ulid1");
//獲取ul下面的子標籤
//var lis = ul11.childNodes;
//alert(lis.length);
var lis = ul11.getElementsByTagName("li");
alert(lis.length);
3、Node物件屬性一
* nodeName
* nodeType
* nodeValue
* 使用dom解析html時候，需要html裡面的標籤，屬性和文字都封裝成物件
* 標籤節點對應的值
nodeType： 1
nodeName： 大寫標籤名稱 比如SPAN
nodeValue: null
* 屬性節點對應的值
nodeType： 2
nodeName： 屬性名稱
nodeValue: 屬性的值
* 文字節點對應的值
nodeType： 3
nodeName： #text
nodeValue: 文字內容
4、Node物件的屬性二
<ul>
<li>qqqqq</li>
<li>wwww</li>
</ul>
* 父節點
- ul是li的父節點
- parentNode
- //得到li1
var li1 = document.getElementById("li1");
//得到ul
var ul1 = li1.parentNode;
alert(ul1.id);
* 子節點
- li是ul的子節點
- childNodes：得到所有子節點，但是相容性很差
- firstChild：獲取第一個子節點
- //獲取ul的第一個子節點 id=li1
//得到ul
var ul1 = document.getElementById("ulid");
//第一個子節點
var li1 = ul1.firstChild;
alert(li1.id);
- lastChild：獲取最後一個子節點
//得到最後一個子節點
var li4 = ul1.lastChild;
alert(li4.id);
* 同輩節點
- li直接關係是同輩節點
- nextSibling: 返回一個給定節點的下一個兄弟節點。
previousSibling：返回一個給定節點的上一個兄弟節點。
- //獲取li的id是li3的上一個和下一個兄弟節點
var li3 = document.getElementById("li3");
//alert(li3.nextSibling.id);
alert(li3.previousSibling.id);
5、操作dom樹
** appendChild方法
- 新增子節點到末尾
- 特點：類似於剪下黏貼的效果
** insertBefore(newNode,oldNode)方法
- 在某個節點之前插入一個新的節點
- 兩個引數
* 要插入的節點
* 在誰之前插入
- 插入一個節點，節點不存在，建立
1、建立標籤
2、建立文字
3、把文字新增到標籤下面
- 程式碼
/*
1、獲取到li13標籤
2、建立li
3、建立文字
4、把文字新增到li下面
5、獲取到ul
6、把li新增到ul下面（在<li>貂蟬</li>之前新增 <li>董小宛</li>）
*/
//獲取li3 標籤
var li13 = document.getElementById("li13");
//建立li
var li15 = document.createElement("li");
//建立文字
var text15 = document.createTextNode("董小宛");
//把文字新增到li下面 appendChild
li15.appendChild(text15);
//獲取到ul
var ul21 = document.getElementById("ulid21");
//在<li>貂蟬</li>之前新增 <li>董小宛</li>
//insertBefore(newNode,oldNode)
ul21.insertBefore(li15,li13);
*** 不存在 沒有insertAfter()方法
** removeChild方法：刪除節點
- 通過父節點刪除，不能自己刪除自己
- /*
1、獲取到li24標籤
2、獲取父節點ul標籤
3、執行刪除（通過父節點刪除）
*/
//獲取li標籤
var li24 = document.getElementById("li24");
//獲取父節點
//兩種方式 1、通過id獲取 ； 2、通過屬性 parentNode獲取
var ul31 = document.getElementById("ulid31");
//刪除（通過父節點）
ul31.removeChild(li24);
** replaceChild(newNode,oldNode)方法: 替換節點
- 不能自己替換自己，通過父節點替換
- 兩個引數
** 第一個引數：新的節點（替換成的節點）
** 第二個引數：舊的節點（被替換的節點）
- 程式碼
/*
1、獲取到li34
2、建立標籤li
3、建立文字
4、把文字新增到li下面
5、獲取ul標籤（父節點）
6、執行替換操作 （replaceChild(newNode,oldNode)）
*/
//獲取li34
var li34 = document.getElementById("li34");
//建立li
var li35 = document.createElement("li");
//建立文字
var text35 = document.createTextNode("張無忌");
//把文字新增到li下面
li35.appendChild(text35);
//獲取ul
var ul41 = document.getElementById("ulid41");
//替換節點
ul41.replaceChild(li35,li34);
** cloneNode(boolean): 複製節點
- //把ul列表複製到另外一個div裡面
/*
1、獲取到ul
2、執行復制方法 cloneNode方法複製 true
3、把複製之後的內容放到div裡面去
** 獲取到div
** appendChild方法
*/
//獲取ul
var ul41 = document.getElementById("ulid41");
//複製ul，放到類似剪下板裡面
var ulcopy = ul41.cloneNode(true)
//獲取到div
var divv = document.getElementById("divv");
//把副本放到div裡面去
divv.appendChild(ulcopy);
** 操作dom總結：
* 獲取節點使用方法
getElementById()：通過節點的id屬性，查詢對應節點。
getElementsByName()：通過節點的name屬性，查詢對應節點。
getElementsByTagName()：通過節點名稱，查詢對應節點
* 插入節點的方法
insertBefore方法：在某個節點之前插入
appendChild方法：在末尾新增，剪下黏貼
* 刪除節點方法
removeChild方法：通過父節點刪除
* 替換節點方法
replaceChild方法：通過父節點替換
6、innerHTML屬性
* 這個屬性不是dom的組成部分，但是大多數瀏覽器都支援的屬性
第一個作用：獲取文字內容
*** //獲取span標籤
var span1 = document.getElementById("sid");
alert(span1.innerHTML);
第二個作用：向標籤裡面設定內容（可以是html程式碼）
*** //向div裡面設定內容 <h1>AAAAA</h1>
//獲取到div
var div11 = document.getElementById("div11");
//設定內容
div11.innerHTML = "<h1>AAAAA</h1>";
** 練習 ： 向div裡面新增一個表格
- //向div裡面新增一個表格
//var tab = "<table border='1'><tr><td>aaaaaa</td></tr><tr><td>bbbbbb</td></tr><tr><td>cccccc</td></tr></table>";
var tab = "<table>";
tab += "</table>";
//相當於 var tab = "<table></table>";
div11.innerHTML = tab;
7、案例二：動態顯示時間
* 得到當前的時間
var date = new Date(); //得到不是常規的格式
var d1 = date.toLocaleString(); //格式化
* 需要讓頁面每一秒獲取時間
setInterval方法 定時器
* 顯示到頁面上
每一秒向div裡面寫一次時間
* 使用innerHTML屬性
* 程式碼
function getD1() {
//當前時間
var date = new Date();
//格式化
var d1 = date.toLocaleString();
//獲取div
var div1 = document.getElementById("times");
div1.innerHTML = d1;
}
//使用定時器實現每一秒寫一次時間
setInterval("getD1();",1000);
8、案例三：全選練習
** 使用複選框上面一個屬性判斷是否選中
- checked屬性
- checked=true：選中
- checked=false：不選中
* 建立一個頁面
** 複選框和按鈕
- 四個複選框表示愛好
- 還有一個複選框操作 全選和選不選，也有一個事件
** 三個按鈕，分別有事件
- 全選
- 全不選
- 反選
* 全選操作
步驟：
/*
1、獲取要操作的複選框
- 使用getElementsByName()
2、返回是陣列，
- 屬性 checked判斷複選框是否選中
*** checked = true; //表示選中
*** checked = false;//表示不選中
- 遍歷陣列，得到的是每一個checkbox
* 把每一個checkbox屬性checked=true
*/
* 全不選操作
步驟
/*
1、獲取到要操作的複選框
2、返回的是陣列，遍歷陣列
3、得到每一個複選框
4、設定複選框的屬性 checked=false
*/
* 反選操作
步驟
/*
1、獲取到要操作的複選框
2、返回陣列，遍歷陣列
3、得到每一個複選框
4、判斷當前的複選框是選中還是不選中
- if(love1.checked == true) {}
5、如果選中，屬性checked設定成false，否則，設定成true
*/
* 使用複選框實現全選和全不選
步驟
/*
1、得到上面那個複選框
- 通過id獲取到
2、判斷這個複選框是否是選中
- if條件，checked==true
3、如果是選中，下面是全選
4、如果不是選中，下面是全不選
*/
9、案例四：下拉列表左右選擇
* 下拉選擇框
<select>
<option>111</option>
<option>111</option>
</select>
* 建立一個頁面
** 兩個下拉選擇框
- 設定屬性 multiple屬性
** 四個按鈕，有事件
* 選中新增到右邊
步驟
/*
1、獲取select1裡面的option
- getElementsByTagName()返回是陣列
- 遍歷陣列，得到每一個option
2、判斷option是否被選中
- 屬性 selected，判斷是否被選中
** selected= true: 選中
** selected= false：沒有選擇
3、如果是選中，把選擇的新增到右邊去
4、得到select2
4、新增選擇的部分
- appendChild方法
*/
* 全部新增到右邊
步驟
/*
1、獲取第一個select下面的option物件
2、返回陣列，遍歷陣列
3、得到每一個option物件
4、得到select2
5、新增到select2下面
- appendChild方法
*/
* 選中新增到左邊
步驟
/*
1、獲取select2裡面的option物件
2、返回是陣列，遍歷陣列
3、得到每一個option物件
4、判斷option是否被選中
- if條件 屬性 selected == true：選擇
5、獲取select1
6、新增到select1裡面
- 使用appendChild方法
*/
* 全部新增到左邊
步驟
/*
1、獲取select2裡面的option物件
2、返回是陣列，遍歷陣列
3、得到每一個option物件
4、獲取到select1
5、新增到select1裡面
- 使用appendChild方法
*/
10、案例五：省市聯動
* 建立一個頁面，有兩個下拉選擇框
* 在第一個下拉框裡面有一個事件 ：改變事件 onchange事件
- 方法add1(this.value);表示當前改變的option裡面的value值
* 建立一個二維陣列，儲存資料
* 每個陣列中第一個元素是國家名稱，後面的元素是國家裡面的城市
/*
1、遍歷二維陣列
2、得到也是一個數組（國家對應關係）
3、拿到陣列中的第一個值和傳遞過來的值做比較
4、如果相同，獲取到第一個值後面的元素
5、得到city的select
6、新增過去（使用）appendChild方法
- 建立option（三步）
*/
/*
由於每次都要向city裡面新增option
第二次新增，會追加。
* 每次新增之前，判斷一下city裡面是否有option，如果有，刪除
*/
11、案例六：動態生成表格
*建立一個頁面：兩個輸入框和一個按鈕
*程式碼和步驟
/*
1、得到輸入的行和列的值
2、生成表格
** 迴圈行
** 在行裡面迴圈單元格
3、顯示到頁面上
- 把表格的程式碼設定到div裡面
- 使用innerHTML屬性
*/
//獲取輸入的行和列
var h = document.getElementById("h").value;
var l = document.getElementById("l").value;
//把表格程式碼放到一個變數裡面
var tab = "<table border='1' bordercolor='blue'>";
//迴圈行
for(var i=1;i<=h;i++) {
tab += "<tr>";
//迴圈單元格
for(var j=1;j<=l;j++) {
tab += "<td>aaaaaaa</td>"
}
tab += "</tr>";
}
tab += "</table>";
//alert(tab);
//得到div標籤
var divv = document.getElementById("divv");
//把table的程式碼設定到div裡面去
divv.innerHTML = tab;
}