JavaScript的组成

javascript组成

• BOM: Browser Object Model 浏览器对象模型 指window这个对象
• DOM: Document Object Model 文档对象模型 指document这个对象
• ECMAScript: 简称ES 是JS的核心语法部分

Bom

• window.setInterval() 定时器功能
• window.location 浏览器的地址栏
• window.history 浏览器的历史记录
• window.navigator 浏览器的相关引导信息
• window.localStorage 浏览器的本地存储
• window.document 浏览器的文档对象也称作 “DOM”
  1.window.location 包含许多当前网页的网址相关信息 可读取 可修改
  console.log(location); 显示信息
  location.href 当前的浏览器整个网址 也叫做URL
  location.reload() 该方法用于刷新当前页面
  2.window.history 用于管理浏览器的历史记录
  1.forward() 前进一次
  2.back() 后退一次
  3.go() 跳转 参数是数字 正数 表示前进几次 负数 表示后退几次 0表示刷新当前页
  3.window.open(); ()里放打开的页面的网址 打开页面
  window.close(); 关闭页面
  4.setInterval 定时器功能 按照时间间隔进行执行代码 执行多次 返回值是数字 数字是一个编号 代表这是第几个定时器
  第一个参数是函数 表示要执行的代码 第二个参数是数字 表示执行的时间间隔 单位是毫秒
  setInterval(function() {
  console.log(“定时器功能”);
  }, 1000); 1000毫秒后执行 执行多次
  5.setTimeout 延时器功能 按照时间间隔进行执行代码 执行一次 返回值是数字 数字是一个编号 代表这是第几个定时器
  第一个参数是函数 表示要执行的代码 第二个参数是数字 表示执行的时间间隔 单位是毫秒
  当setInterval这个函数执行的时候 不会立即执行里面的代码 而是等时间到才执行第一次
  setInterval(function() {
  console.log(“定时器功能”);
  }, 1000); 1000毫秒后执行 执行一次结束
  6.清除定时器： clearInterval() 通过清除编号清除
  7.清除延时器： clearTimeout()
  8.事件
  load事件 资源与相关资源加载完成后触发
  scroll事件 当页面比视口高时，页面发生了改变时会触发
  resize事件 当页面的尺寸发生变化更改窗口尺寸时
  9.navigator 浏览器的一些信息存储对象
  navigator.userAgent 获取浏览器代理信息字符串
  console.log(navigator.userAgent)
  navigator.platform 获取平台信息

10. window.alert(""); 提示文字
    window.prompt(""); 提示文字, 用户输入内容
    window.confirm(""); 提示内容 可以确定和取消

DOM

获取元素

document.getElementById(id) 根据ID获取元素 ID是HTML标签的属性 应当具备唯一性
返回值：如果有这个元素 就可以得到该元素对象。如果没有，就是null
document.getElementsByTagName(tagName) 根据标签名获取元素
返回值： 集合对象(类数组对象)
document.getElementsByName(name) 根据name属性获取元素
返回值： 集合对象(类数组对象)
document.querySelector(selector) 根据选择器获取元素
返回值： 元素对象
document.querySelectorAll(selector); 根据选择器获取多个元素
返回值： 集合对象(类数组对象)

属性操作

1.属性分类
HTML标准属性
通用属性: 所有标签都有的属性比如 id class style title …
非通用属性:只要有标签不认识就是非通用属性比如 src href type name …
自定义属性 自我定义的
2.操作标准属性
var box = document.getElementById(“box”); 获取元素
console.log(box.id); id属性可以设置 但是一般不设置 当作一个只读属性
操作类
var box = document.getElementById(“box”); 获取元素
box.className = “”; 清空所有类名
box.className += " bbb"; 添加类名
box.className = box.className.replace(“b”, “”); 如果想要把类名去掉一个
console.log(box.classList); classList属性对象 该属性是一个专门操作类名的对象 它有add方法等
操作样式
var box = document.getElementById(“box”); 获取元素
console.log(box.style.width); style 指的是行内样式对象 所以读取它就是在读取行内样式 设置它就是在设置行内样式
box.style = “width: 240px;” 这样修改可行 但是不推荐用 因为会把其他的样式也遮蔽掉
box.style.width = “240px”; 把style当对象来设置 或者 读取 要修改谁就只设置谁
3.操作自定义属性
设置自定义属性
setAttribute(name, value); 该方法用于设置HTML标签的属性并显示在标签上
读取自定义属性
getAttribute(name); 该方法用于从HTML标签的属性部分读取属性值
移除自定义属性
removeAttrbite(name); 该方法用于移除HTML标签的属性
4.内容操作
HTML文本
console.log(元素.innerHTML); 读取
元素.innerHTML = “

abc

”; 设置
纯文本
console.log(元素.innerText) 读取
元素.innerText = “你好”; 设置
5.快速获取特定元素
document.body
document.documentElement
document.head
document.title title(文本)