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;