昔洛 的个人博客

Bug不空,誓不成佛

目录
WebAPI(上)
/        

WebAPI(上)

学习内容

  • WebAPI 介绍
  • 获取文档元素
  • 基础事件(DOM 0级事件)
  • 修改元素
  • 操作元素自定义属性
  • 高级事件(DOM 2级事件)
  • DOM 事件流
  • 事件对象

一、WebAPI 介绍

  • js组成:
    • ES:JavaScript 基础语法
    • DOM:把html文档当做对象
    • BOM:浏览器当做一个对象
  • WebAPI:浏览器的提供的两类(DOM控制html文档和BOM控制浏览器)内置方法
  • DOM & DOM 树
    • DOM
      • 描述:浏览器提供的一类操作 html 文档的方法
      • 作用:
        • 修改网页的内容、样式、结构
        • 响应用户对网页的操作
      • 用法:函数调用的方式,如:获取元素 document.getElementById(‘id’);
    • DOM 树:
      • 描述:HTML 文档在浏览器中的存储结构
      • 组成:文档(一个页面document)、元素(所有标签element)、节点(页面所有内容node)都被看成对象
    • DOM的 API 分类:获取元素、操作元素属性、事件、操作节点

二、获取文档元素

  • 通过 ID 获取元素
    • document.getElementById(‘id’); 通过元素 id 返回一个元素对象
  • 通过标签名获取元素
    • document.getElementsByTagName(‘标签名’)
    • 注意:返回伪数组数据,一个页面可以有多个相同标签名的元素,可以使用 .length 方法获取元素个数和 [index] 方法获取某个具体元素,不能使用其他数组内置方法
    var element = document.getElementById('father');
    element.getElementsByTagName('标签名')[0];
    element.getElementsByTagName('标签名').length;
    //可以通过**for循环**获取每一个元素
    for(var i = 0;i<element.getElementsByTagName('标签名').length;i++){
    	element.getElementsByTagName('标签名')[i];
    }
    
  • 通过类名获取元素 & 获取 body 元素
    • document.getElementsByClassName(‘类名’)
    • 返回伪数组数据,一个页面可以有多个相同类名的数据
    • body元素:document.body
  • 通过 CSS 选择器方式获取元素
    • 获取单个语法 element.querySelector(‘css选择器’),得到 element 中符合 CSS 选择器要求的第一个元素
    • 获取全部语法:element.querySelectorAll(‘css选择器’);返回所有符合 css 选择器元素的伪数组

三、事件基础(DOM 0级事件)

  • 事件:当用户在某个页面元素进行某种操作(鼠标点击、划过)时,网页能够做出相应的回应
  • 事件三要素:事件源、事件类型、事件处理程序
  • 注册事件步骤:获取事件源、绑定事件类型、添加时间处理程序
  • 注册事件语法:事件源.on事件类型 = 时间处理程序
var div = document.getElementById('div');
div.onclick = function() {
	console.log('I am div');
}
  • 事件类型:
// 点击事件
var div = document.getElementById('div');
div.onclick = function() {
	console.log('点击事件');
}
var ipt = element.getElementByTagName('input')[0];
// 获得焦点事件
ipt.onfocus = function(){
    console.log('我是获得焦点事件');
}

// 失去焦点事件
ipt.onblur = function(){
    console.log('我是失去焦点事件');
}

四、修改元素

修改元素内容

  • 操作元素属性步骤:① 获取需要操作的元素 ② 操作元素的属性
  • 标准属性:元素自带的属性(可读可写)
  • 获取语法:element.属性名
  • 设置语法:element.属性名 = ‘属性值’
  • 普通元素内容设置(div、p、span、a…)
    • element.innerHTML = ‘内容’ 识别标签、空格 经常使用
    • element.innerText = ‘内容’
  • 表单元素(input、textarea):element.value = ‘内容’

设置元素样式

  • style
    • 设置元素行内式,优先级高
    • element.style = ‘css属性名1:属性值; css属性名2:属性值’
    • element.style.css属性名 = ‘属性值’; 设置单个样式,如果样式用 - 连接则需要用驼峰方式设置
  • class
    • element.className = '类名1 类名2 类名3 设置多个样式 会刷新元素的class属性
    • element.classList 设置多个样式
      • 添加类 element.classList.add(‘类名1’,‘类名2’);
      • 移除类 element.classList.remove(‘类名1’,‘类名2’);
      • 切换类 element.classList.toggle(‘类名’): 以元素存在该属性删除该属性,不存在该属性就添加该属性s
  • 常用属性:
    • element.scr = ‘属性值’
    • element.disabled = true/false
    • element.checked = true/false

五、操作元素自定义属性

能够给元素添加自定义属性、能够获取自定义属性,完成数据传递

  • H5 方法(不兼容 ie6、ie7、ie8)
    • 设置语法:<p date-自定义属性名='自定义属性值'></p>属性名想叫什么就叫什么,可以用多个-连接 <p data-名称-名称 = '自定义属性值'></p>
    • 获取语法:element.dataset.自定义属性名,如果属性名用多个 - 连接,获取时应将属性名以 - 为分隔符,驼峰方式获取
  • 通用方法
    • 语法:<p 自定义属性名 = '自定义属性值'></p>,属性名想叫什么就叫什么,可以用多个 - 连接 `<p 名称-名称 = ‘自定义属性值’>

    • 获取/设置/删除语法:element.getAttribute(‘属性名’),返回类型是字符串 ,element.setAttribute(‘属性名’,‘属性值’),element.removeAttribute(‘属性名’)

高级事件(DOM 2级事件)

  • DOM 0级事件(on)
    • 语法:element.on + 事件类型 = 函数名/匿名函数
    • 特点:同一个元素只能注册一次某个类型的事件,多次注册,只有最后一次添加的事件有效
  • DOM 2级事件(addEventListener)
    • 语法:element.addEventListener(‘事件类型’,函数名/匿名函数)
    • 参数
      • 第一个参数:字符串,事件类型 不加on
      • 第二个参数:匿名函数/函数名(事件执行程序)
    • 特点:同一个元素能注册多个某种类型的事件,多次注册,事件触发时,会按照注册的先后顺序依次执行。
  • 解除事件
    • DOM 0级事件解除
      • 语法:element.on + 事件类型 = null
    • DOM 2级事件解除
      • 语法:element.removeListener(‘事件类型’,函数名)
      • 注意:想要解除某个事件,前提是这个事件注册时添加的事件处理函数是有名函数

七、DOM 事件流

  • 定义:事件发生时会在元素节点之间按照特定的顺序播放,这个传播过程即 DOM 事件流
  • DOM 事件流的三个阶段
    • 一开始从文档的根节点流向目标对象(捕获阶段)
      • 特点:在这个阶段,触发某个子元素的事件,其所有父元素上绑定的相同类型的事件都会被触发,且先执行父级事件
    • 然后在目标对象上被触发(目标阶段)
    • 最后再回复到文档的根节点(冒泡阶段)
      • 特点:在这个阶段,触发某个子元素,其所有父元素上绑定的相同类型的时间都会被触发,先执行子元素事件,再执行父级元素事件。
  • 捕获事件和冒泡事件:由于一个 DOM 事件触发时只能监听事件传播的一个阶段,要么是捕获,要么是冒泡阶段
    • 捕获事件
      • 利用 addEventListener(‘事件类型’,函数名/匿名函数,boolean) 给元素绑定事件,当第三个参数为 true,则为捕获事件,反之(false 默认)为冒泡事件
  • 冒泡事件的影响:

原因:由于事件冒泡阶段具有点击某个子元素,其父元素上绑定的点击事件也会出发的特点,有时候我们需要利用这个特性,有时候要避开这个特性

  • 利用:事件委托来解决
    • 例如:同时给100个 li 元素添加点击事件:遍历添加事件消耗性能多
    • 给动态生成的元素添加事件:由于事件是先绑定的,如果动态添加事件:就需要每添加一个,就绑定一次事件,消耗性能多
    • 原理:为了给子元素添加事件,可以将事件委托给父级,就是把事件绑定在父级身上,只需要绑定一次,在触发子元素的时候,由于冒泡就会触发父级元素的时间
    • 获取触发元素:event.target
  • 阻止事件冒泡
    • 造成影响:父继子级绑定相同事件,但是在点击子级的时候,不希望父级的事件触发,但是由于事件冒泡会触发的事件
    • 语法:event.stopPropagation();

八、事件对象

  • 概念:event 对象代表事件的状态,比如键盘的状态、鼠标的位置、鼠标按钮的状态,只有在事件执行程序中存在 event 对象
  • 使用方式:
    • 直接使用 event 关键字
    • 自定义名称:需要作为事件执行函数的形参通常使用 e 或 evt
    eventTarget.onclick = function(event) {
    // 这个 event 就是事件对象
    }
    eventTarget.addEventListener('click',function(evt) {
    // 此时 evt 就是事件的对象
    }
    
  • 事件对象常用属性
    • event.target:触发事件的元素 和 this 的区别是 this 指向绑定事件的元素
    • event.stopPropagation():阻止事件冒泡
    • event.preventDefault():阻止默认行为
      • 例如不让 a 标签跳转
    • 光标坐标:
    event.clientX:光标相对于视口的横坐标
    event.clientY:光标相对于视口的纵坐标
    event.pageX:光标相对于文档的横坐标(包含滚动条)
    event.pageY:光标相对于文档的纵坐标(包含滚动条)
    event.offsetX:光标相对于绑定事件元素的横坐标
    event.offsetY:光标相对于绑定事件元素的纵坐标
    
希望所有的 Bug 都会报错~
评论
歌名 - 歌手
0:00