1、案例一:在末尾添加节点
![](https://i-blog.csdnimg.cn/blog_migrate/ffc23dc855a4ae91a99a38979fc3cc59.png)
第一步:获取到ul标签
第二部:创建li标签document.createElement("标签名称")方法
第三部:创建文本
document.createTextNode("文本内容");
第四部:把文本添加到li下面
使用appendChile方法
第五部:添加到ul末尾
使用appendChild方法
2、元素对象(element对象)
要操作element对象,首先必须要获取到element
-使用document里面相应的方法获取
方法
获取属性里面的值
getAttribute("属性名称")
![](https://i-blog.csdnimg.cn/blog_migrate/3ecb7bd63a6be63fb7a9404dbd8d8a74.png)
设置属性值
setAttribute("属性名称","属性值")
![](https://i-blog.csdnimg.cn/blog_migrate/8f5ae24cd68d30ed5f8d9d540072ee8a.png)
Ctrl+f5无缓存刷新
删除属性
removeAttribute("属性名称")
不能删除value
不同浏览器解析程度不一样
想要获取标签下面的子标签
使用属性childNodes,但是这个属性兼容性很差
使用标签下面子标签的唯一有效方法,使用getElementsByTagName方法
![](https://i-blog.csdnimg.cn/blog_migrate/956042afbcd835fadaa57651297b1b70.png)
3、Node对象属性
-nodeName
-nodeType
-nodeValue
-使用dom解析html时候,需要HTML里面的标签、属性和文本都封装成对象
-标签节点对应的值
![](https://i-blog.csdnimg.cn/blog_migrate/28782e66daac81eef00422965a39b042.png)
-属性节点对应的值
![](https://i-blog.csdnimg.cn/blog_migrate/86288dc8a7792b6c3211f0838dba634d.png)
-文本节点对应的值
![](https://i-blog.csdnimg.cn/blog_migrate/d3925a80b7e93298a70ed21429693b6d.png)
4、Node对象的属性
![](https://i-blog.csdnimg.cn/blog_migrate/35f7e7664597b4d1daa36da0bddb886d.png)
![](https://i-blog.csdnimg.cn/blog_migrate/0c809b2705b62b6bb043a244e38076a5.png)
![](https://i-blog.csdnimg.cn/blog_migrate/b7d0b66554a5701b5c2bd81860704f11.png)
5、操作dom树
appendChild方法
-添加子节点到末尾
-特点:类似剪切粘贴效果
insertBefore(newNode,oldNode)方法
-在某个节点之前插入一个新的节点
-两个参数
要插入的节点
在谁之前插入
-插入一个节点,节点不存在,创建
1、创建标签
2、创建文本
3、把文本添加到标签下面
removeChild方法:删除节点
只能通过父节点删除
![](https://i-blog.csdnimg.cn/blog_migrate/7545d976b6499bbec22e10853b17c45c.png)
replaceChild(newNode,oldNode)方法:替换节点
-不能主机替换自己,通过父节点替换
-两个参数
--第一个参数:新的节点(替换成的节点)
--第二个参数:旧的节点(被替换的节点)
![](https://i-blog.csdnimg.cn/blog_migrate/7ecd9e1a12fdfc2f4c31dedf9fd75f75.png)
cloneNode(boolean):复制节点
![](https://i-blog.csdnimg.cn/blog_migrate/a994b153200ae3d507ee51bcf3ac93ba.png)
操作dom总结
![](https://i-blog.csdnimg.cn/blog_migrate/a657c6cb336bcfbef3f2d2dc31355307.png)
6、innerHTML属性
这个属性不是dom的组成部分,但是大多数浏览器都在支持的属性
--第一个作用:获取文本内容
![](https://i-blog.csdnimg.cn/blog_migrate/8d63e495e86f3a2a831b1f832cb24fbb.png)
--第二个作用:向div里面设置内容(可以是html代码)
![](https://i-blog.csdnimg.cn/blog_migrate/5b4a237bf8352b90172878f1b5258627.png)
向div里面添加表格
![](https://i-blog.csdnimg.cn/blog_migrate/6de1e392e23e1688f0b41e9b6fa31243.png)
![](https://i-blog.csdnimg.cn/blog_migrate/0ebb694d11cb43f0d8bdb0afbf7dac7d.png)
7、案例二:动态显示时间
得到当前时间
Var date=new Date() ;
Var d1=date。toLocaleString();
需要让页面每一秒获取时间
setInterval方法
显示到页面上
每一秒向div里面写一次时间
使用innerHTML属性
![](https://i-blog.csdnimg.cn/blog_migrate/feb38aff77f815a039c324223b266997.png)
8、案例三:全选练习
创建一个页面
复选框和按钮
-四个复选框表示爱好
-还有一个复选框操作全选和全不选
三个按钮
全选
全不选
反选
代码:
<html>
<head>
<title> 全选案例 </title>
</head>
<body>
<input type="checkbox" id="boxid" 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;//表示不选中
-遍历数组,得到的是每一个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(){
/*
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 love2=loves[i];//得到每一个复选框
//设置属性是false
love2.checked=false;
}
}
//实现反选
function selOther(){
/*
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 love3=loves[i];//得到每一个复选框
//如果属性是true改为false
//反之改为true
if(love3.checked==true){
love3.checked=false;
}else {
love3.checked=true;
}
}
}
//全选/全不选
function selNo(){
/*
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 love2=loves[i];//得到每一个复选框
//设置属性是false
love2.checked=false;
}
}
//实现全不选和全选
function selAllNo(){
/*
1、获取上面那个复选框
-通过id获取到
2、判断这个复选框中是否选中
-if条件,checked==true
3、如果是选中,下面是全选
4、如果不是选中,下面是全不选
*/
var box1=document.getElementById("boxid");
if(box1.checked==true){
selAll();
}else{
selNo();
}
}
</script>
</html>
9、案例四:下拉列表左右选择
下拉选择框
<select>
<option></option>
<option></option>
</select>
创建一个页面….
代码如下:
<html>
<head>
<title> 下拉选择框案例 </title>
</head>
<body>
<div id="s1" style="float:left;">
<div>
<select id="select1" multiple="multiple"style="width:100px;height:100px">
<option>1111</option>
<option>2222</option>
<option>3333</option>
<option>4444</option>
<option>5555</option>
<option>6666</option>
</select>
<div>
<input type="button" value="选中添加到右边" onclick="selToRight();"/><br/>
<input type="button" value="全部添加到右边"
onclick="allToRight();"/>
</div>
</div>
</div>
<div id="s2">
<div>
<select id="select2" multiple="multiple"style="width:100px;height:100px">
<option>4444</option>
</select>
<div>
<input type="button" value="选中添加到左边"
onclick="selToLeft();"/><br/>
<input type="button" value="全部添加到左边"
onclick="allToLeft();"/>
</div>
</div>
</div>
</body>
<script type="text/javascript">
//选中添加到右边
function selToRight(){
/*
1、获取select1里面的option
-getElementsByTagName()
遍历数组得到每个option
2、判断是否被选中
-属性selected,判断是否被选中
selected=true被选中
selected=false没有选中
3、如果是选中,把选择的添加到右边去
4、得到select2
5、添加选择的部分
剪切 appendChild方法
*/
//获取select1里面的option
//得到sellect1对象
var select1=document.getElementById("select1");
//得到option
var options1=select1.getElementsByTagName("option");
//遍历数组
for(var i=0;i<options1.length;i++){
var option1=options1[i];//得到每一个option对象
//判断是否被选中
if(option1.selected==true){
select2.appendChild(option1 );
i--;
}
}
}
//选中添加到左边
function selToLeft(){
/*
1、获取select1里面的option
-getElementsByTagName()
遍历数组得到每个option
2、判断是否被选中
-属性selected,判断是否被选中
selected=true被选中
selected=false没有选中
3、如果是选中,把选择的添加到右边去
4、得到select1
5、添加选择的部分
剪切 appendChild方法
*/
//获取select2里面的option
//得到sellect2对象
var select2=document.getElementById("select2");
//得到option
var options2=select2.getElementsByTagName("option");
//遍历数组
for(var i=0;i<options2.length;i++){
var option2=options2[i];//得到每一个option对象
//判断是否被选中
if(option2.selected==true){
select1.appendChild(option2 );
i--;
}
}
}
//全部添加到右边
function allToRight(){
/*
1、获取select1里面的option
-getElementsByTagName()
遍历数组得到每个option
2、判断是否被选中,如果没有选中改为选中
-属性selected,判断是否被选中
selected=true被选中
selected=false没有选中
3、如果是选中,把选择的添加到右边去
4、得到select2
5、添加选择的部分
剪切 appendChild方法
*/
//获取select1里面的option
//得到sellect1对象
var select1=document.getElementById("select1");
//得到option
var options1=select1.getElementsByTagName("option");
//遍历数组
for(var i=0;i<options1.length;i++){
var option1=options1[i];//得到每一个option对象
//判断是否被选中
if(option1.selected==false){
option1.selected=true;
}
if(option1.selected==true){
select2.appendChild(option1 );
i--;
}
}
}
//全部添加到左边
function allToLeft(){
/*
1、获取select1里面的option
-getElementsByTagName()
遍历数组得到每个option
2、判断是否被选中,如果没有选中改为选中
-属性selected,判断是否被选中
selected=true被选中
selected=false没有选中
3、如果是选中,把选择的添加到右边去
4、得到select1
5、添加选择的部分
剪切 appendChild方法
*/
//获取select2里面的option
//得到sellect2对象
var select2=document.getElementById("select2");
//得到option
var options2=select2.getElementsByTagName("option");
//遍历数组
for(var i=0;i<options2.length;i++){
var option2=options2[i];//得到每一个option对象
//判断是否被选中,如果没有选中改为选中
if(option2.selected==false){
option.selected=true;
}
if(option2.selected==true){
select1.appendChild(option2 );
i--;
}
}
}
</script>
</html>
10、案例五:省市联动
![](https://i-blog.csdnimg.cn/blog_migrate/7baaf0b38a582cb277e038d1b7f781e6.png)