DOM 获取DOM元素节点

文章目录

• 1.什么是DOM？
• • 节点的类型
  • DOM可以做什么？
• 2.获取DOM元素节点
• • 获取元素节点
  • • getElementById
    • getElementsByTagName()
    • getElementsByName
    • getElementsByClassName()
    • querySelector()
    • querySelectorAll()
• 3.操作属性节点
• • 标签上的属性
  • • 原生属性
    • 自定义属性
    • H5自定义属性
• 4.操作类名 class
• • 原生属性的方法
• 5.H5操作类名
• • 新增类名
  • 删除类名
  • 切换类名

1.什么是DOM？

• DOM：document object model 文档对象模型。
• DOM是由节点组成的。

节点的类型

• 元素节点：HTML标签
• 文本节点：标签中的文字（包含空格和换行。）
• 属性节点：标签的属性

DOM可以做什么？

• 可以操作HTML元素（增删改查）

• 增：添加，在一个DOM节点下添加一个子节点，相当于动态新增了一个HTML标签。
• 删：删除。将一个节点从HTML中删除，相当于删除了该节点的所有内容以及它包含的子节点。
• 改：改变。改变DOM节点中的内容，包含HTML标签中的内容以及标签的属性。
• 查：查找。对DOM进行操作之前，必须先查找到该DOM节点。
• 设置元素的属性值，设置元素的样式。

• 事件的触发响应：事件源 事件 处理函数

2.获取DOM元素节点

获取元素节点

getElementById

• 语法：document.getElementById(“id值”)；
• 功能：通过ID获取元素节点。
• 返回值：找到的元素节点，没有返回null。

getElementsByTagName()

• 语法：查找范围(节点).getElementsByTagName(“标签名”);
• 功能：通过标签名获取元素节点。
• 返回值：伪数组，类数组。

getElementsByName

• 语法：document.getElementsByName(“name属性值”);
• 功能：通过name属性获取元素节点。
• 主要用在表单中
• 返回值：伪数组，类数组。

getElementsByClassName()

• 语法：查找范围(节点).getElementsByClassName(“class值”);
• 功能：通过class属性获取元素节点。
• 返回值：伪数组，类数组.

【注意】该方法IE8以下不兼容

querySelector()

• 语法：document.querySelector(“css选择器”);
• 功能：通过css选择器获取元素节点
• 返回值：找到符合条件的第一个元素节点。

【注意】该方法IE8以下不兼容。

querySelectorAll()

• 语法：document.querySelector(“css选择器”);
• 功能：通过css选择器获取元素节点
• 返回值：伪数组

【注意】该方法IE8以下不兼容。

3.操作属性节点

标签上的属性

原生属性

• 标签天生就有的属性

• 语法:元素节点.属性名
• 读取：元素节点.属性名
• 修改：元素节点.属性名 = “值”

【注意】 class是一个特殊情况，不能直接用class，而是用className

自定义属性

• 开发人员自己定义的属性。不是标签自带的。自定义属性不能使用点语法调用。而是要使用三个方法去操作。（查改删）

• 元素节点.getAtrribute(“属性名”)

• 获取元素上的属性名对应的属性值

• 元素节点.setAtrribute(“属性名”,“属性值”)

• 修改/新增元素上的属性名对应的属性值。

• 元素节点.removeAtrribute(“属性名”)

• 删除元素节点上属性名对应的属性。

【痛点】自定义属性与原生属性不好区分。

H5自定义属性

• 元素节点上有一个dataset。里面包含了所有的H5自定义属性。

• 获取H5自定义属性值。

• 语法：元素节点.dataset.属性名

• 设值

• 语法：元素节点.dataset.属性名 = “值”

• 删除

• 语法：delete 元素节点.dataset.属性名

4.操作类名 class

原生属性的方法

• 获取类名：元素.className.
• 修改类名：元素.className = “值”

• 追加：元素.className = 元素.className + “值” 值前面要加一个空格

• 删除一个类名：

• 全部删除：元素.className = “”;
• 删除一个：

5.H5操作类名

• H5提供了一套便于我们操作类名的方法。
• 元素节点对象上有一个classList的属性。

新增类名

• 语法：元素.classList.add(“类名”)

删除类名

• 语法：元素.classList.remove(“类名”)

切换类名

• 语法：元素.classList.toggle(“类名”)