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;