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>
