JavaWeb自学之JavaScript学习笔记 Day-3

1、案例一：在末尾添加节点第一步：获取到ul标签第二步：创建li标签document.createElement("标签名称");第三步：创建文本document.createTextNode("文本内容");第四步：把文本添加到li下面使用appendChild()方法第五步：把li添加到ul末尾使用appendChild()方法代码：//在末尾添加节点function add1(){//获取到ul标签var ul1=document.getElementById("ulid");//创建li标签var li1=document.createElement("li");//创建文本var tex1=document.createTextNode("5555");//把文本加入节点li下面li1.appendChild(tex1);//把li加入到ul下面ul1.appendChild(li1);}2、元素对象(element对象)**要操作element对象，首先必须要获取到element-使用document里面相应的方法获取**方法***获取属性里面的值getAttribute("属性名称")var input1=document.getElementById("inputid");//alert(input1.value);alert(input1.getAttribute("value"));***设置属性里面的值setAttribute("属性名称","属性值")input1.setAttribute("class","haha");***删除属性input1.removeAttribute("name");**不能删除value***想要获取标签下面的子标签**使用属性childNodes,但是这个属性兼容性很差**获得标签下面子标签的唯一有效办法，使用getElementsByTagName方法//获取ul下面的子标签//var lis=ul1.childNodes;//alert(lis.length);var lis=ul1.getElementsByTagName("li");alert(lis.length);3、Node对象属性一*nodeName*nodeType*nodeValue*使用dom解析html时候，需要将html里面的标签、属性和文本都封装成对象*标签节点对应的值nodeType:1nodeName:大写标签名称 比如SPANnodeValue:null*属性节点对应的值nodeType:2nodeName:属性名称nodeValue:属性的值*文本节点对应的值nodeType:3nodeName:#textnodeValue:文本内容4、Node对象属性二<ul><li>aaaa</li><li>bbbbb</li><li>yyyy</li><li>yyyy</li></ul>*父节点-ul是li的父节点-parentNode代码：//得到li1var li1=document.getElementById("li1");//得到ulvar ul1=li1.parentNode;alert(ul1.id);*子节点-li是ul的子节点-childNodes:得到所有子节点，但是兼容性很差-firstChild:获取第一个子节点//获得ul的第一个子节点 id=li1//得到ulvar ul1=document.getElementById("ulid");//第一个子节点var li1=ul1.firstChild;alert(li1.id);-lastChild：获取最后一个子节点//得到最后一个子节点var li4=ul1.lastChild;alert(li4.id);*同辈节点-li与li之间只同辈节点-nextSibling:返回一个给定结点的下一个兄弟节点-previousSibling:返回一个给定结点的上一个兄弟节点//获取li2的上一个和下一个兄弟节点var li2=document.getElementById("li2");alert(li2.nextSibling.id);alert(li2.previousSibling.id);5、操作dom树**appendChild方法-添加子节点到末尾-特点：类似于剪切粘贴的效果**insertBefore(newNode,oldNode)方法-在某个节点之前插入一个新的节点-两个参数*要插入的节点*在谁之前插入-插入一个节点，节点不存在，创建步骤如下：1、创建标签2、创建文本3、把文本添加到标签下面代码：<ul id="ulid1"><li id="lid1">Tom</li><li id="lid2">Marry</li><li id="lid3">Jack</li></ul><input type="button" value="insert" onclick="insert1()"><script type="text/javascript">//在Marry之前添加<li>西施<li>function insert1(){//获得到lid2标签var li2=document.getElementById("lid2");//创建livar li4=document.createElement("li");//创建文本var text4=document.createTextNode("西施");//把文本添加到li里面li4.appendChild(text4);//获取到ulvar ul2=document.getElementById("ulid1");//在节点li之前插入新节点li1,添加到ul2的下面ul2.insertBefore(li4,li2);}*** 没有insertAfter()方法***removeChild()：删除节点-通过父节点删除，不能自己删除自己//删除<li id="lid3">Jack</li>function remove1(){/*1.获取到lid3标签2.获取父节点ul标签3.执行删除(通过父节点删除)*///获取到lid3标签var li3=document.getElementById("lid3");//获取父节点ul标签//两种方式 1、通过id获取 2、通过属性parentNode获取var ul3=document.getElementById("ulid1");//执行删除(通过父节点删除)ul3.removeChild(li3);}***replaceChild(newNode,oldNode):替换节点-不能自己替换自己，通过父节点替换-两个参数**第一个参数：新的节点(替换成的节点)**第二个参数：旧的节点(被替换的节点)//将<li id="lid3">Jack</li>替换成<li>夏以冲</li>function replace1(){/*1.获取到lid3标签2.创建li标签3.创建文本4.把文本添加到li下面5.获得ul标签(父节点)6.执行替换操作 (replaceChild(newNode,oldNode))*///获取到lid4标签var li3=document.getElementById("lid3");//创建li标签var li1=document.createElement("li");//创建文本var text1=document.createTextNode("夏以冲");//把文本添加到li下面li1.appendChild(text1);//获得ul标签(父节点)var ul1=document.getElementById("ulid");//执行替换操作 (replaceChild(newNode,oldNode))ul1.replaceChild(li1,li3);}***cloneNode(boolean):复制子节点function copy1(){//将ul列表复制到另外一个div里面/*1.获取到ul2.执行复制方法cloneNode方法复制 true3.把复制之后的内容放到div里面*获取到div*appendChild方法*///获取ulvar ul=document.getElementById("ulid");//复制ul，放到类似剪切板里面var ulcopy=ul.cloneNode(true);//获取到divvar divv=document.getElementById("divv");//把副本放到div里面去divv.appendChild(ulcopy);}**操作dom总结*获取节点使用方法getElementById():通过节点的id属性，查找对应节点getElementByName():通过节点的name属性，查找对应的节点getElementsByTagName():通过节点名称，查找对应节点*插入节点的方法insertBefore(newNode,oldNode):在某个节点之前插入appendChild(节点):在末尾添加节点，剪切粘贴*删除节点方法removeChild():通过父节点删除，不能自己删除自己*替换节点方法replaceChild(newNode,oldNode):通过父节点替换6、innerHTML属性*这个属性不是dom的组成部分，但是大多数浏览器都支持的属性第一个作用：获取文本内容//获取span标签var span1=document.getElementById("sid");alert(span1.innerHTML);第二个作用：向标签里面设置内容(可以是html代码)//向div里面设置内容<h1>AAAAAAAAA</h1>var div11=document.getElementById("div11");//设置内容div11.innerHTML="<h1>AAAAAAAAA</h1>";**练习：向div里面添加一个表格//向div里面添加一个表格//var tab="<table border='1'><tr><td>aaaaaaa</td></tr><tr><td>bbbbb</td></tr><tr><td>cccccc</td></tr></table>";var tab="<table>";tab +="</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();//获取divvar div1=document.getElementById("times");div1.innerHTML=d1;}//使用定时器实现每一秒写一次时间setInterval("getD1();",1000);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];//设置属性是truelove1.checked=true;}}*全不选function selNo(){//获取要操作的复选框var loves1=document.getElementsByName("love");//遍历数组，得到每一个复选框for(var j=0;j<loves1.length;j++){//得到每一个复选框var love2=loves1[j];//设置属性是falselove2.checked=false;}}*反选function selOther(){/*1、获取要操作的复选框2、返回数组，遍历数组3、得到每一个复选框****4、判断当前的复选框是选中还是不选中-if(love11.checked==true){}5、如果选中，属性checked设置成false；否则，设置成true*///获取要操作的复选框var loves11=document.getElementsByName("love");//遍历数组for(var a=0;a<loves11.length;a++){//得到每一个复选框var love11=loves11[a];//判断当前的复选框是选中还是不选中if(love11.checked==true){//是选中的状态love11.checked=false;}else {//是不选中的状态love11.checked=true;}}}*复选框全选和全不选function selAllNo(){/*1、得到上面那个复选框-通过id获取到2、判断这个复选框是否是选中-if条件，checked==true3、如果是选中，下面是全选4、如果不选中，下面是全不选*///得到上面复选框var box1=document.getElementById("boxid");//判断这个复选框是否是选中if(box1.checked==true){//是选中状态//调用全选方法selAll();}else{//不是选中状态selNo();}}9、案例四：下拉列表左右选择* 下拉选择框<select><option>111</option><option>111</option></select>* 创建一个页面**两个下拉选择框-设置属性multiple属性**四个按钮，有事件*选中添加到右边步骤：/*1、获取select1里面的option-getElementsByTagName-遍历数组，得到每一个option2、判断option是否被选中-属性selected，判断是否被选中**selected=true：选中**selected=false：没有选中3、如果是选中，把选中的添加到右边去4、得到select25、添加选择的部分-appendChild方法*///得到select2var select2=document.getElementById("select2");//得到select1var select1=document.getElementById("select1");//得到option,返回options1数组var options1=select1.getElementsByTagName("option");//遍历数组for(var i=0;i<options1.length;i++){//这里存在一个问题，第一次循环 i=1 length=5//第二次循环 i=2 length=4//第三次循环 i=3 length=3此时循环不会继续执行下去，只能添加两次var option1=options1[i];//得到每一个option//判断option是否被选中if(option1.selected==true){//添加到select2里面select2.appendChild(option1);i--;//保证循环一直进行(i==0)}}*全部添加到右边 (不需要判断option是否被选中)function allToRight(){//获取select1里面的optionvar s1=document.getElementById("select1");//得到select2var s2=document.getElementById("select2");//返回数组，遍历数组var ops=select1.getElementsByTagName("option");//得到每一个option对象for(var j=0;j<ops.length;j++){//获取select里面的optionvar op1=ops[j];//添加到select2下面s2.appendChild(op1);j--;}}*选中添加到左边*全部添加到左边10、案例五：省市联动*创建一个页面，有两个下拉选择框*在第一个下拉框里面有一个事件：改变事件onchange事件-方法add1(this.value)：表示当前改变的option里面的value值*创建一个二维数组，存储数据*每个数组中第一个元素是省名称，后面的元素是省里面的城市/*1、遍历二维数组2、得到也是一个数组(省对应关系)3、拿到数组中的第一个值和传递过来的值作比较4、如果相同，获取到第一个值后面的元素(加到city的select里面)5、得到city的select6、使用append方法添加过去(由于得到的只是值，添加的是option，因此需要创建option)-创建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='red'>";//循环行for(var i=0;i<h;i++){tab+="<tr>";//循环单元格for(var j=1;j<=l;j++){tab +="<td>aaaaaaa</td>";}tab+="</tr>"}tab+="</table>";//得到divv标签var divv=document.getElementById("divv");//把table的代码设置到div里面去divv.innerHTML=tab;