访问HTML元素方式（3种）
- 根据ID访问HTML元素
- 根据CSS选择器访问HTML元素
- 利用节点关系访问HTML元素
根据ID访问HTML元素
//格式
document.getElementById("元素ID")
<body>
<div id="id1">元素一</div>
<textarea id="id2">元素二</textarea>
//访问元素一DIV中的内容
alert(document.getElementById("id1").innerHTMl);
//访问元素二textarea中的内容
alert(document.getElementById("id2").value);
//通过按钮访问元素内容
<input type="button" value="访问元素内容" onclick="accessById()";
<script>
var accessById=function(){
alert(document.getElementById("id2").value);
}
</script>
</body>
访问表单控件
<body>
//定义from表单ID名称为d
<form id='d' action="" method="get">
//input 按钮下标为0
<input name='user' type='text' />
//input name为color
<input name='pass' type="text" />
//下拉列表框color
<select name='color'>
<option value='red'>红色</option>
<option value='blue'>蓝色</option>
</select>
//通过elements属性,d为组件数组,第一个组件下标为0
<input type='button' value="第一个" onclick="alert(document.getElementById('d').elements[0].value);" />
//通过elements属性,d为组件数组,指定name='pass'
<input type='button' value="第二个" onclick="alert(document.getElementById('d').elements['pass'].value);" />
//指定name='color'组件的值
<input type='button' value="第三个" onclick="alert(document.getElementById('d').color.value);" />
</form>
//elements.length输出组件数组d中组件全部个数。
<script>
alert(document.getElementById('d').elements.length);
</script>
</body>
访问列表框组件
组件名.length：返回下拉列表框菜单个数
组件名.options[下标-1]:组件数组指定下标菜单
组件名.selectedIndex:返回下拉列表选中的菜单项索引，如果多选则显示第一个选中菜单的索引下标
组件名.selected：返回该项是否被选中
动态修改元素
1. innerHTML呈现div，td等内容
2. value呈现input，textarea等内容
3. style修改样式
4. options[index]修改指定index值，其中index从0开始
<body>
改变第<input id='row' type='text' size="2" />行，
第<input id='cel' type='text' size="2" />列的
值为：<input id='celVal' type="text" size="16" /><br >
<input type="button" id="chg" value="改变" onclick="change();"/>
<table id='d' border='1' style='width:580;broder-collapse:collapse;'>
<tr>
<td>java讲义</td>
<td>JAVA实战</td>
</tr>
<tr>
<td>java讲义</td>
<td>JAVA实战</td>
</tr>
<tr>
<td>java讲义</td>
<td>JAVA实战</td>
</tr>
</table>
<script type="text/javascript">
var change=function(){
//获取表格名称
var tb=document.getElementById('d');
//获取行下标
var row=document.getElementById("row").value;
//转化为int类型
row=parseInt(row);
//isNaN判断row是否为整数
if(isNaN(row)){
alert('您要修改的行必须是整数！');
return false;
}
//获取列下标
var cel=document.getElementById("cel").value;
cel=parseInt(cel);
if(isNaN(cel)){
alert("您要修改的列必须是整数!");
return false;
}
//输入row小于d组件中rows数值，cel小于当前输入row中的cells总行数
if(row>tb.rows.length||cel>tb.rows.item(0).cells.length){
alert("修改的值不在括号内");
return false;
}
//将input框中值赋给表格
tb.rows.item(row-1).cells.item(cel-1).innerHTML=document.getElementById("celVal").value;
}
</script>
</body>
动态添加组件
列表框、下拉菜单动态添加
//body的ID为test
<body id='test'>
<script>
//创建select节点标签
var a=document.createElement("select");
for(var i=0;i<10;i++){
//创建option节点标签
var op=document.createElement("option");
op.innerHTML="新增的选项"+i;
//null表示在列表内容从0开始顺序存入
//1表示列表第一个内容顺序存入其他逆序存入
a.add(op,null);
}
设置select字体
a.size=5;
//在test节点末尾位置添加a节点
document.getElementById("test").appendChild(a);
</script>
</body>
单元表格的添加
//给body定义ID为test
<body id='test'>
<script>
//创建table标签给a
var a=document.createElement("table");
//设置table标签的样式
a.style.width="800px";
//单元格之间没有间隔
a.style.borderCollapse='collapse';
a.border=1;
//为a创建一个标题
var caption=a.createCaption();
//标题名称为"表格标题"
caption.innerHTML="表格标题";
for(var i=0;i<10;i++){
//添加10行 row
var tr=a.insertRow(i);
for(var j=0;j<5;j++){
//在行中插入单元格insertCell
var td=tr.insertCell(j);
td.style.padding="5px";
td.innerHTML="单元格内容"+i+j;
}
}
//在a的末尾节点后添加内容
document.getElementById("test").appendChild(a);
</script>
</body>
删除HTML元素
//给body定义id为test
<body id="test">
//添加input元素，类型为按钮，初始不可用 ，点击执行add事件
<input id="add" type="button" value="增加" disabled onclick="add();" />
//添加input元素，类型为按钮，点击执行del事件
<input id="del" type="button" value="删除" onclick="del();" />
//添加div元素，
<div id="target" style="width:240px; height:50px;border:1px solid black">被控制目标元素</div>
<script>
//将id为test的元素赋值给body
var body=document.getElementById("test");
//将id为target的元素赋值给target
var target=document.getElementById("target");
var add=function(){
//添加当前节点的最后一个子节点位置
body.appendChild(target);
//添加按钮设置为不可用
document.getElementById("add").disabled="disabled";
//删除按钮设置为可用
document.getElementById("del").disabled="";
}
var del=function(){
//删除target的元素
body.removeChild(target);
document.getElementById("add").disabled="";
document.getElementById("del").disabled="disabled";
}
</script>
</body>
动态删除列表框
<body>
//初始化input元素，类型为text
<input id="opValue" type='text' />
//初始化input元素，类型为button，点击执行add事件
<input id="add" type='button' value="增加" onclick="add()" />
//初始化input元素，类型为button，点击执行del事件
<input id="del" type="button" value="删除" onclick="del()" />
//初始化select元素，id为show
<select id="show" size="8" style="width: 180px;"></select>
<script>
//获取id为show的元素标签，并赋值给show
var show=document.getElementById("show");
//定义add过程
var add=function(){
//将id是opValue元素中的value值添加到Option元素中，并将标签赋值给op
var op=new Option(document.getElementById('opValue').value);
//将id为opValue的元素标签赋值给opValue
var opValue=document.getElementById("opValue").value;
//判断opValue标签所对应的元素长度
if(opValue.length==0){
alert("输入值为空")
}else{
//在id为show元素中末尾处添加option元素，其值为op标签中的元素值
show.options[show.options.length]=op;
}
}
var del=function(){
//判断id为show的select元素长度是否为0
if(show.options.length>0){
//如果select元素中有option元素则删除
show.remove(show.options.length-1);
}
}
</script>
</body>
删除单元格
<body>
//input元素id为delRow，类型为button，单击执行delRow过程
<input id="delRow" type="button" onclick="delRow()" value="删除最后一行"/>
//input元素id为delCell，类型为button，单击执行delCell过程
<input id="delCell" type="button" onclick="delCell()" value="删除最后一单元格"/>
//input元素id为null，类型为button，单击执行delRow过程
<input id="null" type="button" onclick="delRow()" value="删除空白行" disabled/><br>
//input元素id为Row，类型为text
<input id="Row" type="text" placeholder="输入删除行数">
//input元素File，类型为text
<input id="File" type="text" placeholder="输入删除列数">
//input元素ok，类型为button,单击后执行delOk事件
<input id="ok" type="button" onclick="delOk()" value="删除输入单元格">
//初始化table元素，id为test
<table id="test" border="1" style="width: 500px;">
<caption>单元格删除测试练习</caption>
<tr>
<td>11</td>
<td>12</td>
</tr>
<tr>
<td>21</td>
<td>22</td>
</tr>
<tr>
<td>31</td>
<td>32</td>
</tr>
<tr>
<td>41</td>
<td>42</td>
</tr>
</table>
<script>
//获取id为test的元素标签赋值给tab
var tab=document.getElementById("test");
//定义delRow过程
var delRow=function(){
//判断row是否为空
if(tab.rows.length>0){
//不为空则执行删除操作
tab.deleteRow(tab.rows.length-1);
//删除空白行按钮默认为不可用
document.getElementById("null").disabled='disabled';
}else{
//如果row为0则代表table中没有row了
alert("行已经没有行了");
return false;
}
}
//定义dellCell过程
var delCell=function(){
//获取tab标签中rows属性值，赋值给rowList
var rowList=tab.rows;
//获取此行中单元格数
var lastRows=rowList.item(rowList.length-1);
//判断行和单元格是否为最后一条
if(lastRows.cells.length==0 && tab.rows.length==1){
document.getElementById("delRow").disabled='disabled';
document.getElementById("delCell").disabled='disabled';
document.getElementById("null").disabled='disabled';
alert("已经没有行了");
return false;
//判断此行是否有单元格
}else if(lastRows.cells.length>0){
//删除此行最后一个单元格
lastRows.deleteCell(lastRows.cells.length-1);
document.getElementById("null").disabled='disabled';
}
else{
document.getElementById("null").disabled='';
alert("请点击删除空白行");
return false;
}
}
//定义删除指定单元格过程delOk
var delOk=function(){
//获取输入单元格行数
var Row=document.getElementById('Row').value;
//获取单元格列数
var File=document.getElementById("File").value
//输入数据转换为整型
Row=parseInt(Row);
File=parseInt(File);
//数据转换整型的过程中，如果数据不为整型则isNaN为真
if(isNaN(Row)||isNaN(File)){
alert("输入错误");
return false;
//判断输入值是否超过已有值
}else if(Row>tab.rows.length||File>tab.rows[Row-1].cells.length){
alert("超出已有表格,请重新输入");
return false;
}else{
//获取table元素中row列的下标，然后deleteCell删除元素，元素下标为File-1
tab.rows[Row-1].deleteCell(File-1);
}
}
</script>
</body>
1502
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
