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 id="city"> <li>北京</li> <li>上海</li> <li>广州</li> </ul> </BODY> <SCRIPT LANGUAGE="JavaScript"> // 需求:创建一个<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>
<li>wwww</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>
<option>111</option>
<option>111</option>
</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;
}