day10——DOM（上）

操作元素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('属性名')