day16 DOM(2)——获取设置表单的值

目录

操作表单元素属性

  • 表单很多情况,也需要修改属性,比如点击眼睛,可以看到密码,本质是把表单类型转换成文本框
  • 正常的有属性有取值的,跟其它的标签属性没有区别
    • 获取:DOM对象.属性名
    • 设置:DOM对象.属性名=新值
javascript 复制代码
<input type="text" value="computer">
    <script>
        const uname = document.querySelector('input')
        // 获取表单属性的值用  表单.value
        // innerHTML只能获取普通元素内容,得不到表单内容
        console.log(uname.value)
        uname.value = 'sky'
        console.log(uname.value)
         </script>

注意:innerHTML只能获取普通元素内容,得不到表单内容

加上以下代码后:

javascript 复制代码
uname.type = 'password'
  • 表单属性中添加就有效果,移除就没有效果,一律使用布尔值表示。true代表添加了该属性,false代表移除了该属性。
  • 如:disabled、checked、selected
javascript 复制代码
<input type="checkbox" name="" id="">
    <script>
        const ipt = document.querySelector('input')
        console.log(ipt.checked)
    </script>

加上 ipt.checked = true

(写成ipt.checked = 'true'也可以,实际上写什么都可以,因为有隐式转换,但是不提倡)

javascript 复制代码
<input type="checkbox" name="" id="">
    <script>
        const ipt = document.querySelector('input')
        ipt.checked = true
        console.log(ipt.checked)
    </script>

disabled举例:

(注意,button是在disabled = true时禁用,默认情况下是false,不禁用)

javascript 复制代码
 <button>feiyun</button>
    <script>
        const btn = document.querySelector('button')
        console.log(btn.disabled)//默认false,不禁用按钮
        btn.disabled = true
        console.log(btn.disabled)
    </script>

H5自定义属性------data

  • 标准属性:标签自带的属性,比如class、id、title等,可以直接使用点语法操作,比如disabled、checked、sele
  • 自定义属性:
    • 在html5中推出了专门的data-自定义属性
    • 在标签上一律以data-开头
    • 在DOM对象上一律以dataset对象方式获取

举例:

javascript 复制代码
    <div data-id="1" data-spm="dontknow">1</div>
    <div data-id="2">2</div>
    <div data-id="3">3</div>
    <script>
        const one = document.querySelector('div')
        console.log(one.dataset)
        console.log(one.dataset.id)
        console.log(one.dataset.spm)
    </script>
相关推荐
你的人类朋友11 分钟前
设计模式有哪几类?
前端·后端·设计模式
Yeats_Liao28 分钟前
Go Web 编程快速入门 10 - 数据库集成与ORM:连接池、查询优化与事务管理
前端·数据库·后端·golang
啃火龙果的兔子1 小时前
前端八股文react篇
前端·react.js·前端框架
打小就很皮...1 小时前
React 实现 i18next 中英文切换集成
前端·react.js·i18next
拉不动的猪1 小时前
函数组件和异步组件
前端·javascript·面试
淮北4941 小时前
html + css +js
开发语言·前端·javascript·css·html
你的人类朋友1 小时前
适配器模式:适配就完事了bro!
前端·后端·设计模式
Setsuna_F_Seiei2 小时前
CocosCreator 游戏开发 - 利用 AssetsBundle 技术对小游戏包体积进行优化
前端·cocos creator·游戏开发
黄毛火烧雪下2 小时前
高效的项目构建和优化之前端构建工具
前端
90后的晨仔2 小时前
在 macOS 上轻松获取 GIF 图片总时长:多种实用方法详解
前端