DOM访问表单控件的常用属性和方法
8.22DOM访问表单控件的常用属性和方法
<body>
<form id="myform" action="https://www.baidu.com/" method="get" target="_blank">
    <input name="username" type="text" value="张三"><br>
    <input name="password" type="text" value="123"><br>
    <select name="city">
        <option value="shanghai">上海</option>
        <option value="beijing" selected>北京</option>
    </select><br>
    <input type="button" value="获取表单内第一个控件" onClick="get2()">
    <input type="button" value="获取表单内第二个控件" onClick="get(formss.elements[1])">
    <input type="button" value="获取表单内第三个控件" onClick="get(formss.elements[2])">
    <input type="button" value="操作表单" onClick="oper()">
</form>
</body>
 
 
var formss;
//页面加载完成后执行
window.onload=function(){
    formss=document.getElementById("myform");
}
//获取form表单元素中的属性值
function get1(){
    //获取action的属性值
    var ac=formss.action;
//    alert(ac);
    //获取表单提交方式
    var me=formss.method;
    alert(me);
    
}
//获取表单控件第一个值
function get2(){
//    var val=forms.elements[0].value;
//    var val=forms.elements['username'].value;
    var val=formss.username.value;
    alert(val);
}
//通用方式
function get(obj){
    //获取obj元素节点的value属性值
    alert(obj.value);
    
}
//操作表单
function oper(){
    //重置表单
//    formss.reset();
    formss.submit();
}
 
 
 
 
<body>
<select name="city" id="city" size="5">
    <option value="beijing">北京</option>
    <option value="shanghai" selected>上海</option>
    <option value="tianjin">天津</option>
    <option value="nabjing">南京</option>
    <option value="shenzhen">深圳</option>
    <option value="wuhan">武汉</option>
</select><br>
<input type="button" value="第一个城市" onClick="get(sel.options[0])">
<input type="button" value="上一个城市" onClick="get(sel.options[sel.selectedIndex-1])">
<input type="button" value="下一个城市" onClick="get(sel.options[sel.selectedIndex+1])">
<input type="button" value="最后一个城市" onClick="get(sel.options[sel.length-1])">
 
</body>
 
 
var sel;
//在页面加载完成以后执行
window.onload=function(){
    sel=document.getElementById("city");
}
//通用方法获取option元素的文本值
function get(obj){
    alert(obj.text);
}
 
 
var tables;
//页面加载后执行
window.onload=function(){
    tables=document.getElementById("mytable");
}
//通用方法获取文本节点
function get(obj){
    alert(obj.innerHTML);
}
 
//获取文本节点：var 值=元素节点.innerHTML;
//设置文本节点：元素节点.innerHTML=值；
//修改
function updateCell(){
    //获取要修改的行的下标
    var rowIndex=document.getElementById("row").value-1;
    //获取要修改的列的下标
    var cellIndex=document.getElementById("cell").value-1;
    //获取要修改后的内容
    var content=document.getElementById("course").value;
    //修改
    tables.rows[rowIndex].cells[cellIndex].innerHTML=content;
}
posted on 2020-09-15 11:00  心灯不夜  阅读(228)  评论(0)    收藏  举报