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:1
nodeName:大写标签名称 比如SPAN
nodeValue:null
*属性节点对应的值
nodeType:2
nodeName:属性名称
nodeValue:属性的值
*文本节点对应的值
nodeType:3
nodeName:#text
nodeValue:文本内容
4、Node对象属性二
<ul>
<li>aaaa</li>
<li>bbbbb</li>
<li>yyyy</li>
<li>yyyy</li>
</ul>
*父节点
-ul是li的父节点
-parentNode
代码： //得到li1
var li1=document.getElementById("li1");
//得到ul
var ul1=li1.parentNode;
alert(ul1.id);
*子节点
-li是ul的子节点
-childNodes:得到所有子节点，但是兼容性很差
-firstChild:获取第一个子节点
//获得ul的第一个子节点 id=li1
//得到ul
var 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" οnclick="insert1()">
<script type="text/javascript">
//在Marry之前添加<li>西施<li>
function insert1(){
//获得到lid2标签
var li2=document.getElementById("lid2");
//创建li
var li4=document.createElement("li");
//创建文本
var text4=document.createTextNode("西施");
//把文本添加到li里面
li4.appendChild(text4);
//获取到ul
var 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.获取到ul
2.执行复制方法cloneNode方法复制 true
3.把复制之后的内容放到div里面
*获取到div
*appendChild方法
*/
//获取ul
var ul=document.getElementById("ulid");
//复制ul，放到类似剪切板里面
var ulcopy=ul.cloneNode(true);
//获取到div
var 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();
//获取div
var 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];
//设置属性是true
love1.checked=true;
}
}
*全不选
function selNo(){
//获取要操作的复选框
var loves1=document.getElementsByName("love");
//遍历数组，得到每一个复选框
for(var j=0;j<loves1.length;j++){
//得到每一个复选框
var love2=loves1[j];
//设置属性是false
love2.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==true
3、如果是选中，下面是全选
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
-遍历数组，得到每一个option
2、判断option是否被选中
-属性selected，判断是否被选中
**selected=true：选中
**selected=false：没有选中
3、如果是选中，把选中的添加到右边去
4、得到select2
5、添加选择的部分
-appendChild方法
*/
//得到select2
var select2=document.getElementById("select2");
//得到select1
var 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里面的option
var s1=document.getElementById("select1");
//得到select2
var s2=document.getElementById("select2");
//返回数组，遍历数组
var ops=select1.getElementsByTagName("option");
//得到每一个option对象
for(var j=0;j<ops.length;j++){
//获取select里面的option
var op1=ops[j];
//添加到select2下面
s2.appendChild(op1);
j--;
}
}
*选中添加到左边
*全部添加到左边
10、案例五：省市联动
*创建一个页面，有两个下拉选择框
*在第一个下拉框里面有一个事件：改变事件onchange事件
-方法add1(this.value)：表示当前改变的option里面的value值
*创建一个二维数组，存储数据
*每个数组中第一个元素是省名称，后面的元素是省里面的城市
/*
1、遍历二维数组
2、得到也是一个数组(省对应关系)
3、拿到数组中的第一个值和传递过来的值作比较
4、如果相同，获取到第一个值后面的元素(加到city的select里面)
5、得到city的select
6、使用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;
扫一扫
02-07
191
191
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
