持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第18天，点击查看活动详情
Web Apis
js组成 ECMAScript DOM BOM
Web Api是浏览器提供的一套操作浏览器功能和页面元素的API(BOM 和 DOM)
DOM
文档对象模型,是W3C组织推荐的处理可扩展标记语言(HTML或者XML)的标准编程接口
可以改变网页的内容,结构和样式
DOM树(对象)
文档: 一个页面就是一个文档,DOM中用document表示
元素: 页面中的所有标签都是元素,DOM中使用element表示
节点: 网页中的所有内容都是节点(标签,属性,文本,注释),DOM中用node表示
获取元素
根据id获取
document.getElementById(id)
根据标签名获取元素对象--动态集合,当前页面增加了标签,这个集合也就增加了元素
document.getElementsByTagName('标签名')
element.getElementsByTagName('标签名')
//返回值为元素对象的集合(伪数组的形式存储的,数组元素是元素对象)
H5新增获取元素方式
document.getElementByClassName('类名'); //根据类名返回元素对象集合
document.querySelector('#nav'); //根据指定选择器返回第一个元素对象
document.querySelectorAll('选择器'); //根据指定选择器返回
获取特殊元素(body,html)
document.body //获取body元素
document.documentElement //获取html元素对象
操作表单元素属性,操作元素样式属性
type value disabled
element.style className
自定义属性操作
element.属性 获取内置属性值(元素本身自带的属性)
element.getAttribute('属性') 主要获取自定义的属性(标准)
element.属性 = '值' //设置内置属性值
element.setAttribute('属性', '值'); //class特殊
element.removeAttribute('属性') //移出属性
H5自定义属性
目的:为了保存并使用数据,有些数据可以保存到页面中而不用保存到数库中 但是有些自定义属性很容易引起歧义,不容易判断是元素的内置属性还是自定义属性
H5规定自定义属性data-开头作为属性名并且赋值
H5新增element.dataset.index 或者 element.dataset['index'] //ie11才开始支持
//如果自定义属性里面有多个链接,我们获取的时候采取 驼峰命名法
data-list-name="shop"
div.dataset['listName']
