Day04 dom详解及js事件

day04 dom详解

DOM的基础
- Document对象
- Element对象
- Node对象
innerHTML
事件处理
表单验证

上次课内容回顾：

JS中ECMAScript用法：

JS定义变量：使用var 使用typeof变量类型

JS语句:

if语句 switch语句 for while do while for in

JS中数组

var arr = [];

var arr = new Array();

JS中的函数

三种形式:

function 函数名(参数列表){函数体}

var 函数名 = new Function("参数列表","函数体");

var 函数名 = function(参数列表){函数体}

特殊函数:

回调函数:作为参数传递的函数.

匿名函数:没有名称的函数.

匿名回调函数:作为参数传递的函数而且函数没有名称.

私有函数:写在函数内部的函数.

返回函数的函数:

自调函数: ()()

第一个小括号是函数的定义第二个小括号是调用.

函数中是否有重载? 没有重载.

利用arguments完成模拟重载的效果.

变量的作用域:分为全局域和函数域.

JS中的内置对象:

Array:数组对象. length sort(); reverse();

String:字符串对象. length charAt() indexOf() split() substr();

Date:日期对象. getTime();

Boolean、Number、正则

JS中自定义对象:

定义对象：

var obj = new Object();

var obj = {}

function obj(){

}

prototype:是函数对象的一个属性.(内置对象中都有该属性)

利用prototype属性扩展Array的方法.

利用prototype扩展自定义对象的属性或方法.

JS中的继承.

function A(){

this.aName = "a";

}

function B(){

this.bName = "b";

}

B.prototype = new A();

function A(){ }

A.prototype = {

aName:"a"

}

function B(){

this.bName = "b";

}

B.prototype = A.prototype

JS中BOM对象

Window History Location Screen 浏览器对象

DOM对象:Document Object Model

DOM的介绍

DOM:将文档解析成内存中的树状结构.通过树状结构对文档进行添加节点删除节点修改节点查找节点

DOM 是 W3C（万维网联盟）的标准。

DOM 定义了访问 HTML 和 XML 文档的标准：

"W3C 文档对象模型（DOM）是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。"

DOM的分级：

DOM分为3级 DOM 1/2/3级

DOM中的Document对象.

Document：代表整个文档.

使用document查找标签

documentElement ---- 获得文档的跟节点.

getElementById(); ---- 通过ID获得元素

getElementsByTagName(); ---- 通过标签名获得元素.返回一个数组

getElementsByName(); ---- 通过name属性获得元素.

案例：

// 获得id为username1的标签的value的值.

var input = document.getElementById("username1");

alert(input.value);

// 获得所有的input的标签的value的值.

var inputs = document.getElementsByTagName("input");

for(var i=0;i<inputs.length;i++){

alert(inputs[i].value);

}

// 获得所有名称是username的标签的value的值.

var inputs = document.getElementsByName("username");

for(var i=0;i<inputs.length;i++){

alert(inputs[i].getAttribute("value"));

}

Document创建标签.

createElement(); -----创建一个元素标签

createTextNode(); -----创建一个文本节点

node对象.appendChild(node);

案例:

<BODY>

</ul>

</BODY>

// 需求:创建一个<li>深圳</li> 将其放在ul中

// 1.创建li标签 <li></li>

var liElement = document.createElement("li");

// 2.创建一个文本节点深圳

var textElement = document.createTextNode("深圳");

// 3.将文本内容添加到li中 <li>深圳</li>

liElement.appendChild(textElement);

// 4.将li添加到ul中.(查找ul.)

var city = document.getElementById("city");

city.appendChild(liElement);

</SCRIPT>

Element对象:元素(标签)

元素对象操作属性

getAttribute("属性的名"); // 获得属性的值

setAttribute("属性名","属性值"); // 添加和修改

removeAttribute("属性名"); // 移除属性

案例：操作元素的属性

// 操作属性 (对属性进行增加修改删除)

// 查找元素.

var input = document.getElementsByTagName("input")[0];

//alert(input.getAttribute("value"));

// 修改name属性的值

// input.setAttribute("name","uname");

// alert(input.getAttribute("name"));

// 添加一个属性id

//alert(input.getAttribute("id"));

//input.setAttribute("id","username");

//alert(input.getAttribute("id"));

alert(input.name);

input.removeAttribute("name");

alert(input.getAttribute("name"));

在标签下查找标签

childNodes：获得所有的子节点.属性不是所有的浏览器都兼容.

在标签下查找标签只有getElementsByTagName();是有效的.

案例:

// 查找第一个ul下的所有的li标签.

// 1.先查找第一个ul标签.

var city1 = document.getElementById("city1");

// 2.再找ul下的li标签.

//var childs = city1.childNodes;

//alert(childs.length);

var lis = city1.getElementsByTagName("li");

alert(lis.length);

Node对象:节点对象.

Node中的常用的属性

节点包括元素节点属性节点文本节点.

nodeName

nodeType

nodeValue

元素节点

nodeName：标签名 nodeType: 1 nodeValue:没有 null

属性节点

nodeName: 属性名 nodeType: 2 nodeValue:属性的值

文本节点

nodeName: #text nodeType: 3 nodeValue:文本内容

案例:

// 分别获得元素节点的节点名称节点类型节点的值.

// 1.元素节点

var input = document.getElementById("username");

//alert(input.nodeName); // output INPUT

//alert(input.nodeType); // output 1

//alert(input.nodeValue); // output null

// 2.属性节点

var attr = input.getAttributeNode("name"); // 获得属性节点.

//alert(attr.nodeName); // output name

//alert(attr.nodeType); // output 2

//alert(attr.nodeValue); // output username

// 3.文本节点

var p = document.getElementsByTagName("p")[0];

var t = p.firstChild;

alert(t.nodeName); // output #text

alert(t.nodeType); // output 3

alert(t.nodeValue); // output 文本

节点对象的父节点子节点及同辈节点

parentNode

childNodes

firstChild

lastChild

nextSibling

previousSibling

检测节点中是否有子节点和属性.

hasChildNodes()

hasAttributes()

节点的插入

appendChild();

insertBefore(newNode,oldNode);

删除和替换节点.

removeChild()

replaceChild(newNode,oldNode)

复制节点

cloneNode(boolean); boolean:true 克隆的时候带着子节点一起克隆.默认是false。

innerHTML:获得标签的html的内容及设置标签的html内容.

innerHTML的案例:

var table = "<table width='400' border='1'><tr><td>1</td><td>2</td></tr><tr><td>1</td><td>2</td></tr></table>";

function createTable(){

document.getElementById("divv").innerHTML = table;

}

使用innerHTML生成动态的表格.

案例：

复选框全选/全不选/反选.

下拉列表左右选择.

省市联动（数组）

省市联动 (XML) ---

JS中的事件.

onclick:单击

ondblclick:双击

onchange:列表框改变事件

onmouseover:鼠标放在上面 onmouseout:鼠标离开 onmousemove:鼠标移动.

onload:页面加载时间 onunload:页面的卸载事件.

onblur:失去焦点 onfocus:获得焦点.

onkeyup:键盘事件 onkeydown:键盘事件

校验表单.

自学笔记：

day04

上节内容回顾

1、Date对象里面

** 获取当前的月 getMonth(): 返回 0-11

** 获取当前星期，星期日返回 0

2、Math对象里面

** 静态方法，Math.floor()

3、全局函数

eval()

4、js里面的重载

arguments：数组，存储参数

5、js的bom里面对象

navigator screen location history

6、window对象

setInterval和setTimeout

* clearInterval和clearTimeout

* alert confirm prompt close

**open("地址","","宽度高度")：打开新窗口

* opener：得到创建此窗口的窗口

7、dom解析html

8、对象有哪些？

document对象：整个文档

element对象：标签

属性对象

文本对象

Node节点对象

9、document对象

** getElementById

** getElementsByName: 返回数组

** getElementsByTagName: 返回数组

** write方法

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下面的子标签

//var lis = ul11.childNodes;

//alert(lis.length);

var lis = 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

var li1 = document.getElementById("li1");

//得到ul

var ul1 = li1.parentNode;

alert(ul1.id);

* 子节点

- li是ul的子节点

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

- firstChild：获取第一个子节点

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

//得到ul

var ul1 = document.getElementById("ulid");

//第一个子节点

var li1 = ul1.firstChild;

alert(li1.id);

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

//得到最后一个子节点

var li4 = ul1.lastChild;

alert(li4.id);

* 同辈节点

- li之间的关系是同辈节点

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

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

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

var li3 = 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 标签

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);

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

** removeChild方法：删除节点

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

- /*

1、获取到li24标签

2、获取父节点ul标签

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

//获取li标签

var li24 = document.getElementById("li24");

//获取父节点

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

var ul31 = document.getElementById("ulid31");

//删除（通过父节点）

ul31.removeChild(li24);

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

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

- 两个参数

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

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

- 代码

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);

** cloneNode(boolean): 复制节点

- //把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);

** 操作dom总结

* 获取节点使用方法

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

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

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

* 插入节点的方法

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

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

* 删除节点方法

removeChild方法：通过父节点删除

* 替换节点方法

replaceChild方法：通过父节点替换

6、innerHTML属性

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

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

*** //获取span标签里面的文本内容

var span1 = document.getElementById("sid");

alert(span1.innerHTML);

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

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

//获取到div

var div11 = document.getElementById("div11");

//设置内容

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

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

- //向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;

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

* 得到当前的时间

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

var d1 = date.toLocaleString(); //格式化

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

setInterval方法定时器

* 显示到页面上

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

* 使用innerHTML属性

* 代码

function getD1() {

//当前时间

var date = new Date();

//格式化

var d1 = date.toLocaleString();

//获取div

var div1 = 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属性

//获取输入的行和列

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;

}

Day04 dom详解及js事件

day04 dom详解

上次课内容回顾：

DOM对象:Document Object Model

DOM的介绍

DOM的分级：

DOM中的Document对象.

Element对象:元素(标签)

在标签下查找标签

Node对象:节点对象.

innerHTML:获得标签的html的内容 及 设置标签的html内容.

JS中的事件.

innerHTML:获得标签的html的内容及设置标签的html内容.