Javaweb学习笔记——(四)——————JavaScript基础&DOM目录
1.案例一:在末尾添加节点
第一个:获取到ul标签
第二部:创建li标签
document.createElement("标签名称")方法
第三步:创建文本
document.createTextNode("文本内容")
第四步:将文本添加到li标签下
appendChild方法
第五步:将标签添加到ul标签下
appendChild方法
2.元素对象(element对象)
**要操作element对象,首先必须要获取到element,
-使用document里面相应的方法获取
**方法
***获取属性里面的值
getAttribute("属性名称")
- var input1 = document.getElementById("inputid");
//alert(input1.value);
alert(input1.getAttribute("value"));
***设置属性的值
input1.setAttribute("class", "haha");
***删除属性
input1.removeAttribute("name");
** 不能删除value.'
***想要获取标签下面的子标签
**使用属性 childNodes,但是这个方法是兼容性很差
**获得标签下面的子标签下面字标签的唯一有效方法,使用getElementByTagName方法
//获取到ul下面的所有的子标签(子元素)
//获取ul标签
var ulid = document.getElementById("id_ul");
//获取ul下的子标签
var lis = ulid.childNodes;//浏览器兼容性很差
alert(lis);
var lis2 = ulid.getElementByTagName("li");
alert(lis2);
3.Node对象属性
*nodeName
*nodeType
*nodeValue
*使用dom解析html时候,需要html里面的标签,属性和文本都封装成对象
*标签节点对应的值
alert(span1.nodeType); //1
alert(span1.nodeName); //大写的标签名称,比如SPAN
alert(span1.nodeValue); //null
*属性节点对应的值
alert(id1.nodeType); //2
alert(id1.nodeName); //属性的名称,大写
alert(id1.nodeValue); //属性的值
*文本节点对应的值
alert(text1.nodeType); //3
alert(text1.nodeName); //#text
alert(text1.nodeValue); //文本内容
4.Node对象的属性二
<ul>
<li>1qqqqqqqq</li>
<li>wwwwwww</li>
</ul>
*父节点
-ul是li的父节点
//得到li1
var li1 = document.getElementById("li1");
//得到ul
var ul1 = document.getElementById("ulid");
alert(ul1.id);
-parentNode
*子节点
-li是ul的子节点
-childNodes:得到所有的子节点,但是兼容性很差
-firstChild:获取第一个子节点
var ul1 = document.getElementById("ulid");
var li11 = ul1.fristChild();
alert(li11);
-lastChild:获取最后一个子节点
var li41 = ul1.lastChild();
alert(li41);
*同辈节点
-li直接关系是同辈节点
-nextSibling:获取下一个节点
-proviousSibling:获取上一个节点
//获取下一个节点
var li3 = document.getElementById("li3");
var li4 = li3.nextSibling.id;
alert(li4);
//获取上一个节点
alert(li3.previousSibling.id);
5.操作dom树
**appendChild方法
-添加子节点到末尾
-特点:类似于剪切的效果
**insertBefore(newNode,oldNode)方法
-在某个节点之前插入一个新的节点
-两个参数
*要插入的节点
*在谁之前插入
-插入一个节点,节点不存在,创建
1.创建标签
2.创建文本
3.把文本添加到标签上
-代码:
/*
1.获取到il3标签
2.创建li
3.创建文本
4.把文本添加到li下
5.获取到ul
6.吧li添加到ul下(在<li id="il3">789</li>
之前添加<li>llll</li>)
*/
var il31 = document.getElementById("il3");
var il5 = document.createElement("li");
var text = document.createTextNode("llllllll");
il5.appendChild(text);
ulid21 = document.getElementById("ulid2");
//insertBefore(newNode, oldNode);
ulid21.insertBefore(il5, il31);
**removeChild方法:删除节点
-通过父节点删除,不能通过自己来删除自己
-/*
1.获取到il2标签
2.获取父节点ul标签
3.执行删除(通过父节点删除)
*/
//获取li标签
var li21 = document.getElementById("il2");
//获取父标签
//两种方式
//1.通过id获取:
//2.通过属性parentNode获取
var ul2 = document.getElementById("ulid2");
//删除(通过父节点)
ul2.removeChild(li21);
**replaceChild(newNode, oldNode)方法;替换节点
-两个参数
**第一个参数:新的节点(替换成的节点)
**第二个参数:旧的节点(被替换的节点)
-代码
/*
1.创建新的节点
2.创建新的文本
3.添加新的文本到新的节点中
4.获取父节点
5.获取要被替换的节点
6.替换节点
*/
//1创建新的节点
var il5 = document.createElement("li");
//创建新的文本
var text = document.createTextNode("tyu");
//添加新的文本到新的节点中
il5.appendChild(text);
//获取父节点
var ulid2 = document.getElementById("ulid2");
//获取要被替换的节点
var il2 = document.getElementById("il2");
//replaceChild() 替换节点
ulid2.replaceChild(il5, il2);
}
**cloneNode(boolean)方法:复制节点
-代码:
//把ul列表复制到另外一个div里面
/*
1.获取到ul
2.执行复制方法 cloneNode方法复制 true
3.把复制之后的内容放到div里面去
** 获取到div
** appendChild方法
*/
//获取ul
var ul = document.getElementById("ulid2");
//复制ul,放到类似剪切板里面
var ulcopy = ul.cloneNode(true);
//获取到div
var divv = document.getElementById("divv");
//复制到divv中
divv.appendChild(ulcopy);
**操作dom总结(*********************)
*获取节点使用方法
getElementById();通过节点的id属性,查找对于节点
getElementsByName():通过节点的name属性,查找对应节点
getElementsByTagName():通过节点名称,查找对应节点
*插入节点的方法
insertBefore方法:在某个节点之前插入
appendChlid方法:在末尾添加,剪切粘贴
*删除节点方法
removeChild方法:通过父节点删除
*替换节点方法
replaceChild方法:通过父节点替换
6.innerHTML属性
*这个属性不是dom的组成部分,但是大多数浏览器都支持的属性
第一个作用:获取文本的内容
//获取span标签
var span1 = document.getElementById("spanid");
alert(span1.innerHTML);//获取标签中内容
第二个作用:向标签里面设置内容(可以是html代码)
**练习
向div里面添加一个表格
-代码:
var str = "<table>"
for (var i = 0; i < 10; i++) {
str += "<tr>"
for (var j = 0; j < 10; j++) {
str = str + "<td>"+i+"</td>";
}
str += "</tr>"
}
str += "</table>"
div1.innerHTML = str;
alert(str);
7.案例二:动态显示时间
*得到当前的时间
var date = new Date(); //得到不少一个常规的格式
var d1 = date.toLocaleString(); //格式化
*需要让页面每一秒获取时间
setInterval方法(定时器)
*显示到页面上
每一秒向div里面写一次时间
*使用innerHTML属性
*代码:
function getD1(){
//当前时间
var date = new date();
//格式化
var d1 = date.toLocaleString();
//获取div
var div11 = document.getElementById("div1");
div1.innerHTML = div11;
}
//动态显示时间(一秒写一次时间)
setInterval("getD1();", 1000);
8.案例三:全选练习
**使用复选框上面一个属性判断是否选中
-checked属性
-checked=true:选中
-checked=false:不选中
*创建一个页面
**复选框和按钮
-四个复选框表示爱好
-还有一个复选框操作(全选和全不选)
**三个按钮:分别有事件
-全选
-全不选
-反选
//实现全选的操作
function selAll(){
/*
1.获取要操作的复选框
-使用getElementsByName()
2.返回是数组
-s属性 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 loves = document.getElementsByName("love");
//遍历数组,得到每一个复选框
for (var i = 0; i < loves.length; i++) {
var love1 = loves[i]; //得到每一个复选框
//设置属性是true;
love1.checked = false;
}
}
//实现反选操作
function selOther(){
//获取要操作的复选框
var loves = document.getElementsByName("love");
//遍历数组,得到每一个复选框
for (var i = 0; i < loves.length; i++) {
var love1 = loves[i]; //得到每一个复选框
if (love1.checked) {
love1.checked = false;
}else{
love1.checked = true;
}
}
}
//实现全选或者全不选操作
function selAllNo(){
//获取全选或者全不选的复选框
var boxid = document.getElementById("boxid");
if (boxid.checked) {
var loves = document.getElementsByName("love");
//遍历数组,得到每一个复选框
for (var i = 0; i < loves.length; i++) {
var love1 = loves[i]; //得到每一个复选框
love1.checked = true;
}
}else{
var loves = document.getElementsByName("love");
//遍历数组,得到每一个复选框
for (var i = 0; i < loves.length; i++) {
var love1 = loves[i]; //得到每一个复选框
love1.checked = false;
}
}
}
9.案例四:下拉列表左右选择
*下拉选择框
<select>
<option>11</option>
<option>22</option>
<option>33</option>
<option>44</option>
</select>
*创建一个页面
**两个下拉选择框
-设置属性multiple属性
**四个按钮,有事件
*选择添加到右边
步骤
/*
1.获取到select1中的option(getElementsByTagName():返回的是数组)
-遍历数组,得到每一个option
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(getElementsByTagName():返回的是数组)
-遍历数组,得到每一个option
2.判断是否被选中(属性:selected,判断是否被选中)
**selected = true:选中
**selected = false:没有选中
3.如果是选中,把选中的添加到右边去
4.得到select1
5.添加选中的部分
**appendChild方法
*/
*全部添加到左边
步骤
/*
1.获取到select2下面的option对象
2.返回数组,遍历数组
3.得到每一个option对象
4.得到select1
5.添加到select1下面
-appendChild方法
*/
*注意:在遍历其中获得的options数组中,因为每次遍历,数组的长度就会减少,这样,每次遍历,就会跳过部分option,所以,只有保持i的不变(i--),才可以正常遍历
10.案例五:省市联动
*创建一个页面
*在第一下拉框里面有一个事件:改变事件:onchange事件
-方法add1(this.value); 表示当前改变的option里面的value值
*创建一个二维数组,存储数据
*每个数组第一个元素是国家名称,后面的元素是国家里面的城市
/*
1、遍历二维数组
2、得到也是一个数组(国家对于关系)
3、拿到数组中的第一个值和传递过来的值做比较
4、如果相同,获取到第一个值后面的元素
5、得到city的select
6、添加过去(使用)appendChild方法
- 创建option(三步)
*/
/*
由于每次都要想city里面添加option
第二次添加,追加
* 每次添加之前,判断一下city里面是否有option,如果有,删除
*/
11.案例六:动态生成表格
*创建一个页面:两个输入框和一个按钮
*代码和步骤
var h = document.getElementById("h").value;
var l = document.getElementById("l").value;
var code = "<table border='1'>";
for (var i = 0; i < h; i++) {
code += "<tr>";
for (var j = 0; j < l; j++) {
code += "<td>a</td>";
}
code += "</tr>";
}
code += "</table>";
var div11 = document.getElementById("div1");
div1.innerHTML = code;
第一个:获取到ul标签
第二部:创建li标签
document.createElement("标签名称")方法
第三步:创建文本
document.createTextNode("文本内容")
第四步:将文本添加到li标签下
appendChild方法
第五步:将标签添加到ul标签下
appendChild方法
2.元素对象(element对象)
**要操作element对象,首先必须要获取到element,
-使用document里面相应的方法获取
**方法
***获取属性里面的值
getAttribute("属性名称")
- var input1 = document.getElementById("inputid");
//alert(input1.value);
alert(input1.getAttribute("value"));
***设置属性的值
input1.setAttribute("class", "haha");
***删除属性
input1.removeAttribute("name");
** 不能删除value.'
***想要获取标签下面的子标签
**使用属性 childNodes,但是这个方法是兼容性很差
**获得标签下面的子标签下面字标签的唯一有效方法,使用getElementByTagName方法
//获取到ul下面的所有的子标签(子元素)
//获取ul标签
var ulid = document.getElementById("id_ul");
//获取ul下的子标签
var lis = ulid.childNodes;//浏览器兼容性很差
alert(lis);
var lis2 = ulid.getElementByTagName("li");
alert(lis2);
3.Node对象属性
*nodeName
*nodeType
*nodeValue
*使用dom解析html时候,需要html里面的标签,属性和文本都封装成对象
*标签节点对应的值
alert(span1.nodeType); //1
alert(span1.nodeName); //大写的标签名称,比如SPAN
alert(span1.nodeValue); //null
*属性节点对应的值
alert(id1.nodeType); //2
alert(id1.nodeName); //属性的名称,大写
alert(id1.nodeValue); //属性的值
*文本节点对应的值
alert(text1.nodeType); //3
alert(text1.nodeName); //#text
alert(text1.nodeValue); //文本内容
4.Node对象的属性二
<ul>
<li>1qqqqqqqq</li>
<li>wwwwwww</li>
</ul>
*父节点
-ul是li的父节点
//得到li1
var li1 = document.getElementById("li1");
//得到ul
var ul1 = document.getElementById("ulid");
alert(ul1.id);
-parentNode
*子节点
-li是ul的子节点
-childNodes:得到所有的子节点,但是兼容性很差
-firstChild:获取第一个子节点
var ul1 = document.getElementById("ulid");
var li11 = ul1.fristChild();
alert(li11);
-lastChild:获取最后一个子节点
var li41 = ul1.lastChild();
alert(li41);
*同辈节点
-li直接关系是同辈节点
-nextSibling:获取下一个节点
-proviousSibling:获取上一个节点
//获取下一个节点
var li3 = document.getElementById("li3");
var li4 = li3.nextSibling.id;
alert(li4);
//获取上一个节点
alert(li3.previousSibling.id);
5.操作dom树
**appendChild方法
-添加子节点到末尾
-特点:类似于剪切的效果
**insertBefore(newNode,oldNode)方法
-在某个节点之前插入一个新的节点
-两个参数
*要插入的节点
*在谁之前插入
-插入一个节点,节点不存在,创建
1.创建标签
2.创建文本
3.把文本添加到标签上
-代码:
/*
1.获取到il3标签
2.创建li
3.创建文本
4.把文本添加到li下
5.获取到ul
6.吧li添加到ul下(在<li id="il3">789</li>
之前添加<li>llll</li>)
*/
var il31 = document.getElementById("il3");
var il5 = document.createElement("li");
var text = document.createTextNode("llllllll");
il5.appendChild(text);
ulid21 = document.getElementById("ulid2");
//insertBefore(newNode, oldNode);
ulid21.insertBefore(il5, il31);
**removeChild方法:删除节点
-通过父节点删除,不能通过自己来删除自己
-/*
1.获取到il2标签
2.获取父节点ul标签
3.执行删除(通过父节点删除)
*/
//获取li标签
var li21 = document.getElementById("il2");
//获取父标签
//两种方式
//1.通过id获取:
//2.通过属性parentNode获取
var ul2 = document.getElementById("ulid2");
//删除(通过父节点)
ul2.removeChild(li21);
**replaceChild(newNode, oldNode)方法;替换节点
-两个参数
**第一个参数:新的节点(替换成的节点)
**第二个参数:旧的节点(被替换的节点)
-代码
/*
1.创建新的节点
2.创建新的文本
3.添加新的文本到新的节点中
4.获取父节点
5.获取要被替换的节点
6.替换节点
*/
//1创建新的节点
var il5 = document.createElement("li");
//创建新的文本
var text = document.createTextNode("tyu");
//添加新的文本到新的节点中
il5.appendChild(text);
//获取父节点
var ulid2 = document.getElementById("ulid2");
//获取要被替换的节点
var il2 = document.getElementById("il2");
//replaceChild() 替换节点
ulid2.replaceChild(il5, il2);
}
**cloneNode(boolean)方法:复制节点
-代码:
//把ul列表复制到另外一个div里面
/*
1.获取到ul
2.执行复制方法 cloneNode方法复制 true
3.把复制之后的内容放到div里面去
** 获取到div
** appendChild方法
*/
//获取ul
var ul = document.getElementById("ulid2");
//复制ul,放到类似剪切板里面
var ulcopy = ul.cloneNode(true);
//获取到div
var divv = document.getElementById("divv");
//复制到divv中
divv.appendChild(ulcopy);
**操作dom总结(*********************)
*获取节点使用方法
getElementById();通过节点的id属性,查找对于节点
getElementsByName():通过节点的name属性,查找对应节点
getElementsByTagName():通过节点名称,查找对应节点
*插入节点的方法
insertBefore方法:在某个节点之前插入
appendChlid方法:在末尾添加,剪切粘贴
*删除节点方法
removeChild方法:通过父节点删除
*替换节点方法
replaceChild方法:通过父节点替换
6.innerHTML属性
*这个属性不是dom的组成部分,但是大多数浏览器都支持的属性
第一个作用:获取文本的内容
//获取span标签
var span1 = document.getElementById("spanid");
alert(span1.innerHTML);//获取标签中内容
第二个作用:向标签里面设置内容(可以是html代码)
**练习
向div里面添加一个表格
-代码:
var str = "<table>"
for (var i = 0; i < 10; i++) {
str += "<tr>"
for (var j = 0; j < 10; j++) {
str = str + "<td>"+i+"</td>";
}
str += "</tr>"
}
str += "</table>"
div1.innerHTML = str;
alert(str);
7.案例二:动态显示时间
*得到当前的时间
var date = new Date(); //得到不少一个常规的格式
var d1 = date.toLocaleString(); //格式化
*需要让页面每一秒获取时间
setInterval方法(定时器)
*显示到页面上
每一秒向div里面写一次时间
*使用innerHTML属性
*代码:
function getD1(){
//当前时间
var date = new date();
//格式化
var d1 = date.toLocaleString();
//获取div
var div11 = document.getElementById("div1");
div1.innerHTML = div11;
}
//动态显示时间(一秒写一次时间)
setInterval("getD1();", 1000);
8.案例三:全选练习
**使用复选框上面一个属性判断是否选中
-checked属性
-checked=true:选中
-checked=false:不选中
*创建一个页面
**复选框和按钮
-四个复选框表示爱好
-还有一个复选框操作(全选和全不选)
**三个按钮:分别有事件
-全选
-全不选
-反选
//实现全选的操作
function selAll(){
/*
1.获取要操作的复选框
-使用getElementsByName()
2.返回是数组
-s属性 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 loves = document.getElementsByName("love");
//遍历数组,得到每一个复选框
for (var i = 0; i < loves.length; i++) {
var love1 = loves[i]; //得到每一个复选框
//设置属性是true;
love1.checked = false;
}
}
//实现反选操作
function selOther(){
//获取要操作的复选框
var loves = document.getElementsByName("love");
//遍历数组,得到每一个复选框
for (var i = 0; i < loves.length; i++) {
var love1 = loves[i]; //得到每一个复选框
if (love1.checked) {
love1.checked = false;
}else{
love1.checked = true;
}
}
}
//实现全选或者全不选操作
function selAllNo(){
//获取全选或者全不选的复选框
var boxid = document.getElementById("boxid");
if (boxid.checked) {
var loves = document.getElementsByName("love");
//遍历数组,得到每一个复选框
for (var i = 0; i < loves.length; i++) {
var love1 = loves[i]; //得到每一个复选框
love1.checked = true;
}
}else{
var loves = document.getElementsByName("love");
//遍历数组,得到每一个复选框
for (var i = 0; i < loves.length; i++) {
var love1 = loves[i]; //得到每一个复选框
love1.checked = false;
}
}
}
9.案例四:下拉列表左右选择
*下拉选择框
<select>
<option>11</option>
<option>22</option>
<option>33</option>
<option>44</option>
</select>
*创建一个页面
**两个下拉选择框
-设置属性multiple属性
**四个按钮,有事件
*选择添加到右边
步骤
/*
1.获取到select1中的option(getElementsByTagName():返回的是数组)
-遍历数组,得到每一个option
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(getElementsByTagName():返回的是数组)
-遍历数组,得到每一个option
2.判断是否被选中(属性:selected,判断是否被选中)
**selected = true:选中
**selected = false:没有选中
3.如果是选中,把选中的添加到右边去
4.得到select1
5.添加选中的部分
**appendChild方法
*/
*全部添加到左边
步骤
/*
1.获取到select2下面的option对象
2.返回数组,遍历数组
3.得到每一个option对象
4.得到select1
5.添加到select1下面
-appendChild方法
*/
*注意:在遍历其中获得的options数组中,因为每次遍历,数组的长度就会减少,这样,每次遍历,就会跳过部分option,所以,只有保持i的不变(i--),才可以正常遍历
10.案例五:省市联动
*创建一个页面
*在第一下拉框里面有一个事件:改变事件:onchange事件
-方法add1(this.value); 表示当前改变的option里面的value值
*创建一个二维数组,存储数据
*每个数组第一个元素是国家名称,后面的元素是国家里面的城市
/*
1、遍历二维数组
2、得到也是一个数组(国家对于关系)
3、拿到数组中的第一个值和传递过来的值做比较
4、如果相同,获取到第一个值后面的元素
5、得到city的select
6、添加过去(使用)appendChild方法
- 创建option(三步)
*/
/*
由于每次都要想city里面添加option
第二次添加,追加
* 每次添加之前,判断一下city里面是否有option,如果有,删除
*/
11.案例六:动态生成表格
*创建一个页面:两个输入框和一个按钮
*代码和步骤
var h = document.getElementById("h").value;
var l = document.getElementById("l").value;
var code = "<table border='1'>";
for (var i = 0; i < h; i++) {
code += "<tr>";
for (var j = 0; j < l; j++) {
code += "<td>a</td>";
}
code += "</tr>";
}
code += "</table>";
var div11 = document.getElementById("div1");
div1.innerHTML = code;