JavaScript(Dom)|青训营笔记

Raften
125 阅读4分钟

JavaScript(Dom)|青训营笔记

这是我参与「第四届青训营 」笔记创作活动的的第6天

一、 Dom简介

  • 文档对象模型，是W3C组织推荐的处理可扩展标记语言(html|xml)的标准 编程接口
  • Dom树
    • 文档
    • 元素
    • 节点

二、 获取元素

根据ID获取

  • document.getElementById('id');
  • 返回的是对象
  • console.dir(); 打印返回的元素对象，更好的查看方法

根据标签名获取

  • document.getElementsByTagName('标签名字')方法
  • 返回对象名的集合 以伪数组的形式
  • 还可以通过获取某个元素(父元素)内部的所有指定元素获取
    • element.getElementsByTagName('');
    • 父元素必须指明哪一个元素

根据类名获取元素

  • document.getElemnetsByClassName('类名');

选择器选择

  • document.querySelector('选择器'); //根据选择器返回第一个元素对象
  • document.querySelectorAll('选择器'); //根据选择器返回第所有元素对象

获取特殊元素

  • 获取body标签 document.body;
  • 获取html标签 document.documentElement;

三、 事件基础

  • 事件是由三部分组成
    • 事件源、事件类型、事件处理程序
  • 常见的鼠标事件

js5.png

操作元素

  • 改变元素内容
    • element.innerText 除去html标签、同时除去空格和换行
    • element.innerHTML 包括html标签、同时保留空格和换行
  • 修改元素的属性 直接 element.属性 = 修改 即可

表单元素属性

  • type
  • value
  • checked
  • selected
  • disabled

样式属性操作

  • element.style 行内样式操作
  • element.className 类名样式操作
    • className 会直接改变class名称
    • 如果想要保留的原先的 className = "x y";

自定义属性操作

  • 获取属性值
    • element.属性 // 获取内置的属性值
    • element.getAttribute('属性'); // 可以获取自定义属性
  • 设置属性
    • element.属性 = value;
    • element.setAttribute('属性',value);
  • 移除属性
    • element.removeAttribute('属性');
  • 设置H5自定义属性
    • 以 data- 开头 如 data-inddex
    • 直接获取
    • dataset存取了所有 data-的属性
    • 如果有多个 - 连接 使用驼峰命名法
    • 如 div.dataset.index

四、 节点操作

父级节点

  • 获得元素最近的父节点、如果找不到 则为空
  • node.parentNode

子节点

  • parentNode.childNodes (标准) // 包含所有节点、包括元素节点、文本节点等，一般不使用
  • parentNode.children (非标准) // 获取 所有的子元素节点
  • parentNode.firstChidl // 返回第一个子节点，包括文本节点
  • parentNode.firstElementChild // 返回第一个元素节点
  • parentNode.lastChidl // 返回最后一个子节点，包括文本节点
  • parentNode.lastElementChild // 返回最后一个元素节点

兄弟节点

  • node.nextSibling // 下一个节点 包含文本节点、元素节点
  • node.previousSibling // 上一个节点 包含文本节点、元素节点
  • node.nextElementSibling // 返回下一个元素节点
  • node.previousElementSibling // 返回上一个元素节点

创建节点

  • document.createElement(''); // 创建节点
  • node.appendChild(child) // 添加节点，后面追加元素
  • node.insertBefore(child,指定原色) // 添加到指定元素之前

删除节点

  • node.removeChild(child) // 从DOM中删除一个子节点，返回删除的节点

赋值节点

  • node.cloneNoded(); // 括号为空或者false 为浅拷贝 true 深拷贝

三种动态创建元素的区别

  • document.write() // 会导致页面重绘
  • element.innerHTML // 拼接字符串的方式、效率低 如何优化? 通过数组形式，最后再进行 join 转换位字符串 效率更高
  • doucument.createElement() // 直接创建、效率较高

五、 DOM 事件高级

注册事件

传统方式

  • on开头
  • 事件唯一
  • 后面的处理函数会将前面注册的函数覆盖

方法监听注册方式

  • addEventListener()
  • 同一个元素同一事件可以添加多个监听器
  • eventTarget.addEventListener(type,listener,useCapture)
    • type: 事件类型字符串
    • listener: 事件处理函数
    • useCapture: 可选参数，是一个布尔值，默认是false

删除事件

  • 传统注册
    • eventTarget.onclick = null;
  • 方法监听注册方式
    • eventTarget.removeEventListener(type,listener,useCapture);

DOM事件流

  • 1.捕获阶段
  • 2.当前阶段
  • 3.冒泡阶段
  • addEventListener 第三个参数 true 捕获阶段、false或者默认 捕获阶段

事件对象

  • 1.event 事件函数的形参? 系统自动创建的
    • div.onclick = function(event) {}
  • 2.事件对象包含的信息，和点击事件有关
  • 阻止事件行为: e.preventDefault();
  • 阻止冒泡: e.stopPropagation();
  • 事件委托:
    • 原理: 不是每个子节点单独设置事件监听器，而是事件监听器设置在其父节点上，然后利用冒泡原理影响设置每个子节点
    • 作用: 只操作了一次DOM，提高了程序的性能

常用的鼠标事件

js6.png

常用的键盘事件

  • onkeyup 键盘松开
  • onketdown 键盘按下
  • onkeypress 键盘按下 不识别功能键
avatar
文章
阅读
粉丝