JavaWeb筆記四：js&DOM二

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;