WEB APIS(共7天课程）Day1

DOM（2-1）
《一》DOM部分：

1. DOM的概念：document object model
2. DOM的作用操作页面元素

《二》查询元素（获取元素）
1.Id选择器：document.getElementByld(id名称）
2.标签获取元素对象的集合：

document.getElementsByTagName(标签名)   
div.getElementsByTagName()

3.类名获取元素对象的集合：document.getElementsByClassName(类名)
4.name属性获取对象的集合：document.getElementsByName()
5.根据选择器获取：

document.querySelector(选择器)  获取的是一个对象
document.querySelectorAll() 获取的是对象的集合

《三》事件

1. 三要素
   -事件源： 触发事件的元素对象
   事件类型： 要触发的是什么事件
   事件处理函数： 触发了事件你要干嘛
2. 事件类型
   click 点击事件
   focus 焦点事件
   blur 失去焦点事件
   input 表单内容发生改变的事件

《四》操作元素对象的属性

1.非表单元素 ：
element.innerText =’’ 设置标签中的文本内容
element.innerHTML = ‘’ 设置标签中的内容 会去解析html标签
element.src = ‘’ 设置图片的路径
element.title = ‘’ 设置标题 鼠标悬停在图片上显示的提示文本
element.href = ‘’ 修改a标签的href属性

2.表单元素 ：

• input.value = ‘’ 设置表单中的内容
• input.type= ‘’ 设置表单的类型
• input.disabled = true 是否禁用
• input.checked = true 是否选中

3.样式的操作
1.style属性

• element.style.属性名=“
  特点：设置数量比较少的样式，权重高，可以接受变量

2.设置类名：

• element.className =’’ 会覆盖原来的内容的
• 特点： 设置数量比较多的样式，权重不高，不能接收变量