操作元素CSS样式:
DOM(Document Object Model): 文档对象模型
其实就是操作 html 中的标签的一些能力
我们可以操作哪些内容
- 获取一个元素
- 移除一个元素
- 创建一个元素
- 向页面里面添加一个元素
- 给元素绑定一些事件
- 获取元素的属性
- 给元素添加一些 css 样式
- ... DOM 的核心对象就是 docuemnt 对象
document 对象是浏览器内置的一个对象,里面存储着专门用来操作元素的各种方法
DOM: 页面中的标签,我们通过 js 获取到以后,就把这个对象叫做 DOM 对象
document对象:
document对象属性
title 文档标题,即title标签内容
document对象方法
document.write() 输入文本到当前打开的文档
获取html元素:
getElementById('id属性值')
getElementsByClassName('class属性')
getElementsByTagName('标签名')
getElementsByName('name属性')
querySelector 和 querySelectorAll
操作元素内容:
innerHTML
innerText
value
示例
onclick事件绑定引入
操作元素CSS样式:
style 行内样式
className class类样式
classList 动态添加移除class类样式
添加样式 div.classList.add('active');
移除指定样式 div.classList.remove('active');
操作属性:
getAttribute('属性名')
setAttribute('属性名',"属性值")
removeAttribute('属性名')