标签:WEBAPI 返回 第一天 DOM 标签 元素 学习 事件 操作
目录
WebApi: 通过操作对象来实现操作标签的目的
Dom:操作页面 Bom:操作浏览器的
学习目标:
一、DOM 中常用的操作
1、获取元素
2、对元素进行操作(设置其属性或调用方法)
3、动态创建元素
4、给元素注册事件
二、doucument对象
三、获取元素
1、getElementsByTagName("标签名")
结果: 返回一个伪数组,包含符合条件的所有元素
2、getElementById('id名') 通过id获取元素
结果:返回的就是那个对应的元素,如果找不到就返回一个空的伪数组
3、总结:
(1)批量获取:document/element.getElementsByTagName('标签名')
结果:返回一个伪数组,如果找不到返回空的伪数组
(2)通过id获取:
document.getElementById('id名')
结果:返回具体的元素,找不到返回null
小结:通过document这个对象调用获取元素的方法
getElementById 返回的是对应的DOM元素, 如果没有返回null
getElementsByTagName 返回的是存储DOM元素的伪数组,如果没有返回空的伪数组
四、注册事件
注册事件的语法: 元素.on事件名 = 函数;
一、事件的三要素:
(1)、事件源: 给谁注册事件,谁就是事件源
(2)、事件名: 要注册什么事件,那个就是是事件名,点击事件的事件名是: click
(3)、事件处理函数: 事件触发的时候会被调用的函数
二、给a标签注册点击事件需要注意:
(1)、由于a标签的超链接功能,默认会刷新页面/跳转页面
在事件处理函数的最后一行,写一个truern falese
可以阻止a标签的默认刷新/跳转页面行为
三、总结:通过id获取元素注册点击事件,添加事件处理函数
五、操作元素的属性
1、元素名.innerText 返回元素里面的所有的文本,赋值时(不会识别标签)
2、元素名.innerHTML 返回元素里面的所有内容,赋值时(会识别标签,把标签直接渲染出来)
注意:凡是成对的标签,中间文本内容,设置的时候都可以用
3、元素名.id = "xx" 修改元素的内容
4、this 再某个元素的事件中,自己的事件中的this就是当前这个元素
六、当页面加载完时,script代码已经执行完(已经给每个元素注册事件),
当触发事件时,才会执行事件处理函数
七、表单标签和属性
一、标签
1、text:文本框
2、button:按钮
3、 :鼠标点击下拉菜单
4、 注册协议框
二、属性
1、selected :代表选中按钮的意思,布尔类型
2、disabled :禁用的意思
3、readonly:只读的意思
八、注意事项
1、凡是css中这个属性是多个单词的写法,在JS代码中的DOM操作时候把 - 干掉
后面单词首字母大写即可
2、在表单标签中,如果属性和值只有一个,并且是属性本身,那么再写JS
代码DOM操作的时候,这个属性值,是布尔类型就可以
九、总结
DOM:把页面上的标签抽象成对象,在js中通过操作对象,实现操作页面上的标签目的
元素:在html中叫做标签,在DOM中,称之为元素
获取元素:
document.element.getElementsByTabName('标签名') 返回一个伪数组,如找不到返回空的伪数组
document.getElementById('id名') 返回符合条件的那个元素,如找不到返回null
获取body:document.body
获取HTML: document.documentElement
事件: 点击事件 click
事件源: 给谁注册事件,谁就是事件源
事件处理函数:出发事件时,调用的函数
事件源.on + 事件名 = 事件处理函数:出发事件时
操作元素的属性:
innerText
innerHTML
相同点:都会覆盖原来的内容
不同点:innerText 只识别文本
innerHTML 可以识别标签
注意: 一般用于双标签
标签:WEBAPI,返回,第一天,DOM,标签,元素,学习,事件,操作 来源: https://www.cnblogs.com/xiaoming9527/p/11615218.html
本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享; 2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关; 3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关; 4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除; 5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。