js之操作dom对象的属性

JS操作表单对象的属性:

<script type="text/javascript">
        
        function testform01(){
        //0
        //    var frm = document.forms[0];
        //1
        //    var frm = document.forms["form01"];
        //    alert(frm.name);
        //    alert(frm.action);
        //    alert(frm.method);
        //    alert(frm.enctype);
        
        //2
            //var forms = document.getElementsByName("form01");
            //var frm = forms[1];
            //alert(frm.name);
            //alert(frm.action);
            //alert(frm.method);
            //alert(frm.enctype);
            
        //3    
            //var forms = document.getElementById("form01");
        //    alert(forms.length);
        //    alert(forms.name);
        //    alert(forms.action);
        //    alert(forms.method);
        //    alert(forms.enctype);
        
        //4
        //    var forms = document.getElementsByTagName("form");
        //    alert(forms.length);
        //    var frm = forms[1];
        //    alert(frm.name);
        //    alert(frm.action);
        //    alert(frm.method);
        //    alert(frm.enctype);
        
        //5
            var frm = document.form02;
            alert(frm.name);
            alert(frm.id);
            alert(frm.action);
            alert(frm.method);
            alert(frm.enctype);
        }
        
        //6、
            function test02(){
                var fr02 = document.form02;
                //alert(fr02.elements.length); //==4
                alert(fr02.length); //==4
                alert(fr02.elements[3].value); //注册2
                //fr02.reset();   
                //fr02.submit();
            }
    </script>

上述7中方法可以获得表单对象,进而操作锁定应表单的属性

<body>
        <form name="form01" id="form01" action="test11" method="post" enctype="" onsubmit="return test03();" onreset="return test04();">
            <!-- 文件上传必须post -->
        姓名:<input  type="text" name="uname" /><br>
        密码:<input type="password" name="pwd" /><br>
        密码确认:<input type="password" id="repwd"/><br>
        <input type="submit" value="注册1"/>
        </form>
        
        <form name="form02" id="form02" action="test22" method="get" enctype="">
        姓名:<input  type="text" name="uname" id="uname2"/><br>
        密码:<input type="password" name="pwd" id="pwd1" /><br>
        密码确认:<input type="password" id="repwd2" name="repwd"/><br>
        <input type="reset" value="重置2" />
        <input type="submit" value="注册2"/>
        </form>
        <input type="button" value="测试01" onclick="testform01()" />
        <input type="button" value="测试02" onclick="test02()" />
    </body>

form对象的事件:

onsubmit 表单提交之前触发

onreset    表单重置之前触发

        function test03(){
            alert("test"); //模拟验证
            return false;  //验证阻塞
        }
        function test04(){
            alert("reset");
            return false;
        }
时间: 2024-10-12 21:21:02

js之操作dom对象的属性的相关文章

HTML DOM对象的属性和方法介绍(原生JS方法)

HTML DOM对象的属性和方法介绍 DOM 是 Document Object Model(文档对象模型)的缩写. DOM(文档对象模型)是针对HTML和XML文档的一个API(应用程序编程接口),它允许程序和脚本动态地访问和更新文档的内容,结构和样式. W3C DOM 标准被分为 3 个不同的部分: 核心 DOM - 针对任何结构化文档的标准模型 XML DOM - 针对 XML 文档的标准模型 HTML DOM - 针对 HTML 文档的标准模型 HTML DOM 定义了所有 HTML 元

HTML DOM对象的属性和方法

HTML DOM对象的属性和方法 HTML DOM 对象有几种类型: 1.Document 类型 在浏览器中,Document 对象表示整个 HTML 文档. 1.1属性 引用文档的子节点 documentElement var html = document.documentElement; //取得对<html>元素的引用 body var body = document.body; //取得对<body>元素的引用 获取文档信息 title 通过 title 属性可以访问当前

研究 Table DOM对象的属性和方法

[课程]web2.0程序设计[作业要求]建立一个网页,放置一个 table 元素和一个 Input 按钮,研究 Table DOM对象的属性和方法,用 JavaScript 实现 Table 插入行.删除行.交换两行内容.(仅使用 DOM 原生对象,且适用 IE 和 Chrome)[参考文档]table dom 参考手册 1.首先按照要求,建立一个网页 Test Table Dom(a table about fruits),假设功能是用来储存一家水果店的账单吧,存有水果店的水果和相应价钱,老板

JS中的DOM对象及JS对document对像的操作

DOM对象 windows:属性:opener(打开者) 方法:open().close(),setTimeout().setInterval()... location:属性:href 方法:reload()刷新 history:方法:go() status:不常用 document:下面详细介绍 JS对document对像的操作 分两个: 找到对象.操作对象. 找到对象的方法:document.getElementById().document.getElementsByName(). do

js操作DOM对象及怎么获取浏览器宽高

DOM独立于具体的编程语言,通常通过JavaScript访问DOM,不过并不严格要求这样.可以使用任何脚本语言来访问DOM,这要归功于其一致的API.getElementById(id) (document) 获取有指定惟一ID属性值文档中的元素getElementsByTagName_r(name) 返回当前元素中有指定标记名的子元素的数组hasChildNodes() 返回一个布尔值,指示元素是否有子元素getAttribute(name) 返回元素的属性值,属性由name指定有了W3C D

js/jquery 操作document对象

//获取对象 //js获取的是dom对象,jquery获取的是jquery对象 //jquery对象可以输出dom对象,索引方式输出dom对象,eq()[]方式输出dom对象; //通过id获取元素 /*var div=document.getElementById("one"); alert(div);//获取到的是一个html元素[object htmldivelement],DOM对象 var div=$("#one"); //alert(div);//获取到

javascript操作dom对象

什么叫DOM? DOM是文档对象模型(Document Object Model,是基于浏览器编程(在本教程中,可以说就是DHTML编程)的一套API接口,W3C出台的推荐标准,每个浏览器都有一些细微的差别,其中以Mozilla的浏览器最与标准接近. DOM属于浏览器,而不是JavaScript语言规范里的规定的核心内容. 查找元素 1.直接查找 方法名 描述 getElementById(id) (document) 获取有指定惟一ID属性值文档中的元素 getElementsByTagNam

JavaScript 操作Dom对象

1)JavaScript  操作DOM對象 1.DOM:是Document  Object  Model 的缩写,及文档对象模型 2.DOM通常分为三类:DOM Core(核心).HTML-DOM 和 CSS-DOM 1.DOM Core DOM Core 不是JavaScript的专属品,任何一种支持DOM的编辑器语言都可以使用它 它的用途不仅限于处理一种使用标记语言编写出来的文档如HTML文档 getElementById()/getElementByTagName()等方法都是 DOM C

JS中的DOM对象

DOM对象 1. DOM树 当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model),通过 HTML DOM对象,可访问 JavaScript HTML 文档的所有元素. HTML DOM 模型被构造为对象的树. 节点(Node):HTML文档中的所有内容都可以称之为节点,包含元素节点.属性节点.文本节点.注释节点和文档节点. 文档(Document):就是指HTML或者XML文件. 元素(Element):HTML文档中的标签可以称为元素. 2. 获取HTM