1.js的元素对象(elelment对象)
**要操作element对象,首先必须获取到element
----使用document里面的相应的方法(getElementById())
**方法
*****获取属性里面的值
getAttribute("属性名称");
//先要获取input标签 var input1=document.getElementById("inputid"); //alert(input1.value); //alert(input1.getAttribute("value"));
*******设置属性的值
setAttribute("属性名称","属性值")
//setAttribute() alert(input1.setAttribute("class")); input1.setAttribute("class","haha"); alert(input1.getAttribute("class"));
*******删除属性
removeAttribute("属性名称")
---注意:不能删除value
//removeAttribute() alert(input1.getAttribute("name")); input1.removeAttribute("name"); alert(input1.getAttribute("name"));
*******想要获取标签下的子标签
-----使用childNodes属性兼容性很差,不用
------使用唯一获取子标签的有效方法 getElementsByTagName();
<html> <head> <title>Document</title> </head> <body> <ul id="ulid"> <li>111</li> <li>222</li> <li>333</li> <li>444</li> </ul> <br/> <input type="text" id="inputid" value="aaa" name="input1"/> <ul id="ul1"> <li>aaaaaa</li> <li>bbbbbb</li> <li>cccccc</li> <ul> <script type="text/javascript"> //获取ul下的子标签 //获取ul标签 var ul1=document.getElementById("ul1"); //获取ul下的子标签 //var li1=ul1.childNodes; //alert(li1.length); var lis=ul1.getElementsByTagName("li"); alert(lis.length); </script> </body> </html>
3.Node对象属性(1)
****nodeName
****nodeType
****nodeValue
****使用dom解析html时,需要html里面的标签,属性和文本封装成对象
****标签节点对应的值
nodeType:1
nodeName:大写的标签名称 比如SPAN
nodeValue:null
****属性节点对应的值
nodeType:2
nodeName:属性名称
nodeValue:属性的值
****文本节点对应的值
nodeType:3
nodeName:#text
nodeValue:文本内容
4.Node对象的属性(2)
****父节点:例如ul是li的父节点
---parentNode属性
//得到li var li1=document.getElementById("111"); //得到ul var ul1=li1.parentNode; alert(ul1.id);
****子节点; li是ul的子节点
--childNodes:得到所有子节点,兼容性差
--firstChild:获取第一个子节点
//获取ul的第一个子节点 var ul1=document.getElementById("ulid"); var li1=ul1.firstChild; alert(li1.id);
--lastChild:获取最后一个字节点
var ul1=document.getElementById("ulid"); var lilast=ul1.lastChild; alert(lilast.id);
****同辈节点: li之间的关系是同辈节点
--nextSibling :返回一个给定节点的下一个兄弟节点
--previousSibling:返回一个给定节点的上一个兄弟节点
//获取li的id是li3的上一个兄弟节点和下一个兄弟节点 var li3=document.getElementById("113"); //alert(li3.nextSibling.id); alert(li3.previousSibling.id);
5.操作dom树
******appendChild方法
----添加子节点到节点末尾
-----特点:类似与剪切黏贴的效果(把一个剪切到另一个)
<style type="text/css"> #div1 { width:200px; height:100px; border:2px solid red; } #div2{ width:250px; height:150px; border:5px dashed green; } </style> </head> <body> <div id="div1"> <ul id="ulid11"> <li>tom</li> <li>mary</li> <li>jack</li> <ul> </div> <div id="div2"></div> <input type="button" value="提交" onclick="add1();"/> </body> <script type="text/javascript"> function add1(){ //得到div2 var div2=document.getElementById("div2"); //获取ul var ul=document.getElementById("ulid11"); //把ul添加到div2中 div2.appendChild(ul); } </script> </html>
****** insertBefore(newNode,oldNode);方法
-----在摸个节点之前插入一个新的节点
-----两个参数:
****要插入的节点
****新的节点
-----新的节点不存在需要创建
1.创建标签
2.创建文本
3.把文本添加到标签下面
<body> <ul id="ulid21"> <li id="li11">西施</li> <li id="li12">王昭君</li> <li id="li13">貂禅</li> <li id="li14">杨玉环</li> </ul> <input type="button" value="提交" onclick="insert1();"/> </body> <script type="text/javascript"> function insert1(){ //在<li>貂禅</li>之前添加<li>董小宛</li> /* 1.获得li13标签 2.创建li 3.创建文本 4.把文本添加到li下面 5.获取到ul 6.把li添加到ul下面(放到貂禅之前) */ //获得li13标签 var li13= document.getElementById("li13"); //创建li var li15=document.createElement("li"); //创建文本 var text15=document.createTextNode("董小宛"); //把文本添加到li下面 li15.appendChild(text15); //获取到ul var ulid21=document.getElementById("ulid21"); //把li添加到ul下面(放到貂禅之前) 通过父节点添加 ulid21.insertBefore(li15,li13); } </script>
******不存在insertAfter();
******removeChild();父节点删除子节点
<body> <ul id="ulid31"> <li id="li21">西施</li> <li id="li22">王昭君</li> <li id="li23">貂禅</li> <li id="li24">杨玉环</li> </ul> <input type="button" value="remove" onclick="remove1();"/> </body> <script type="text/javascript"> function remove1(){ /* 1.获取到li24的标签 2.获取到父节点ul标签 3.通过ul来删除li(父节点删除子节点) */ //获取到li24的标签 var li24=document.getElementById("li24"); //获取到ul标签 //两种方式1.通过id2.通过parentNode获取 var ulid31=document.getElementById("ulid31"); //通过ul来删除li(父节点删除子节点) ulid31.removeChild(li24); } </script> </html>
********replaceChild(newNode,oldNode)方法; 父节点替换子节点
----参数:1.新的节点2.被替换的节点
-----注意:自己不能替换自己,得通过父节点
<body> <ul id="ulid41"> <li id="li31">紫衫龙王</li> <li id="li32">白眉鹰王</li> <li id="li33">金毛狮王</li> <li id="li34">青翼蝠王</li> </ul> <input type="button" value="replace" onclick="replace1();"/> </body> <script type="text/javascript"> //把<li id="li34">青翼扶王</li>替换成<li id="li34">张无忌</li> function replace1(){ /* 1.获取到<li id="li34">青翼扶王</li> 2.创建新的标签li 3.创建文本(张无忌) 4.把文本添加到新标签li下面 5.获取父节点ul 5.执行替换操作,replaceChild() */ //获取到<li id="li34">青翼扶王</li> var li34=document.getElementById("li34"); //创建新的标签li var li=document.createElement("li"); //创建文本(张无忌) var text=document.createTextNode("张无忌"); //把文本添加到新标签li下面 li.appendChild(text); //获取父节点ul(2种方法)1.通过id 2.通过parentNode属性 var ulid41=document.getElementById("ulid41"); //执行替换操作,replaceChild() ulid41.replaceChild(li,li34); } </script>
******cloneNode(boolean):复制节点(boolean类型表示是否复制子节点)
<body> <ul id="ulid41"> <li id="li31">紫衫龙王</li> <li id="li32">白眉鹰王</li> <li id="li33">金毛狮王</li> <li id="li34">青翼蝠王</li> </ul> <div id="divv"> </div> <input type="button" value="cope" onclick="cope1();"/> </body> <script type="text/javascript"> function cope1(){ //把ul的列表复制到div里面 /* 1.获取到ul 2.执行复制方法cloneNode(true); 3.把复制之后的内容方法div中 *****获取到div ******appendChild */ //获取到ul var ul= document.getElementById("ulid41"); //执行复制方法cloneNode(true) 复制ul到类似剪切板的地方 var ulcope=ul.cloneNode(true); //获取到div var div=document.getElementById("divv"); //把副本放到div中 div.appendChild(ulcope); } </script>
******操作dom树的总结
****获取节点的方法
1.getElementById():通过id属性查找对应节点
2.getElementsByName():通过name的属性获取对应节点
3.getElementsByTagName():通过节点名称来获取对应的节点 ****插入节点的方法
1.insertBefore() 在某个节点之前插入
2.appendChild() 在末尾添加,相当于剪切黏贴
*****删除节点
1.removeChild():通过父节点删除
*****替换节点
1.replaceChild():替换节点
6.innerHTML属性
***这个属性不是dom的组成部分,但是大部分浏览器都支持的属性
第一个作用:获取文本内容
<body> <span id="sid">哈哈呵呵</span> </body> <script type="text/javascript"> //获取span标签 var span=document.getElementById("sid"); alert(span.innerHTML); </script>
第二个作用:向标签里面设置内容(可以是html代码)
<html> <head> <title>Document</title> <style type="text/css"> #div11 { width:200px; height:150px; border:2px dashed red; } </style> </head> <body> <span id="sid">哈哈呵呵</span> <div id="div11"> </div> </body> <script type="text/javascript"> /*//获取span标签 var span=document.getElementById("sid"); alert(span.innerHTML);*/ //向div中添加内容<h1>AAAAAA</h1> //获取div var div11=document.getElementById("div11") div11.innerHTML="<h1>AAAAAA</h1>"; </script> </html>***练习:向div中添加表格
<html> <head> <title>Document</title> <style type="text/css"> #div11 { width:200px; height:150px; border:2px dashed red; } </style> </head> <body> <div id="div11"> </div> </body> <script type="text/javascript"> //向div中添加内容表格 //获取div var div11=document.getElementById("div11") var table="<table border='1'><tr><td>aaaaaa</td></tr><tr><td>bbbbbbb</td></tr><tr><td>ccccccc</td></tr></table>"; div11.innerHTML=table; </script> </html>
7.案例:动态显示时间
**得到当前的时间
var date=new Date();
date.toLocaleString();
**需要让每一秒得到时间
setInterval("js代码",毫秒数)
**显示在页面上
**每一秒在div中显示时间
innerHTML属性
<html> <head> <title>Document</title> </head> <body> <div id="times"><div> </body> <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> </html>
8:案例:全选练习
***复选框上面一个属性判断是否选中
---checked属性
---checked=true;选中
----checked=false;不选中
**创建一个页面
****复选框和按钮
---四个复选框表示爱好
---还有一个复选框全选和全部选(有一个事件)
----三个按钮(按钮上都有时间)
-全选
-全部选
-反选
****全选步骤:
/*
1.获取操作的复选框
---getElementsByName()
2.返回数组
---属性 checked判断复选框是否选中
****checked=true表示选中
*****checked=false表示每选中
---遍历数组
***把每个checked变更成true
*/
*****全不选步骤
/*
1.获取操作的复选框
---getElementsByName()
2.返回数组
---属性 checked判断复选框是否选中
****checked=true表示选中
*****checked=false表示每选中
---遍历数组
***把每个checked变更成false
*/
****反选步骤
/*
1.获取操作的复选框
2.返回数组,遍历数组
3.得到一个复选框
4.判断当前的复选框是选中还是补选中
*/
代码如下:
<body> <input type="checkbox" id="box1" onclick="selAllNo();"/>全选/全不选<br/> <input type="checkbox" name="love"/>篮球 <input type="checkbox" name="love"/>排球 <input type="checkbox" name="love"/>羽毛球 <input type="checkbox" name="love"/>足球 <br/> <input type="button" value="全选" onclick="selAll();"/> <input type="button" value="全不选" onclick="selNo();"/> <input type="button" value="反选" onclick="selOther();"/> </body> <script type="text/javascript"> //全选 function selAll(){ /* 1.获取操作的复选框 ---getElementsByName() 2.返回数组 ---属性 checked判断复选框是否选中 ****checked=true表示选中 *****checked=false表示每选中 ---遍历数组 ***把每个checked变更成true */ //获取操作的复选框 var loves=document.getElementsByName("love"); //遍历数组 for(var i=0;i<loves.length;i++){ var love1=loves[i]; //得到一个复选框 love1.checked=true; //赋值为true } } //全不选 function selNo(){ /* 1.获取操作的复选框 ---getElementsByName() 2.返回数组 ---属性 checked判断复选框是否选中 ****checked=true表示选中 *****checked=false表示每选中 ---遍历数组 ***把每个checked变更成false */ //获取操作的复选框 var loves=document.getElementsByName("love"); //遍历数组 for(var i=0;i<loves.length;i++){ var love1=loves[i]; love1.checked=false; } } //反选 function selOther(){ /* 1.获取操作的复选框 2.返回数组,遍历数组 3.得到一个复选框 4.判断当前的复选框是选中还是补选中 */ //获取操作的复选框 var loves=document.getElementsByName("love"); //返回数组,遍历数组 for(var i=0;i<loves.length;i++){ //得到一个复选框 var love1=loves[i]; //判断当前的复选框是选中还是补选中 if(love1.checked==true){ love1.checked=false; }else{ love1.checked=true; } } } //实现全选和全不选 function selAllNo(){ /* 1.得到上面的复选框 2.判断是否被选中 3。如果是选中,下面全选 4.如果是不是选中,下面全不选 */ //得到上面的复选框 var box1=document.getElementById("box1"); //判断是否被选中 if(box1.checked==true){//选中 //调用全选 selAll(); }else{//每选中 //全不选 selNo(); } } </script>
9.案例:下拉列表左右选择
****下拉选择框
<select>
<option>111<option>
</select>
*****创建一个页面
****两个复拉选择框
****两个按钮
******选中添加到右边步骤:
/*
1.获取slelect1里面的option
--getElementsByTagName()返回数组
2.判断是否本选中
--属性:selected 判断是否被选中
selected=true; 选中
selected=false;没选中
3.把选择的添加到右边去
4.得到select2
5.添加选中的部分appendChild()
*/
*******全选添加到右边步骤:
/*
1.获取第一个select下的option对象
2.遍历数组
3.得到每一个option对象
4。得到select2
5.添加到select2下面
---appendChild方法
*/
******选中添加到左边
/*
1.获取select2中的option
2.返回数组遍历数组
3.得到每个option
4.判断option是否被选中
5.获取select1
6.添加到select1中
*/
*******全部添加到左边
/*
1.获取select2中的option
2.返回数组遍历数组
3.得到每个option
4.获取select1
5.添加到select中
*/
<body> <div id="s1" style="float:left"> <div> <select id="select1"multiple="multiple" style="width:100px;height:100px"> <option>AAAAAAAA</option> <option>BBBBBBBB</option> <option>CCCCCCCC</option> <option>DDDDDDDD</option> <option>EEEEEEEE</option> </select> </div> <div> <input type="button" value="选中添加到右边" onclick="selToRight();"/><br/> <input type="button" value="全部添加到右边" onclick="allToRight();"/> </div> </div> <div id="s2"> <div> <select id="select2" multiple="multiple" style="width:100px;height:100px"> <option>QQQQQQQQQ</option> </select> </div> <div> <input type="button" value="选中添加到左边 "onclick="selToLeft();"/><br/> <input type="button" value="全部添加到左边" onclick="allToLeft();"/> </div> </div> </body> <script type="text/javascript"> //选中添加到右边 function selToRight(){ /* 1.获取slelect1里面的option --getElementsByTagName()返回数组 2.判断是否本选中 --属性:selected 判断是否被选中 selected=true; 选中 selected=false;没选中 3.把选择的添加到右边去 4.得到select2 5.添加选中的部分appendChild() */ //获取slelect1里面的option //获取select2 var select2=document.getElementById("select2"); var select1=document.getElementById("select1"); var options=select1.getElementsByTagName("option"); //遍历数组 for(var i=0;i<options.length;i++){ var option1=options[i]; //判断是否被选中 if(option1.selected==true){ //添加到select2中 select2.appendChild(option1); i--; } } } //全部添加到右边 function allToRight(){ /* 1.获取第一个select下的option对象 2.遍历数组 3.得到每一个option对象 4。得到select2 5.添加到select2下面 ---appendChild方法 */ //获取第一个select下的option对象 //获得第二个selelct var select2=document.getElementById("select2"); var select1=document.getElementById("select1"); var options=select1.getElementsByTagName("option"); //遍历数组 for(var i=0;i<options.length;i++){ //得到每个option对象 var option1=options[i]; //把option添加到select2 select2.appendChild(option1); i--; } } //选中添加到左边 function selToLeft(){ /* 1.获取select2中的option 2.返回数组遍历数组 3.得到每个option 4.判断option是否被选中 5.获取select1 6.添加到select1中 */ //获取select2中的option //获取select1 var select1=document.getElementById("select1"); var select2=document.getElementById("select2"); //得到option var options=select2.getElementsByTagName("option"); //遍历数组 for(var i=0;i<options.length;i++){ //得到每个option var option1=options[i]; //判断 if(option1.selected==true){//被选中 //添加到select1 select1.appendChild(option1); i--; } } } //全部添加到左边 function allToLeft(){ /* 1.获取select2中的option 2.返回数组遍历数组 3.得到每个option 4.获取select1 5.添加到select中 */ //获取select1 var select1=document.getElementById("select1"); //获取select2中的option var select2=document.getElementById("select2"); var options=select2.getElementsByTagName("option"); //遍历 for(var j=0;j<options.length;j++){ var option1=options[j]; select1.appendChild(option1); j--; } } </script> </html>
10.案例:省市联动
*****创建一个页面,有两个下拉选择框
******在第一个下拉框中有一个onchange事件:改变事件onchange
----方法add1(this.value):表示当前改变的value的值
*******创建一个二维数组,存储数据
****每个数组中第一个元素是国家名称
/*
1.遍历二维数组
2.得到国家的对应关系
3.拿到数组中的第一个值和传递过来的值比较
4.如果相同,获取到第一个值后面的元素
5.得到city的select
6.添加过去,使用appendChild方法
--创建option(三步)
1.创建标签2.创建文本3.把文本添加到标签中
*/
注意:每次添加以前添加的都没有删除还会存在,所以在每次添加前,要清空option,使用父节点.removeChild
<!doctype html> <html lang="en"> <head> <title>Document</title> </head> <body> <select id="country" onchange="add1(this.value);"> <option value="0">请选择</option> <option value="中国">中国</option> <option value="美国">美国</option> <option value="德国"">德国</option> <option>日本</option> </select> <select id="city"> </select> </body> <script type="text/javascript"> //创建一个数组来存这个数据(二维数组) var arr=new Array(4); arr[0]=["中国","南京","抚州","临洮","日哈这","哈密"]; arr[1]=["美国","华盛顿","底特律","休士顿","纽约"]; arr[2]=["德国","慕尼黑","柏林","法兰克福","狼堡"]; arr[3]=["日本","东京","北海道","大阪","广岛"]; function add1(val){ //alert(val); /* 1.遍历二维数组 2.得到国家的对应关系 3.拿到数组中的第一个值和传递过来的值比较 4.如果相同,获取到第一个值后面的元素 5.得到city的select 6.添加过去使用appendChild方法 --创建option(三步) */ //获取city的select var cityid=document.getElementById("city"); //获取option var options=cityid.getElementsByTagName("option"); //遍历 for(var i=0;i<options.length;i++){ var op=options[i];//得到每个option //删除option cityid.remove(op); i--; } //遍历二维数组 for(var i=0;i<arr.length;i++){ //得到二维数组里面的 var arr1=arr[i]; //得到遍历之后数组的第一个值 var firstvalue=arr1[0]; //判断传过来的值和它是否相同 if(firstvalue==val){ //得到0后面的值 //遍历arr1 for(var j=1;j<arr1.length;j++){ var valuel=arr1[j]; //得到城市的名称 //alert(valuel); //添加值到city1的select中 //创建option var option1=document.createElement("option"); //创建文本 var text1=document.createTextNode(valuel); //把文本添加到option option1.appendChild(text1); //把option添加到select cityid.appendChild(option1); } } } } </script> </html>
11.案例:动态生成表格
***创建一个页面:两个输入框和一个按钮
***代码和步骤
<!doctype html> <html lang="en"> <head> <title>Document</title> </head> <body> 行:<input type="text" id="h"/> 列:<input type="text" id="l"/> <br/> <input type="button" value="生成" onclick="add2();"/> <div id="divv"> </div> </body> <script type="text/javascript"> function add2(){ /* 1.得到输入行和列的值 2.生成表格 **循环行 **在行里面循环列 3.显示到页面上 --把表格的代码设置到div中 --使用innerHTML属性 */ //得到输入行和列的值 var h=document.getElementById("h").value; var l=document.getElementById("l").value; //把表格代码放到一个面量里面 var tab="<table border='1'>"; //循环行 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 div=document.getElementById("divv"); //把table的代码设置到div中 div.innerHTML=tab; } </script> </html>