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;