webapi中主要是由BOM和DOM组成,BOM指的是浏览器对象,DOM指的是文档对象模型
首先要介绍的是DOM文档对象模型,把整个页面以及页面中所有内容解析成一个一个对象,想要操作页面中的内容,只能通过对象来操作。
一些术语:document 文档,整个页面 ; node 节点,页面中所有的内容 ,如标签节点,属性节点,注释节点,文本节点,空格,换行也是节点 ; element元素(标签节点)
获取元素的方法:
document.getElementById(‘id‘);------通过id查找 , 没有找到,返回null
document.getElementsByTagName(‘标签名‘);-------通过标签名查找 , 返回值为伪数组
document.getElementsByClassName()--------通过类名查找
document,getElementsByName()-----通过name属性查找(只适用于表单元素)
document.querySelector()----通过选择器查找:返回一个对象
document.querySelector()----通过选择器查找:返回伪数组
标签中的属性和对象中的属性一一对应(固有标签),所以可以通过修改对象的属性去修改标签属性
修改标签中的属性 (src , title, alt , className)
标签中写class,dom对象中写className,驼峰命名
注意:在设置类名的时候,className会覆盖原来的类名
操作文本内容的两种方法
1.innerText[内部的文本]
获取文本内容,只获取文本,舍弃标签
设置文本内容,不会解析标签,当作普通文本
2.inner HTML [内部的HTML]
获取文本内容,获取标签+内容
设置文本内容,可以解析标签
两者之间的共同点就是;在设置内容的时候,都会把原来的内容覆盖掉
style属性------只能操作行内样式
[标签中又style属性,dom对象中也有style属性]
style值是一个对象,里面有所有的行内样式:1.用点号添加其样式2.驼峰命名
注意点:1.对于 ‘-‘ 的单词换成驼峰命名
2. 单位 px
documnet的常用属性:
document.body 获取body
document.documentElement 获取html元素
固有属性:标签本来就有的属性
自定义属性:自己定义的属性
作用:存储数据,便于使用
放在固有属性会赵勇位置,体验度不好
操作自定义属性的方法
getAttribute 获取属性
setAttribute(name,value) 设置属性
removeAttribute(name)移出属性
注意点:1.参数是字符串类型的
2.操作类型,写class的
3.也可以操作固有属性