DOM和JS
今日内容
1. DOM基础
1. Document对象
2. Element对象
3. Node对象
2. innerHTML
3. 事件处理
4. 表单验证
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。
操作dom总结
* 获取节点使用方法
getElementById()：通过节点的id属性，查找对应节点。
getElementsByName()：通过节点的name属性，查找对应节点。
getElementsByTagName()：通过节点名称，查找对应节点
* 插入节点的方法
insertBefore方法：在某个节点之前插入
appendChild方法：在末尾添加，剪切黏贴
* 删除节点方法
removeChild方法：通过父节点删除
* 替换节点方法
replaceChild方法：通过父节点替换
innerHTML:获得标签的html的内容 及 设置标签的html内容.
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;
案例二：动态显示时间
* 得到当前的时间
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);
案例三：全选练习
** 使用复选框上面一个属性判断是否选中
- 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、如果不是选中，下面是全不选
*/
案例四：下拉列表左右选择
* 下拉选择框
<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方法
*/
案例五：省市联动
* 创建一个页面，有两个下拉选择框
* 在第一个下拉框里面有一个事件 ：改变事件 onchange事件
- 方法add1(this.value);表示当前改变的option里面的value值
* 创建一个二维数组，存储数据
* 每个数组中第一个元素是国家名称，后面的元素是国家里面的城市
*
/*
1、遍历二维数组
2、得到也是一个数组（国家对应关系）
3、拿到数组中的第一个值和传递过来的值做比较
4、如果相同，获取到第一个值后面的元素
5、得到city的select
6、添加过去（使用）appendChild方法
- 创建option（三步）
*/
/*
由于每次都要向city里面添加option
第二次添加，会追加。
* 每次添加之前，判断一下city里面是否有option，如果有，删除
*/
案例六：动态生成表格
*创建一个页面：两个输入框和一个按钮
*代码和步骤
/*
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;
}
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:键盘事件
89
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
