目录
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中
获取元素:
document.element.getElementsByTabName('标签名') 返回一个伪数组,如找不到返回空的伪数组
document.getElementById('id名') 返回符合条件的那个元素,如找不到返回null
获取body：document.body
获取HTML: document.documentElement
事件： 点击事件 click
事件源： 给谁注册事件,谁就是事件源
事件处理函数：出发事件时,调用的函数
事件源.on + 事件名 = 事件处理函数：出发事件时
操作元素的属性：
innerText
innerHTML
相同点：都会覆盖原来的内容
不同点：innerText 只识别文本
innerHTML 可以识别标签
注意： 一般用于双标签