一、封装获取元素的方法
封装思想——函数封装——代码复用
?function?get_id(id){
??? ?// 这个函数是专门来通过id获取元素
??? ?return?document.getElementById(id)
?}
?
?function?get_els(parentId,?tagName){
??? ?// 这个函数是专门来获取某个父标签范围内的某些标签
??? ?return?get_id(parentId).getElementsByTagName(tagName)
?}二、表单元素属性
常用的表单元素包括 input、select、textarea、button等，下面我们学习这些表单元素中常用的属性。
- value 用于获取和设置表单元素的内容
- type 用于获取和设置input标签的类型
- checked 复选框选中属性（true表示选中, false表示不选中）
- disabled 用于禁用表单输入或选择操作
需求：点击按钮修改input的类型和内容
html和css代码
?JavaScript代码
?var?btnObj?=?document.getElementById("btn");
?btnObj.onclick?=?function?() {
??? ?//修改按钮的value属性
??? ?//btnObj.value = "我是按钮我被修改了";
??? ??this.value?=?"我是按钮我被修改了";
??? ??this.type?=?"text";
??? ??this.id?=?"btn2";//审查元素看到id也是可以被修改的
?}需求：点击按钮修改单选框的值（性别男改成女）
html和css代码
?
?男
?女
?保密 JavaScript代码
?var?btn1?=?document.getElementById("btn1");
?btn1.onclick?=?function?() {
??? ?document.getElementById("rad1").checked?=?true;
?}需求：点击按钮修改复选框的值（选中 #ck1 和 #ck2 ）
html和css代码
?JavaScript代码
?var?btn2?=?document.getElementById("btn2");
?btn2.onclick?=?function?() {
????document.getElementById("ck1").checked?=?true;
????document.getElementById("ck2").checked?=?true;
?}需求：点击按钮禁止文本框输入
html和css代码
?
? JavaScript代码
?// 需求：点击按钮时，禁用文本框
?//先根据id获取按钮,为按钮注册点击事件,添加事件处理函数
?var?btn?=?document.getElementById("btn");
?btn.onclick?=?function?() {
??? ??//根据id获取文本框,设置disabled属性
??? ??document.getElementById("txt").disabled?=?true;
?}