document object model

Math

• 属性
  • Math.PI
• 方法
  • Math.random()
  • Math.floor()
  • Math.ceil()
  • Math.round()

Date

• 获取年月日时分秒步骤
• 时钟
  • 'YYYY-MM-DD hh:mm:ss'
  • 'YYYY/MM/DD hh:mm:ss'
• 定时器
• 倒计时
• 时间戳
• Date传参问题

javascript

• ECMASCRIPT标准语法 版本es5
• DOM
• BOM

DOM

• document object model 文档对象模型

• 将js和网页结合在一起 利用js来操作页面

  • 改变某一个标签样式
  • 改变某一个标签内容
  • 添加点击事件
  • ...

• 思路

  • 获取到这个标签

• 获取标签（元素）

  • 通过id获取元素 获取是唯一的元素
    • document.getElementById(id名称)
  • 通过类名获取元素 返回是一个数组 数组里面是每一个匹配的元素
    • document.getElementsByClassName(类名)
  • 通过标签名获取元素 返回是一个数组 数组里面是每一个匹配的元素
    • document.getElementsByTagName(标签名)
  • 通过css选择器方式获取元素
    • document.querySelector(css选择器) 单个元素 匹配第一个
    • document.querySelectorAll(css选择器) 多个元素 返回的是数组

• 操作元素

  • 操作元素的内容

    • 设置元素里面的内容 会覆盖之前的内容
      • 元素.innerHTML = 新内容 能够识别内容里面标签
      • 元素.innerText = 新内容 会将内容当成纯文本
    • 获取元素里面的内容
      • 元素.innerHTML
      • 元素.innerText

  • 操作元素的样式

    • 设置样式
      • 元素.style.css属性名 = css属性值
      • 这种设置是行内样式 一般是用来设置动态样式
      • 如果属性名是多个单词组成 要改成小驼峰
    • 获取样式
      • 元素.style.css属性名 只能获取行内样式
      • getComputedStyle(元素).css属性名 获取浏览器解析之后的样式 可以取到 行内 内部 外部 默认样式
      • IE8- 元素.currentStyle.css属性名

  • 操作元素的属性

    • 获取元素的属性值
      • 元素.getAttribute('属性名')
    • 设置元素的属性值
      • 元素.setAttribute('属性名', '属性值')

  • 操作元素的类名

    • 获取类名
      • 元素.className
    • 设置类名
      • 元素.className = 类名 会覆盖之前元素上面所有的类名
    • 添加类名
      • 元素.classList.add(类名)
    • 移除类名
      • 元素.classList.remove(类名)
    • 判断是否包含类名
      • 元素.classList.contains(类名)
    • 切换类名
      • 元素.classList.toggle(类名)

  • 操作元素的尺寸

    • 获取一个元素的实际宽度
      • 元素.clientWidth
      • 元素.offsetWidth
    • 获取一个元素的实际高度
      • 元素.clientHeight
      • 元素.offsetHeight

• css选择器

  • 标签选择器 标签名
  • id选择器 #id名
  • 类选择器 .类名
  • 群组选择器（并列选择器） 选择器,选择器
  • 后代选择器 选择器 选择器 ul li
  • 子代选择器 选择器>选择器
  • 兄弟选择器 选择器+选择器
  • 相邻选择器 选择器~选择器
  • 伪类选择器 选择器:伪类
  • 属性选择器 选择器[属性名]
  • 属性选择器 选择器[属性名=属性值]
  • 交集选择器 选择器选择器 li.active{}