DOM常用对象
一、select对象
HEML中的下拉列表
属性：
1.options 获得当前select下所有option
2.options[i] 获得当前select下i位置的option
3.selectedIndex 获得当前选中的option的下标
4.size 设置或返回下拉列表中的可见行数。
5.length 返回下拉列表中的选项数目。
6.multiple 设置或返回是否选择多个项目。
7.id 设置或返回下拉列表的 id。
8.name 设置或返回下拉列表的名称。
方法：
1.add(新option对象) 向下拉列表添加一个选项。
2.blur() 从下拉列表移开焦点。
3.remove(index) 从下拉列表中删除一个选项。
时间：
1.onchange 当改变选择时调用的事件句柄。
二、option对象
HTML 表单中下拉列表中的一个选项。
创建：var newOpt=new Option(innerHTML,value);//创建option对象同时，设置对象的innerHTML和value属性
一句话：创建，设置，追加: select.add(new Option(innerHTML,value));
属性：
1.index 获取当前option的下标位置，专用于删除
2.selected 设置或返回 selected 属性的值。true false
示例：联动菜单
<!DOCTYPE HTML>
<html>
<head>
<title>联动菜单</title>
<meta charset="utf-8" />
<script>
/*使用 HTML DOM 的方式实现联动菜单*/
var categories=[
{"id":10,"name":'男装',"children":[
{"id":101,"name":'正装'},
{"id":102,"name":'T恤'},
{"id":103,"name":'裤衩'}
]},
{"id":20,"name":'女装',"children":[
{"id":201,"name":'短裙'},
{"id":202,"name":'连衣裙'},
{"id":203,"name":'裤子',"children":[
{"id":2031,"name":'长裤'},
{"id":2031,"name":'九分裤'},
{"id":2031,"name":'七分裤'}
]},
]},
{"id":30,"name":'童装',"children":[
{"id":301,"name":'帽子'},
{"id":302,"name":'套装',"children":[
{"id":3021,"name":"0-3岁"},
{"id":3021,"name":"3-6岁"},
{"id":3021,"name":"6-9岁"},
{"id":3021,"name":"9-12岁"}
]},
{"id":303,"name":'手套'}
]}
]; //专门遍历一级分类 data保存当前同级分类的数组
function loadData(data){
//创建一个select对象
//在select对象中追加一个新option，内容为请选择"-请选择-",值为0
//遍历data中每个类别对象
// 每遍历一个，就要在select中追加一个option，内容是当前对象的name属性值为当前对象的id属性
//
var select=document.createElement("select");
select.add(new Option("-请选择-",0));
for (var key in data)
{
select.add(new Option(data[key].name,data[key].id));
}
//为新创建的select对象，添加onchange时间
select.onchange=function(){
//this-->select //将当前select后的元素都删除
var parent=this.parentNode;
while(parent.lastChild!=this){
parent.removeChild(parent.lastChild);
} /*
获得和选中项位置对应的类别子对象
*/
var category=data[this.selectedIndex-1];
if(category!=undefined&&category.children){
loadData(category.children);
}
}
document.querySelector("#category").appendChild(select); } window.onload=function(){
loadData(categories);
} </script>
</head>
<body>
<div id="category"></div>
</body>
</html>
三、table对象、tableRow对象、tableCell对象
table对象
属性：
1.tHead 返回表格的 THead 对象。如果不存在该元素，则为 null。
2.tFoot 返回表格的 TFoot 对象。如果不存在该元素，则为 null。
3.tBodies 返回包含表格中所有 tbody 的一个数组。
4.rows 获得表中所有行对象; rows[i] 获得表中小标为i的一个行对象;
5.width 设置或返回表格的宽度。
6.border 设置或返回表格边框的宽度。
方法：
1.insertRow(rowIndex) 用于在表格中的指定位置插入一个新行。不写或-1为追加到最后一行
2.deleteRow(rowIndex) 从表格删除一行。
3.createTHead() 在表格中创建一个空的 tHead 元素; deleteTHead() 从表格删除 tHead 元素及其内容。
4.createTFoot() 在表格中创建一个空的 tFoot 元素; deleteTFoot() 从表格删除 tFoot 元素及其内容。
tableRow对象 代表table对象中的某一个tr对象
属性：
1.cells: 当前行中所有td对象
2.cells[i]: 获得当前行中下标为i的td
3.rowIndex: 当前行的下标位置，专用于删除行
方法：
1.var newCell=insertCell(index)
核心DOM：var td=document.createElement("td");tr.appendChild(td);
2.deleteCell(index)
tableCell对象
属性:cellIndex
示例：动态操作表格
<!DOCTYPE HTML>
<html>
<head>
<title>动态操作表格</title>
<meta charset="utf-8" />
<style>
table{width:500px; border-collapse:collapse;
text-align:center;
}
th,td{border:1px solid #ccc}
</style>
<script>
var data=[
{"id":1001,"name":'可口可乐',"price":2.5,"count":3000},
{"id":1003,"name":'百事可乐',"price":2.5,"count":5000},
{"id":1011,"name":'非常可乐',"price":2.3,"count":1000}
];
window.onload=function(){
var tbody=
document.querySelector("#data table tbody"); //遍历data数组中每个商品对象
for(var i=0;i<data.length;i++){
// 每遍历一个对象，就追加一个新行tr
var tr=tbody.insertRow();
// 遍历当前对象中每个属性
for(var key in data[i]){
// 每遍历一个，就在tr中新增一个td
var td=tr.insertCell();
// 将td的内容设置为当前对象的当前属性的值
// 如果当前属性名为"price"
// 则前加"¥",再toFixed(2)
td.innerHTML=
key=="price"?"¥"+data[i][key].toFixed(2):
data[i][key];
}
//遍历完当前对象所有属性后，添加"删除按钮列"
//Step1: 向tr中追加新td
var td=tr.insertCell(4);
//Step2: 创建button元素对象btn
var btn=document.createElement("button");
//Step3: 修改btn的内容为"删除"
btn.innerHTML="删除";
//Step4: 设置btn的onclick为"删除函数对象"
btn.onclick=function(){
var tr=this.parentNode //td
.parentNode; //tr
//Step1: 获得正在删除商品的名称，pname
// (获得tr中下标为1的格中的内容)
var pname=tr.cells[1].innerHTML;
//Step2: 弹出确认框:"是否继续删除"+pname+"吗？"
// 如果用户选择确认，才删除当前行
if(confirm(
"是否继续删除 "+pname+" 吗？")){
tr.parentNode.removeChild(tr);
}
};
//自动调用btn.onclick(); this-->当前btn
//Step5: 在td下追加btn
td.appendChild(btn);
}
}
</script>
</head>
<body>
<div id="data">
<table>
<thead>
<tr>
<th>编号</th>
<th>名称</th>
<th>单价</th>
<th>数量</th>
<th>操作</th>
</tr>
</thead>
<tbody> </tbody>
</table>
</div>
</body>
</html>
四、Form对象
1.查找form document.forms[序号|name]
2.数据采集的元素 document.forms[序号|name].elements[序号|name]
属性：
1.elements[] 包含表单中所有元素的数组。
2.method 设置或返回将数据发送到服务器的 HTTP 方法。
事件：
1.reset() 把表单的所有输入元素重置为它们的默认值。
2.submit 提交表单。
事件句柄：
1.onreset 在重置表单元素之前调用。
2.onsubmit 在提交表单之前调用。
示例：表单验证
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>实现带样式的表单验证
</title>
<link rel="Stylesheet" href="css/3_2.css" />
<script src="js/3_2.js"></script>
</head>
<body>
<form>
<h2>增加管理员</h2>
<table>
<tr>
<td>姓名：</td>
<td>
<input name="userName"/>
<span>*</span>
</td>
<td>
<div class="vali_Info">
10个字符以内的字母、数字和下划线的组合
</div>
</td>
</tr>
<tr>
<td>密码：</td>
<td>
<input type="password" name="pwd"/>
<span>*</span>
</td>
<td>
<div class="vali_Info">6位数字</div>
</td>
</tr>
<tr>
<td></td>
<td colspan="2">
<input type="submit" value="保存"/>
<input type="reset" value="重填"/>
</td>
</tr>
</table>
</form>
</body>
</html>
table{width:700px}
/*父元素下的第1个，第n个，最后一个td子元素*/
td:first-child{width:60px}
/*IE不支持nth-child*/
td:nth-child(2){width:200px}
/*IE*/
td:first-child+td{width:200px}
/*IE不支持--可以靠总宽度来调节
td:last-child{width:340px}*/
td span{color:red}
.vali_Info{/* 页面初始，验证消息不显示 */
display:none;
}
.txt_focus{/*只要文本框获得焦点时，给文本框穿*/
border-top:2px solid black;
border-left:2px solid black;
}
.vali_success,.vali_fail{
background-repeat:no-repeat;
background-position:left center;
display:block;
}
/* 验证消息：验证通过时div的样式 */
.vali_success{
background-image:url("../images/ok.png");
padding-left:20px;
width:0px;height:20px;
overflow:hidden;
}
/* 验证消息：验证失败时div的样式 */
.vali_fail{
background-image:url("../images/warning.png");
border:1px solid red;
background-color:#ddd;
color:Red;
padding-left:30px;
}
window.$=HTMLElement.prototype.$=function(selector){
return (this==window?document:this).querySelectorAll(selector);
}
/*当文本框获得焦点时：
给当前文本框穿txt_focus
同时找到旁边div，脱掉衣服*/
window.onload=function(){
var form=document.forms[0];//找到第1个form对象
//找到姓名和密码文本框对象
var txtName=form.elements["userName"];
var txtPwd=form.elements["pwd"];
/*为form绑定提交事件*/
form.onsubmit=function(){
//依次调用每个文本框的验证方法
//只有所有验证都返回true，结果才为true
//只要有一个验证失败(返回false)，就返回false
// 取消事件
var r=true;
//找到姓名文本框，调用文本框的onblur方法
r=txtName.onblur()&&txtPwd.onblur();
if(!r){//如果r验证未通过，则取消提交事件
var e=window.event||arguments[0];
if(e.preventDefault){
e.preventDefault() //DOM
}else{
e.returnValue=false //IE8
}
}
}
//为两个文本框对象绑定相同的获得焦点事件处理函数
txtName.onfocus=txtPwd.onfocus=function(){
this.className="txt_focus";
//找到this旁边的div，脱掉衣服
this.parentNode
.parentNode
.$("div")[0]
.removeAttribute("class");
}
txtName.onblur=valiName;
//txtName.onblur() this-->txtName
txtPwd.onblur=valiPwd;
}
function valiName(){//专门验证姓名文本框的方法
//当前文本框对象脱衣服
this.className="";
//找到旁边div
var div=this.parentNode.parentNode.$("div")[0];
//使用正则表达式验证当前文本框的内容是否正确
var r=/^\w{1,10}$/.test(this.value);
// 如果正确，给div穿vali_success
// 否则穿vali_fail
div.className=r?"vali_success":"vali_fail";
//返回正则表达式的验证结果
return r;
}
function valiPwd(){//专门验证密码文本框的方法
this.className="";
var div=this.parentNode.parentNode.$("div")[0];
var r=/^\d{6}$/.test(this.value);
div.className=r?"vali_success":"vali_fail";
return r;
}
DOM常用对象的更多相关文章
- DOM创建和删除节点、HTML DOM常用对象[转]
创建和删除节点:——核心DOM 1. 创建单个元素节点:3步: 1. 创建空元素节点对象: var elem=document.createElement("标 ...
- 添加/删除-HTML DOM 常用对象 -BOM-打开和关闭窗口- history-location
1. 添加/删除 3步: 1. 添加一个空元素 var a=document.createElement("a"); <a></a> 2. 定义元素的关键属 ...
- DOM_05之DOM、BOM常用对象
1.HTML DOM常用对象之Table:①创建:createTHead():createTBody():createTFoot():②删除:deleteTHead():deleteTFoot():③ ...
- DOM_04之常用对象及BOM
1.添加:①var a=document.createElement("a"):②设置关键属性:③将元素添加到DOM树:a.parent.appendChild(a):b.pare ...
- DOM_03之元素及常用对象
1.修改样式:访问内联样式:elem.style.css属性名:获得其他:var style=getComputerStyle(elem):*(* 获得焦点onfocus:失去焦点onblur:): ...
- HTML-DOM常用对象的用法（select/option/form/table）
HTML DOM 常用对象: 它对常用HTML元素操作的简化. Select对象 它代表页面上的一个select元素,常用属性有: select.value ——当前选中项的value ,没有valu ...
- Jsoup代码解读之二-DOM相关对象
Jsoup代码解读之二-DOM相关对象 之前在文章中说到,Jsoup使用了一套自己的DOM对象体系,和Java XML API互不兼容.这样做的好处是从XML的API里解脱出来,使得代码精炼了很多 ...
- DOM常用的属性和方法
之前一直傻傻分不清DOM和JavaScript究竟有什么区别,随着相关工作时间的增长,开始逐渐区分DOM和JavaScript了,最近,也一直在复习有关DOM方面的知识,<JavaScript ...
- 【repost】Javascript操作DOM常用API总结
Javascript操作DOM常用API总结 文本整理了javascript操作DOM的一些常用的api,根据其作用整理成为创建,修改,查询等多种类型的api,主要用于复习基础知识,加深对原生js的认 ...
随机推荐
- 三张照片解决--win10系统的edge浏览器设置为浏览器IE8,IE7,IE9---完美解决 费元星
主要思想: 第二种方法: 参考文档: 1.可以在系统盘的C:\Program Files\Internet Explorer中找到iexplore.exe,然后将其发送到桌 ...
- Wireshark lua dissector 对TCP消息包合并分析
应用程序发送的数据报都是流式的,IP不保证同一个一个应用数据包会被抓包后在同一个IP数据包中,因此对于使用自制dissector的时候需要考虑这种情况. Lua Dissector相关资料可以见:ht ...
- OpenCV入门：（三：图片Mask operations）
Mask operations 翻译为中文应该是掩模操作,具体操作步骤就是根据一个操作矩阵(又名kernel)处理图片中的每一个像素点,操作矩阵会根据当前像素点的周围像素来调整当前像素值. 1.示例 ...
- spring boot 打包问题
一.jar包 1.maven build package 2.linux 下执行 java -jar & 命令后台运行,也可加入服务运行 二.war包 1.将pom中的<packagin ...
- 超像素 superpixels 是什么东西
毕业设计要做图像分割 识别什么的. 看论文看到 superpixels 开始脑补是 像素插值算出来的 后来越看越不想,搜索发现根本是另外一回事 http://blog.sina.com.cn/s/b ...
- tcp四次撒手
转自:http://www.cnblogs.com/cy568searchx/p/3711670.html 由于TCP连接是全双工的,因此每个方向都必须单独进行关闭.这个原则是当一方完成它的数据发送任 ...
- 远程sql数据库连接不上，provider: 命名管道提供程序, error: 40 - 无法打开到 SQL Server 的连接 错误解决
错误信息: “ 标题: 连接到服务器------------------------------ 无法连接到 192.168.1.20. ------------------------------其 ...
- Nginx+tomcat+redis集群共享session实现负载均衡
1.nginx是一款轻量级兼备高性能的Http和反向代理服务器.所谓反向代理就是指用户发起访问请求,由代理服务器接受,然后将请求转发给正式服务器,并且将正式服务器处理完的数据返回给客户单,此时代理服务 ...
- 关于逻辑运算符&&和||及!
&& 表示and ,|| 表示or,!表示not. And(&&):对两个Boolean表达式执行逻辑和. AndAlso(&):与AndAlso类似,关键差异 ...
- Visual Source Safe的使用方法
VSS 的全称为 Visual Source Safe .作为 Microsoft Visual Studio 的一名成员,它主要任务就是负责项目文件的管理,几乎可以适用任何软件项目.管理软件开发中各 ...