版权声明：斌哥版权，如有雷同，纯属虚构 https://blog.csdn.net/iostream992/article/details/85085215
1、案例一：在末尾添加节点
第一步：获取到ul标签
第二部：创建li标签document.createElement("标签名称")方法
第三部：创建文本
document.createTextNode("文本内容");
第四部：把文本添加到li下面
使用appendChile方法
第五部：添加到ul末尾
使用appendChild方法
2、元素对象（element对象）
要操作element对象，首先必须要获取到element
-使用document里面相应的方法获取
方法
获取属性里面的值
getAttribute（"属性名称"）
设置属性值
setAttribute（"属性名称","属性值"）
Ctrl+f5无缓存刷新
删除属性
removeAttribute（"属性名称"）
不能删除value
不同浏览器解析程度不一样
想要获取标签下面的子标签
使用属性childNodes，但是这个属性兼容性很差
使用标签下面子标签的唯一有效方法，使用getElementsByTagName方法
3、Node对象属性
-nodeName
-nodeType
-nodeValue
-使用dom解析html时候，需要HTML里面的标签、属性和文本都封装成对象
-标签节点对应的值
-属性节点对应的值
-文本节点对应的值
4、Node对象的属性
5、操作dom树
appendChild方法
-添加子节点到末尾
-特点：类似剪切粘贴效果
insertBefore（newNode，oldNode）方法
-在某个节点之前插入一个新的节点
-两个参数
要插入的节点
在谁之前插入
-插入一个节点，节点不存在，创建
1、创建标签
2、创建文本
3、把文本添加到标签下面
removeChild方法：删除节点
只能通过父节点删除
replaceChild（newNode,oldNode）方法：替换节点
-不能主机替换自己，通过父节点替换
-两个参数
--第一个参数：新的节点（替换成的节点）
--第二个参数：旧的节点（被替换的节点）
cloneNode（boolean）：复制节点
操作dom总结
6、innerHTML属性
这个属性不是dom的组成部分，但是大多数浏览器都在支持的属性
--第一个作用：获取文本内容
--第二个作用：向div里面设置内容（可以是html代码）
向div里面添加表格
7、案例二：动态显示时间
得到当前时间
Var date=new Date() ;
Var d1=date。toLocaleString();
需要让页面每一秒获取时间
setInterval方法
显示到页面上
每一秒向div里面写一次时间
使用innerHTML属性
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>
