day04 元素对象 Node对象 操作DOM树及案例

day04
1.案例一：在末尾添加节点
第一步：获取到ul标签
第二部：创建li标签
document.createElement("标签名称")方法
第三部:创建文本
document.createTextNode("文本内容");
第四步：把文本添加到li的下面


使用appendChild方法
第五步：把li添加到ul的末尾
使用appendchild方法
function add1(){
//获取ul标签
var ul1 = document.getElementById("ulid");
//创建标签
var li1 = document.createElement("li");
//创建文本
var text1 = document.createTextNode("55555");
//把文本加入到li的下面
li1.appendChild(text1);
//把li加入到ul下面
ul1.appendChild(li1);
}


2.元素对象（element对象）
**要操作element对象，首先必须获取element对象
-使用document里面相应的方法获取


**方法
***获取属性里面的值
getAttribute("属性的名称")
-var input1 = document.getElementById("inputid");
//alert(input1.value);
alert(input1.getAttribute("value"));


**设置属性的值
-input1.setAttribute("class","hha" );


**删除属性
-input1.removeAttribute("name");
**不能删除value


***想要获取标签下面的子标签
**使用属性  childNodes,但是这个属性兼容性很差
**获得标签下面的自标签的唯一有效办法，使用getElementsByTagName方法
//获取ul下面的所有标签（子元素）
//获取ul标签
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: 属性的名称  id
nodeType:属性的值  spanid
*文本节点对应的值
nodeType:3
nodeName:#text
nodeValue:文本内容


4.Node对象的属性二
<ul>
<li>qqq</li>
<li>www</li>
</ul>
*父节点
-ul是li的父节点
-parentNode
-//得到li1
var li1 = document.getElementById("li1");
//得到ul
var ul1 = li1.parentNode;
alert(ul1.id);


*子节点
-li是ul的子节点
-childNodes:得到子节点，但是兼容性很差


-firstElementChild:获取第一个子节点
-lastElementChild:获取最后一个子节点
var ul1 = document.getElementById("ulid");
var li1 = ul1.firstElementChild;
alert(li1.id);


*同辈节点
-li之间的关系是同辈节点
-nextElementSibling:返回一个给定节点的下一个兄弟节点
previousElementSibling:返回一个给定节点的上一个兄弟节点
-var ul1 = document.getElementById("ulid");
//获取li3的上一个兄弟节点和下一个兄弟节点
var li3 = document.getElementById("li3");
alert(li3.nextElementSibling.id);
alert(li3.previousElementSibling.id);


5.操作dom树
** appendChild方法
-添加子节点到末尾
-特点:类似于剪切黏贴的效果


** insertBefore(newNode,oldNode)方法
-在某个节点之前插入一个新的节点
-两个参数
* newNode:要插入的节点
* oldNode:在谁之前插入


-插入一个节点，节点不存在，创建
1.创建标签
2.创建文本
3.把文本添加到标签的下面
/*
1.获取到li3标签
2.创建li
3.创建文本
4.把文本添加到li的下面
5.获取到ul
6.把li添加到ul的下面 （在貂蝉之前添加<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>
//insertBefore(newNode,oldNode)
ul21.insertBefore(li15,li13);


*** 不存在 没有insertAfter()方法


**removeChild方法:删除节点
-通过父节点删除，不能自己删除自己
/*
1.获取li24标签
2.获取父节点ul标签
3.执行删除(通过父节点删除)
*/
var li21 = document.getElementById("li24");
//获取父节点
//两种方式 1.通过id获取  2.通过属性parentNode获取
var ul31 = document.getElementById("ul31");
//执行删除（通过父节点）
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");
var li35 = document.createElement("li");
var text = document.createTextNode("张无忌");
li35.appendChild(text);
var ul14 = document.getElementById("ul41");
ul14.replaceChild(li35,li34);


**cloneNode(boolean):复制节点
//把ul列表复制到另外一个div里面
/*
1.获取到ul
2.执行复制方法 用cloneNode()复制 参数为true
3.把复制的内容放到div中去
**获取div
**appendChild方法
*/
var ul51 = document.getElementById("ul51");
var ulcopy = ul51.cloneNode(true);   //复制ul,放到类似于剪贴板里面
//获取div
var divv = document.getElementById("divv");
//把副本放到div里面去
divv.appendChild(ulcopy);


**操作dom的总结
*获取节点使用方法
getElementById():通过节点的id属性，查找对应节点
getElementByName():通过节点的name属性，查找对应节点
getElementByTagName():通过节点名称，查找对应节点
*插入节点的方法
insertBefore方法:在某个节点之前插入
appendChild方法:在末尾添加，相当于剪切粘贴
*删除节点
removeChild方法:通过父节点删除
*替换节点
replaceChild:通过父节点删除

6.innerHTML属性
*这个属性不是dom的组成部分，但是大多数浏览器都支持的属性


第一个作用:获取文本的内容
//获取span标签
var span1 = document.getElementById("sid");
alert(span1.innerHTML);


第二个作用:向标签里面设置内容(可以是html代码)
//向div里面设置内容<h1>aa</h1>
var div1 = document.getElementById("div11");
div11.innerHTML = "<h1>AAAA</h1>";


**练习：向div中添加一个表格
//向div中添加一个表格
//div11.innerHTML = "<table border='2px'><tr><td></td><td></td></tr><tr><td></td><td></td></tr></table>";
var tab = "<table>";
tab += "</table>"  //相当于tab = "<table></table>";
div11.innerHTML = tab;


7.案例二：动态显示时间
* 得到当前时间
var date = new Date();
var d1 = date.toLocaleString();
* 需要让页面每一秒获取时间
setInterval方法  定时器
* 显示到页面上
每一秒向div里面写一次时间
*使用innerHTML属性
*代码
*<div id="times">

</div>
<script type="text/javascript">
function getD1(){
//当前时间
var date = new Date();
//格式化
var d1 = date.toLocaleString();
//获取div
var div1 = document.getElementById("times");
div1.innerHTML = d1;
}
//使用定时器实现每一秒写一次时间
setInterval("getD1();","1000");
</script>


8.案例三:全选练习
**使用复选框的属性判断是否选中
-checked属性
-checked=true:选中
-checked=false:不选中
*创建页面
**复选框和按钮
- 四个复选框表示爱好
- 还有一个复选框操作全选和全不选，也有一个事件


**三个按钮，分别有事件
-全选
-全不选
-反选
*全选操作
步骤： //实现全选的操作
function selAll(){
/*
1.获取要操作的复选框
-使用getElementsByName()
2.返回的是数组
-属性 checked判断复选框是否被选中
***checked=true;//表示选中
***checked=false;//表示不选中
-遍历数组，得到每一个checkbox
*把每一个checkbox属性checked=true
*/
//获取要操作的复选框
var loves = document.getElementsByName("love");
//遍历数组得到每一个复选框
for(var i = 0;i<loves.length;i++){
var love1 = loves[i];   //得到每一个复选框
//设置属性值是true
love1.checked = true;
}
}


*全不选
//全不选
function selNo(){
var loves = document.getElementsByName("love");
for(var i = 0;i<loves.length;i++){
var love2 = loves[i];
love2.checked = false;
}
}


*反选
//反选
function selOther(){
var loves = document.getElementsByName("love");
for(var i = 0;i<loves.length;i++){
love3 = loves[i];
if(love3.checked == true){  //两个等号表示判断
love3.checked = false;
}
else if(love3.checked == false){
love3.checked = true;
}
}
}


* 使用复选框实现全选和全不选
//全选全不选
function selAllNo(){
/*
1.得到复选框
-通过id获取到
2.判断这个复选框是否被选中
-if条件，checked==true
3.如果是选中，把下面的复选框的checked全部赋值为true 
*/
var box = document.getElementById("boxid");
var loves = document.getElementsByName("love");
if(box.checked==true){
selAll();   //全选   直接调用方法
}
else if(box.checked==false){
selNo();     //全不选
}
}

9.案例四：下拉列表左右选择
* 下拉选择框
<select>
<option></option>
<option></option>
<option></option>
</select>
* 创建一个页面
**两个下拉选择框
-设置属性 multiple属性
**四个按钮，有事件


* 选中添加到右边
步骤
//选中添加到右边
function selToRight(){
/*
1.获取select1中的option
-getElementsByTagName()
-遍历数组，得到每一个option
2.判断option是否被选中
-属性 selected,判断是否 被选中
** selected==true:选中
** selected==false:没有选中
3.如果是选中，将被选中的添加到右边去
4.得到select2
5.添加选择的部分
-appendChild方法
*/
//获取select2
var select2 = document.getElementById("select2");
//获取select1
var select1 = document.getElementById("select1");
//得到option
var options1 = select1.getElementsByTagName("option");
//得到option
var options2 = select2.getElementsByTagName("option");
//遍历数组
for(var i = 0;i<options1.length;i++){
//如果不执行i--
//第一次循环  i = 0; length:5
//第一次循环  i = 0; length:4
//第一次循环  i = 0; length:3
var option1 = options1[i];   //得到每一个option对象
//判断是否被选中
if(option1.selected == true){
select2.appendChild(option1);
i--;
}
}


全部添加到右边
//全部添加到右边
function allToRight(){
/*
1.获取select下面得option
2.返回数组，遍历数组
3.得到每一个option对象
4.得到select2
5.添加到select2下面
-appendChild方法
*/


//得到select下面得option对象
var s1 = document.getElementById("select1");
//得到select2
var s2 = document.getElementById("select2");


var ops = s1.getElementsByTagName("option");    //返回得是数组
//遍历数组
for(var i = 0;i<ops.length;i++){
//得到每一个option对象
var op1 = ops[i];
//添加option到s2下面去
s2.appendChild(op1);
i--;


}
}


10.案例五：省市联动
*创建一个页面，只有两个下拉选择框
*在第一哥下拉框里面有一个事件：改变事件onchange事件
-方法add1(this.value)   //表示当前改变的option里面的value值
*创建一个二维数组，存储数据
*每个数组中的第一个元素是国家的名称，后面是国家的城市
* //alert(val);
/*
1.遍历二维数组
2.得到也是数组（国家对应关系）
3.拿到数组中的第一个值和传递过来的值做比较
4.如果相同，获取到第一哥值后面的元素
5.得到city的select
6.添加过去（使用）appendChild方法
-创建option（三步）
*/


/*
由于每次都要向city中添加option
第二次添加，追加


*每次添加之前判断一下city中是否有option如果有，删除，没有才添加
*/


11.案例六：动态生成表格
*创建一个页面：两个输入框和一个按钮


*代码和步骤
function add1(){
/*
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>aaaa</td>";
}
tab += "</tr>";
}
tab += "</table>";



//得到div标签
var divv = document.getElementById("divv");
//把table的代码设置到div中去
divv.innerHTML = tab;
}