今日内容概要：
1、案例一：在末尾添加节点
<html>
<head>
<title>HTML示例</title>
<style type="text/css">
div{
width:200px;
height:200px;
border:2px solid red;
}
</style>
</head>
<body>
<div>
<ul id="ulid">
<li>111</li>
<li>222</li>
<li>333</li>
<li>444</li>
</ul>
</div>
<div id="div1">
</div>
<br/>
<input type="button" value="add" onclick="add2();"/>
<script type="text/javascript">
function add2() {
var div1 = document.getElementById("div1");
var ul1 = document.getElementById("ulid");
div1.appendChild(ul1);
}
//在末尾添加节点
function add1() {
//获取到ul标签
var ul1 = document.getElementById("ulid");
//创建标签
var li1 = document.createElement("li");
//创建文本
var tex1 = document.createTextNode("5555");
//把文本加入到li下面
li1.appendChild(tex1);
//把li加入到ul下面
ul1.appendChild(li1);
}
</script>
</body>
</html>
2、元素对象（element对象）
<html>
<head>
<title>HTML示例</title>
<style type="text/css">
</style>
</head>
<body>
<input type="text" name="name1" id="inputid" value="aaaa"/>
<script type="text/javascript">
//先要获取input标签
var input1 = document.getElementById("inputid");
//alert(input1.value);
//alert(input1.getAttribute("value"));
//alert(input1.class);
//alert(input1.getAttribute("class"));
///alert(input1.getAttribute("class"));
input1.setAttribute("class","haha");
///alert(input1.getAttribute("class"));
alert(input1.getAttribute("value"));
input1.removeAttribute("value");
alert(input1.getAttribute("value"));
</script>
</body>
</html>
<html>
<head>
<title>HTML示例</title>
<style type="text/css">
</style>
</head>
<body>
<ul id="ulid1">
<li>aaaaaa</li>
<li>bbbbbb</li>
<li>cccccc</li>
</ul>
<script type="text/javascript">
//获取到ul下面的所有子标签（子元素）
//获取ul标签
var ul11 = document.getElementById("ulid1");
//获取ul下面的子标签
//var lis = ul11.childNodes;
//alert(lis.length);
var lis = ul11.getElementsByTagName("li");
alert(lis.length);
</script>
</body>
</html>
3、Node对象属性一
<html>
<head>
<title>HTML示例</title>
<style type="text/css">
</style>
</head>
<body>
<span id="spanid">哈哈呵呵</span>
<script type="text/javascript">
//获取标签对象
var span1 = document.getElementById("spanid");
//alert(span1.nodeType); // 1
///alert(span1.nodeName); // SPAN
///alert(span1.nodeValue); // null
//属性
var id1 = span1.getAttributeNode("id");
//alert(id1.nodeType); // 2
//alert(id1.nodeName); // id
//alert(id1.nodeValue); // spanid
//获取文本
var text1 = span1.firstChild;
alert(text1.nodeType); // 3
alert(text1.nodeName); // #text
alert(text1.nodeValue); // 内容
</script>
</body>
</html>
4、Node对象的属性二
<html>
<head>
<title>HTML示例</title>
<style type="text/css">
</style>
</head>
<body>
<ul id="ulid">
<li id="li1">qqqqq</li>
<li id="li2">wwww</li>
<li id="li3">yyyyyy</li>
<li id="li4">test1111</li>
</ul>
<script type="text/javascript">
//得到li1
/*var li1 = document.getElementById("li1");
//得到ul
var ul1 = li1.parentNode;
alert(ul1.id);*/
//获取ul的第一个子节点 id=li1
//得到ul
var ul1 = document.getElementById("ulid");
//第一个子节点
/*var li1 = ul1.firstChild;
alert(li1.id);*/
//得到最后一个子节点
/*var li4 = ul1.lastChild;
alert(li4.id);*/
//获取li的id是li3的上一个和下一个兄弟节点
var li3 = document.getElementById("li3");
//alert(li3.nextSibling.id);
alert(li3.previousSibling.id);
</script>
</body>
</html>
5、操作dom树
<html>
<head>
<title>HTML示例</title>
<style type="text/css">
#div1 {
width:200px;
height:150px;
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="add1" onclick="add11();"/>
<script type="text/javascript">
function add11() {
//得到div2
var div2 = document.getElementById("div2");
//获取ul
var ul11 = document.getElementById("ulid11");
//把ul添加到div2里面
div2.appendChild(ul11);
}
</script>
</body>
</html>
<html>
<head>
<title>HTML示例</title>
<style type="text/css">
</style>
</head>
<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="insert" onclick="insert1()"/>
<script type="text/javascript">
//在<li>貂蝉</li>之前添加 <li>董小宛</li>
function insert1() {
/*
1、获取到li13标签
2、创建li
3、创建文本
4、把文本添加到li下面
5、获取到ul
6、把li添加到ul下面（在<li>貂蝉</li>之前添加 <li>董小宛</li>）
*/
//获取li3 标签
var li13 = document.getElementById("li13");
//创建li
var li15 = document.createElement("li");
//创建文本
var text15 = document.createTextNode("董小宛");
//把文本添加到li下面 appendChild
li15.appendChild(text15);
//获取到ul
var ul21 = document.getElementById("ulid21");
//在<li>貂蝉</li>之前添加 <li>董小宛</li>
//insertBefore(newNode,oldNode)
ul21.insertBefore(li15,li13);
}
</script>
</body>
</html>
<html>
<head>
<title>HTML示例</title>
<style type="text/css">
</style>
</head>
<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();"/>
<script type="text/javascript">
//删除<li id="li24">杨玉环</li>
function remove1() {
/*
1、获取到li24标签
2、获取父节点ul标签
3、执行删除（通过父节点删除）
*/
//获取li标签
var li24 = document.getElementById("li24");
//获取父节点
//两种方式 1、通过id获取 ； 2、通过属性 parentNode获取
var ul31 = document.getElementById("ulid31");
//删除（通过父节点）
ul31.removeChild(li24);
}
</script>
</body>
</html>
<html>
<head>
<title>HTML示例</title>
<style type="text/css">
</style>
</head>
<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();"/>
<script type="text/javascript">
//<li id="li34">青翼蝠王</li>替换 <li>张无忌</li>
function replace1() {
/*
1、获取到li34
2、创建标签li
3、创建文本
4、把文本添加到li下面
5、获取ul标签（父节点）
6、执行替换操作 （replaceChild(newNode,oldNode)）
*/
//获取li34
var li34 = document.getElementById("li34");
//创建li
var li35 = document.createElement("li");
//创建文本
var text35 = document.createTextNode("张无忌");
//把文本添加到li下面
li35.appendChild(text35);
//获取ul
var ul41 = document.getElementById("ulid41");
//替换节点
ul41.replaceChild(li35,li34);
}
</script>
</body>
</html>
<html>
<head>
<title>HTML示例</title>
<style type="text/css">
</style>
</head>
<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="copy" onclick="copy1();"/>
<script type="text/javascript">
function copy1() {
//把ul列表复制到另外一个div里面
/*
1、获取到ul
2、执行复制方法 cloneNode方法复制 true
3、把复制之后的内容放到div里面去
** 获取到div
** appendChild方法
*/
//获取ul
var ul41 = document.getElementById("ulid41");
//复制ul，放到类似剪切板里面
var ulcopy = ul41.cloneNode(true)
//获取到div
var divv = document.getElementById("divv");
//把副本放到div里面去
divv.appendChild(ulcopy);
}
</script>
</body>
</html>
6、innerHTML属性
<html>
<head>
<title>HTML示例</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>
<script type="text/javascript">
//获取span标签
var span1 = document.getElementById("sid");
//alert(span1.innerHTML);
//向div里面设置内容 <h1>AAAAA</h1>
//获取到div
var div11 = document.getElementById("div11");
//设置内容
//div11.innerHTML = "<h1>AAAAA</h1>";
//向div里面添加一个表格
//var tab = "<table border='1'><tr><td>aaaaaa</td></tr><tr><td>bbbbbb</td></tr><tr><td>cccccc</td></tr></table>";
var tab = "<table>";
tab += "</table>";
//相当于 var tab = "<table></table>";
div11.innerHTML = tab;
</script>
</body>
</html>
7、案例二：动态显示时间
<html>
<head>
<title>HTML示例</title>
<style type="text/css">
</style>
</head>
<body>
<div id="times">
</div>
<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>
</body>
</html>
8、案例三：全选练习
<html>
<head>
<title>HTML示例</title>
<style type="text/css">
</style>
</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();"/>
<script type="text/javascript">
//实现全选和全不选
function selAllNo() {
/*
1、得到上面那个复选框
- 通过id获取到
2、判断这个复选框是否是选中
- if条件，checked==true
3、如果是选中，下面是全选
4、如果不是选中，下面是全不选
*/
//得到上面复选框
var box1 = document.getElementById("boxid");
//判断这个复选框是否是选择
if(box1.checked == true) { //是选择状态
//调用全选方法
selAll();
} else { //不是选中状态
//调用全不选方法
selNo();
}
}
//实现反选的操作
function selOther() {
/*
1、获取到要操作的复选框
2、返回数组，遍历数组
3、得到每一个复选框
4、判断当前的复选框是选中还是不选中
- if(love1.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) { //是选中的状态
//设置checked=false
love11.checked = false;
} else { //是不选中的状态
//把checked=true
love11.checked = true;
}
}
}
//实现全不选的操作
function selNo() {
/*
1、获取到要操作的复选框
2、返回的是数组，遍历数组
3、得到每一个复选框
4、设置复选框的属性 checked=false
*/
//得到要操作的复选框
var loves1 = document.getElementsByName("love");
//遍历数组
for(var j=0;j<loves1.length;j++) {
//得到每一个复选框
var love1 = loves1[j];
//设置属性的值checked = false;
love1.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;
}
}
</script>
</body>
</html>
9、案例四：下拉列表左右选择
<html>
<head>
<title>HTMLʾ}</title>
<style type="text/css">
</style>
</head>
<body>
<select multiple="multiple">
<option>111</option>
<option>2222</option>
<option>3333</option>
</select>
<script type="text/javascript">
</script>
</body>
</html>
<html>
<head>
<title>HTML示例</title>
<style type="text/css">
</style>
</head>
<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>QQQQQQQQ</option>
</select>
</div>
<div>
<input type="button" value="选中添加到左边" onclick="selToLeft();"/><br/>
<input type="button" value="全部添加到左边" onclick="allToLeft();"/>
</div>
</div>
<script type="text/javascript">
//实现全部添加到左边
function allToLeft() {
/*
1、获取select2里面的option对象
2、返回是数组，遍历数组
3、得到每一个option对象
4、获取到select1
5、添加到select1里面
- 使用appendChild方法
*/
//获取select2
var select2 = document.getElementById("select2");
//获取select1
var select1 = document.getElementById("select1");
//获取select2里面的option
var options1 = select2.getElementsByTagName("option");
//遍历数组
for(var m=0;m<options1.length;m++){
//得到每一个option
var op11 = options1[m];
//添加到select1里面
select1.appendChild(op11);
m--;
}
}
//选择添加到左边
function selToLeft() {
/*
1、获取select2里面的option对象
2、返回是数组，遍历数组
3、得到每一个option对象
4、判断option是否被选中
- if条件 属性 selected == true：选择
5、获取select1
6、添加到select1里面
- 使用appendChild方法
*/
//获取select1
var s1 = document.getElementById("select1");
//获取到select2
var s2 = document.getElementById("select2");
//得到s1里面的option对象
var opss = s2.getElementsByTagName("option");
//遍历数组
for(var aa=0;aa<opss.length;aa++) {
//得到每一个option
var op = opss[aa];
//判断是否被选中
if(op.selected == true) { //被选中
//添加到select1里面
s1.appendChild(op);
aa--;
}
}
}
//全部添加到右边
function allToRight() {
/*
1、获取第一个select下面的option对象
2、返回数组，遍历数组
3、得到每一个option对象
4、得到select2
5、添加到select2下面
- appendChild方法
*/
//得到select2
var s2 = document.getElementById("select2");
//得到select下面的option对象
var s1 = document.getElementById("select1");
var ops = s1.getElementsByTagName("option");//返回的是数组
//遍历数组
for(var j=0;j<ops.length;j++) {
//得到每一个option对象
var op1 = ops[j];
//添加option到s2下面
s2.appendChild(op1);
j--;
}
}
//实现选中添加到右边
function selToRight() {
/*
1、获取select1里面的option
- getElementsByTagName()返回是数组
- 遍历数组，得到每一个option
2、判断option是否被选中
- 属性 selected，判断是否被选中
** selected= true: 选中
** selected= false：没有选择
3、如果是选中，把选择的添加到右边去
4、得到select2
4、添加选择的部分
- appendChild方法
*/
//获取select1里面的option
//获取select2
var select2 = document.getElementById("select2");
//得到select1
var select1 = document.getElementById("select1");
//得到option
var options1 = select1.getElementsByTagName("option");
//遍历数组
for(var i=0;i<options1.length;i++) {
//alert(i);
//第一次循环 i=0 length：5
//第二次循环 i=0 length：4
// i=0 length: 3
var option1 = options1[i];//得到每一个option对象
//判断是否被选中
if(option1.selected == true) {
//添加到select2里面
select2.appendChild(option1);
i--;
}
}
}
</script>
</body>
</html>
10、案例五：省市联动
<html>
<head>
<title>HTML示例</title>
<style type="text/css">
</style>
</head>
<body>
<select id="countryid" onchange="add1(this.value);">
<option value="0">--请选择--</option>
<option value="中国">中国</option>
<option value="美国">美国</option>
<option value="德国">德国</option>
<option value="日本">日本</option>
</select>
<select id="cityid">
</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里面添加option
第二次添加，追加
* 每次添加之前，判断一下city里面是否有option，如果有，删除
*/
//获取city的select
var city1 = document.getElementById("cityid");
//得到city里面的option
var options1 = city1.getElementsByTagName("option");
//遍历数组
for(var m=0;m<options1.length;m++) {
//得到每一个option
var op = options1[m];
//删除这个option 通过父节点删除
city1.removeChild(op);
m--;
}
//遍历二维数组
for(var i=0;i<arr.length;i++) {
//得到二维数组里面的每一个数组
var arr1 = arr[i];
//得到遍历之后的数组的第一个值
var firstvalue = arr1[0];
//判断传递过来的值和第一个值是否相同
if(firstvalue == val) { //相同
//得到第一个值后面的元素
//遍历arr1
for(var j=1;j<arr1.length;j++) {
var value1 = arr1[j]; //得到城市的名称
//alert(value1);
//创建option
var option1 = document.createElement("option");
//创建文本
var text1 = document.createTextNode(value1);
//把文本添加到option1里面
option1.appendChild(text1);
//添加值到city1里面
city1.appendChild(option1);
}
}
}
}
</script>
</html>
11、案例六：动态生成表格
<html>
<head>
<title>HTML示例</title>
<style type="text/css">
</style>
</head>
<body>
行：<input type="text" id="h" />
列：<input type="text" id="l" />
<br/>
<input type="button" value="生成" onclick="add2();"/>
<div id="divv">
</div>
<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' bordercolor='blue'>";
//循环行
for(var i=1;i<=h;i++) {
tab += "<tr>";
//循环单元格
for(var j=1;j<=l;j++) {
tab += "<td>aaaaaaa</td>"
}
tab += "</tr>";
}
tab += "</table>";
//alert(tab);
//得到div标签
var divv = document.getElementById("divv");
//把table的代码设置到div里面去
divv.innerHTML = tab;
}
</script>
</body>
</html>
5613
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
