web day4 javascript＆DOM-CSDN博客

本文链接：https://blog.csdn.net/opopopwqwqwq/article/details/51138767

思维导图

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，但是这个属性兼容性很差

**获得标签下面子标签的唯一有效办法，使用getElementsByTagName方法

-var ul11 = document.getElementById("ulid1");

//获取ul下面的子标签

//varlis = ul11.childNodes;

//alert(lis.length);

varlis = ul11.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>qqqqq</li>

</ul>

*父节点

-ul是li的父节点

-parentNode

-//得到li1

varli1 = document.getElementById("li1");

//得到ul

varul1 = li1.parentNode;

alert(ul1.id);

*子节点

-li是ul的子节点

-childNodes：得到所有子节点，但是兼容性很差

-firstChild：获取第一个子节点

-//获取ul的第一个子节点 id=li1

//得到ul

varul1 = document.getElementById("ulid");

//第一个子节点

varli1 = ul1.firstChild;

alert(li1.id);

-lastChild：获取最后一个子节点

//得到最后一个子节点

varli4 = ul1.lastChild;

alert(li4.id);

*同辈节点

-li直接关系是同辈节点

-nextSibling: 返回一个给定节点的下一个兄弟节点。

previousSibling：返回一个给定节点的上一个兄弟节点。

-//获取li的id是li3的上一个和下一个兄弟节点

varli3 = document.getElementById("li3");

//alert(li3.nextSibling.id);

alert(li3.previousSibling.id);

5、操作dom树

**appendChild方法

-添加子节点到末尾

-特点：类似于剪切黏贴的效果

**insertBefore(newNode,oldNode)方法

-在某个节点之前插入一个新的节点

-两个参数

*要插入的节点

*在谁之前插入

-插入一个节点，节点不存在，创建

1、创建标签

2、创建文本

3、把文本添加到标签下面

-代码

1、获取到li13标签

2、创建li

3、创建文本

4、把文本添加到li下面

5、获取到ul

6、把li添加到ul下面（在<li>貂蝉</li>之前添加 <li>董小宛</li>）

//获取li3 标签

varli13 = document.getElementById("li13");

//创建li

varli15 = document.createElement("li");

//创建文本

vartext15 = document.createTextNode("董小宛");

//把文本添加到li下面 appendChild

li15.appendChild(text15);

//获取到ul

varul21 = document.getElementById("ulid21");

//在<li>貂蝉</li>之前添加 <li>董小宛</li>

//insertBefore(newNode,oldNode)

ul21.insertBefore(li15,li13);

***不存在没有insertAfter()方法

**removeChild方法：删除节点

-通过父节点删除，不能自己删除自己

-/*

1、获取到li24标签

2、获取父节点ul标签

3、执行删除（通过父节点删除）

//获取li标签

varli24 = document.getElementById("li24");

//获取父节点

//两种方式 1、通过id获取； 2、通过属性parentNode获取

varul31 = document.getElementById("ulid31");

//删除（通过父节点）

ul31.removeChild(li24);

**replaceChild(newNode,oldNode)方法: 替换节点

-不能自己替换自己，通过父节点替换

-两个参数

**第一个参数：新的节点（替换成的节点）

**第二个参数：旧的节点（被替换的节点）

-代码

1、获取到li34

2、创建标签li

3、创建文本

4、把文本添加到li下面

5、获取ul标签（父节点）

6、执行替换操作（replaceChild(newNode,oldNode)）

//获取li34

varli34 = document.getElementById("li34");

//创建li

varli35 = document.createElement("li");

//创建文本

vartext35 = document.createTextNode("张无忌");

//把文本添加到li下面

li35.appendChild(text35);

//获取ul

varul41 = document.getElementById("ulid41");

//替换节点

ul41.replaceChild(li35,li34);

**cloneNode(boolean): 复制节点

-//把ul列表复制到另外一个div里面

1、获取到ul

2、执行复制方法 cloneNode方法复制 true

3、把复制之后的内容放到div里面去

**获取到div

**appendChild方法

//获取ul

varul41 = document.getElementById("ulid41");

//复制ul，放到类似剪切板里面

varulcopy = ul41.cloneNode(true)

//获取到div

vardivv = document.getElementById("divv");

//把副本放到div里面去

divv.appendChild(ulcopy);

**操作dom总结

*获取节点使用方法

getElementById()：通过节点的id属性，查找对应节点。

getElementsByName()：通过节点的name属性，查找对应节点。

getElementsByTagName()：通过节点名称，查找对应节点

*插入节点的方法

insertBefore方法：在某个节点之前插入

appendChild方法：在末尾添加，剪切黏贴

*删除节点方法

removeChild方法：通过父节点删除

*替换节点方法

replaceChild方法：通过父节点替换

6、innerHTML属性

*这个属性不是dom的组成部分，但是大多数浏览器都支持的属性

第一个作用：获取文本内容

***//获取span标签

varspan1 = document.getElementById("sid");

alert(span1.innerHTML);

第二个作用：向标签里面设置内容（可以是html代码）

***//向div里面设置内容 <h1>AAAAA</h1>

//获取到div

vardiv11 = document.getElementById("div11");

//设置内容

div11.innerHTML= "<h1>AAAAA</h1>";

**练习：向div里面添加一个表格

-//向div里面添加一个表格

//vartab = "<tableborder='1'><tr><td>aaaaaa</td></tr><tr><td>bbbbbb</td></tr><tr><td>cccccc</td></tr></table>";

vartab = "<table>";

tab+= "</table>";

//相当于 var tab ="<table></table>";

div11.innerHTML= tab;

7、案例二：动态显示时间

*得到当前的时间

vardate = new Date(); //得到不是常规的格式

vard1 = date.toLocaleString(); //格式化

*需要让页面每一秒获取时间

setInterval方法定时器

*显示到页面上

每一秒向div里面写一次时间

*使用innerHTML属性

*代码

functiongetD1() {

//当前时间

vardate = new Date();

//格式化

vard1 = date.toLocaleString();

//获取div

vardiv1 = document.getElementById("times");

div1.innerHTML= d1;

}

//使用定时器实现每一秒写一次时间

setInterval("getD1();",1000);

8、案例三：全选练习

**使用复选框上面一个属性判断是否选中

-checked属性

-checked=true：选中

-checked=false：不选中

*创建一个页面

**复选框和按钮

-四个复选框表示爱好

-还有一个复选框操作全选和选不选，也有一个事件

**三个按钮，分别有事件

-全选

-全不选

-反选

*全选操作

步骤：

1、获取要操作的复选框

-使用getElementsByName()

2、返回是数组，

-属性 checked判断复选框是否选中

***checked = true; //表示选中

***checked = false;//表示不选中

-遍历数组，得到的是每一个checkbox

*把每一个checkbox属性checked=true

*全不选操作

步骤

1、获取到要操作的复选框

2、返回的是数组，遍历数组

3、得到每一个复选框

4、设置复选框的属性 checked=false

*反选操作

步骤

1、获取到要操作的复选框

2、返回数组，遍历数组

3、得到每一个复选框

4、判断当前的复选框是选中还是不选中

-if(love1.checked == true) {}

5、如果选中，属性checked设置成false，否则，设置成true

*使用复选框实现全选和全不选

步骤

1、得到上面那个复选框

-通过id获取到

2、判断这个复选框是否是选中

-if条件，checked==true

3、如果是选中，下面是全选

4、如果不是选中，下面是全不选

9、案例四：下拉列表左右选择

*下拉选择框

</select>

*创建一个页面

**两个下拉选择框

-设置属性 multiple属性

**四个按钮，有事件

*选中添加到右边

步骤

1、获取select1里面的option

-getElementsByTagName()返回是数组

-遍历数组，得到每一个option

2、判断option是否被选中

-属性 selected，判断是否被选中

**selected= true: 选中

**selected= false：没有选择

3、如果是选中，把选择的添加到右边去

4、得到select2

4、添加选择的部分

-appendChild方法

*全部添加到右边

步骤

1、获取第一个select下面的option对象

2、返回数组，遍历数组

3、得到每一个option对象

4、得到select2

5、添加到select2下面

-appendChild方法

*选中添加到左边

步骤

1、获取select2里面的option对象

2、返回是数组，遍历数组

3、得到每一个option对象

4、判断option是否被选中

-if条件属性 selected == true：选择

5、获取select1

6、添加到select1里面

-使用appendChild方法

*全部添加到左边

步骤

1、获取select2里面的option对象

2、返回是数组，遍历数组

3、得到每一个option对象

4、获取到select1

5、添加到select1里面

-使用appendChild方法

10、案例五：省市联动

*创建一个页面，有两个下拉选择框

*在第一个下拉框里面有一个事件：改变事件 onchange事件

-方法add1(this.value);表示当前改变的option里面的value值

*创建一个二维数组，存储数据

*每个数组中第一个元素是国家名称，后面的元素是国家里面的城市

1、遍历二维数组

2、得到也是一个数组（国家对应关系）

3、拿到数组中的第一个值和传递过来的值做比较

4、如果相同，获取到第一个值后面的元素

5、得到city的select

6、添加过去（使用）appendChild方法

-创建option（三步）

由于每次都要向city里面添加option

第二次添加，会追加。

*每次添加之前，判断一下city里面是否有option，如果有，删除

11、案例六：动态生成表格

*创建一个页面：两个输入框和一个按钮

*代码和步骤

1、得到输入的行和列的值

2、生成表格

**循环行

**在行里面循环单元格

3、显示到页面上

-把表格的代码设置到div里面

-使用innerHTML属性

//获取输入的行和列

varh = document.getElementById("h").value;

varl = document.getElementById("l").value;

//把表格代码放到一个变量里面

vartab = "<table border='1' bordercolor='blue'>";

//循环行

for(vari=1;i<=h;i++) {

tab+= "<tr>";

//循环单元格

for(varj=1;j<=l;j++) {

tab+= "<td>aaaaaaa</td>"

}

tab+= "</tr>";

}

tab+= "</table>";

//alert(tab);

//得到div标签

vardivv = document.getElementById("divv");

//把table的代码设置到div里面去

divv.innerHTML= tab;

}

12、表单提交方式

*使用submit提交

<form>

.....

<inputtype="submit" />

</form>

*使用button提交表单

-代码

//实现提交方法

functionform1() {

//获取form

varform1 = document.getElementById("form1");

//设置action

form1.action= "hello.html";

//提交form表单

form1.submit();

}

*使用超链接提交

-代码

<ahref="hello.html?username=123456">使用超链接提交</a>

*onclick：鼠标点击事件

onchange：改变内容（一般和select一起使用）

onfocus:得到焦点 (ie5、某些版本的ie6)

onblur:失去焦点