学习WEBAPI第一天

WebApi: 通过操作对象来实现操作标签的目的

Dom：操作页面 Bom:操作浏览器的

学习目标：

WebApi: 通过操作对象来实现操作标签的目的

一、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、这是内容content 注册协议框

二、属性

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 可以识别标签

注意： 一般用于双标签