js dom笔记

Web API的概念
浏览器提供的一套操作浏览器功能和页面元素的API(BOM和DOM)
此处的Web API特指浏览器提供的API(一组方法)，Web API在后面的课程中有其它含义

DOM的概念
文档对象模型（Document Object Model，简称DOM）

文档：一个网页可以称为文档

• 节点：网页中的所有内容都是节点（标签、属性、文本、注释等）

• 元素：网页中的标签

• 属性：标签的属性

• DOM经常进行的操作

  获取元素

• 动态创建元素

• 对元素进行操作(设置其属性或调用其方法)

• 事件(什么时机做相应的操作)

• 获取元素

  根据id获取元素
  document.getElementById(id名)

• 根据标签名获取元素
  document.getElementsByTagName(标签名)
  返回的是一个类数组(伪数组)

• 根据name获取元素
  document.getElementsByName(name值)
  返回的是一个类数组(伪数组)

• 根据类名获取元素
  document.getElementsByClassName(类名)
  返回的是一个类数组(伪数组)

• 根据选择器获取元素
  document.querySelector(选择器) 选择一个，传入id
  document.querySelectorAll(选择器) 选择多个，传入类名，标签名等
  返回的是一个类数组(伪数组)

事件
触发-响应机制
Event接口表示在DOM中发生的任何事件，一些是用户生成的（例如鼠标或键盘事件），而其他由API生成

事件三要素

事件源:触发(被)事件的元素

• 事件类型:事件的触发方式(例如鼠标点击或键盘点击)
• 事件处理程序:事件触发后要执行的代码(函数形式)

事件写法
var box = document.getElementById(‘box’)
box.onclick = function() {
console.log(‘代码会在box被点击后执行’)
}

案例

点击按钮弹出提示框
• 点击按钮修改元素的样式

属性操作

非表单元素的属性
href、title、id、src、className

案例：
​ 点击按钮，切换img标签里的图片
​ 点击按钮显示隐藏div

innerHTML

向元素当中添加html内容(生成全部的标签)

innerText

向元素当中添加文本内容(不生成标签)

表单元素属性

value 用于大部分表单元素的内容获取(option除外)
• type 可以获取input标签的类型(输入框或复选框等)
• disabled 禁用属性
• checked 复选框选中属性
• selected 下拉菜单选中属性

自定义属性操作

getAttribute() 获取标签行内属性
• setAttribute() 设置标签行内属性
• removeAttribute() 移除标签行内属性
• 与element.属性的区别: 上述三个方法用于获取任意的行内属性

样式操作

使用style方式设置的样式显示在标签行内
var box = document.getElementById(‘box’)
box.style.width = ‘100px’
box.style.height = ‘100px’
box.style.backgroundColor = ‘red’

注意:
通过样式属性设置宽高、位置的属性类型是字符串，需要加上px

类名操作

修改标签的className属性相当于直接修改标签的类名
var box = document.getElementById(‘box’)
box.className = ‘clearfix’