webapi基本api使用

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.也可以操作固有属性

猜你喜欢

转载自www.cnblogs.com/z-lin/p/10977102.html