笔记本

DOM 元素操作

初识元素事件

元素事件：某个元素发生一件事（被点击 click）。

事件处理程序：是一个函数，发生了一件事，应该做什么事情。

注册事件：将事件处理程序与某个事件关联。

this关键字在处理程序中指代当前发生的事件

获取和设置元素属性

通用方式：

  • getAttribute，setAttribute

可识别属性

正常的 HTML 属性

  • DOM对象.属性名：推荐

注意：

  1. 正常的属性即使没有赋值，也有默认值。
  2. 布尔属性在 DOM 对象中，得到的是 boolean
  3. 某些表单元素可以获取到不存在的属性
  4. 某些属性与标志符冲突，此时，需要更换属性名

自定义属性

HTML5 建议自定义属性使用data-作为前缀

如果遵从 HTML5 自定义属性规范，可以使用DOM对象.dataset.属性名控制属性

删除自定义属性

  • removeAttribute('属性名')
  • delete DOM.dataset.属性名

获取和设置元素内容

  • innerHTML：获取和设置元素内部的 HTML 文本
  • innerText：获取和设置元素内部的纯文本，仅得到元素内部显示出来的文本
  • textContent：获取和设置元素内部的纯文本，得到的是内部源代码中的文本

元素结构重构

  • 父元素.appenChild(元素)：在父元素末尾追加一个子元素。
  • 父元素.insertBefore(待插入的元素,哪个元素之前)：在父元素的指定元素之前插入一个元素
  • 父元素.replaceChild(替换节点，选定节点)：对选定的节点，替换一个子节点 Node 为另外一个节点。

细节：

更改元素结构效率较低，尽量少用。

创建和删除元素

创建元素

  • document.createElement('元素名')：创建一个元素对象
    • document.createTextNode('文本')
    • document.createDocumentFragment()：创建文档片段

克隆元素

  • DOM对象.cloneNode(是否深度克隆)：复制一个新的 DOM 对象并返回

childNodes也是实时集合

删除元素

  • 父元素.removeChild(子元素)：父元素调用，传入子元素，返回删除的子元素
  • remove()：删除自己