API 类别 - UI 核心学习笔记

概述

在前端开发中，UI 核心是非常重要的一部分。API 类别 - UI 核心提供了大量的接口和方法，用于支持各种 UI 组件的开发和交互。本学习笔记将对 API 类别 - UI 核心进行详细介绍，并且举出实例进行说明。

常用接口及方法

1. createElement()

createElement() 方法用于创建指定类型的 HTML 元素。

语法：

javascriptCopy Code
document.createElement(tagName)

实例：

htmlCopy Code
<div id="myDiv"></div>

javascriptCopy Code
var div = document.createElement("div");
div.innerHTML = "Hello World!";
document.getElementById("myDiv").appendChild(div);

2. appendChild()

appendChild() 方法用于将指定元素添加到当前元素的子节点列表的末尾。

语法：

javascriptCopy Code
parentNode.appendChild(node)

实例：

htmlCopy Code
<div id="myDiv">
  <p>Paragraph 1</p>
</div>

javascriptCopy Code
var p = document.createElement("p");
p.innerHTML = "Paragraph 2";
document.getElementById("myDiv").appendChild(p);

3. addEventListener()

addEventListener() 方法用于向当前元素添加事件监听器。

语法：

javascriptCopy Code
element.addEventListener(event, function, useCapture)

实例：

htmlCopy Code
<button id="myBtn">Click me</button>

javascriptCopy Code
document.getElementById("myBtn").addEventListener("click", function() {
  alert("Button clicked!");
});

4. querySelector()

querySelector() 方法用于获取符合指定 CSS 选择器的第一个元素。

语法：

javascriptCopy Code
document.querySelector(selector)

实例：

htmlCopy Code
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li class="highlight">Item 3</li>
</ul>

javascriptCopy Code
var item = document.querySelector(".highlight");
item.innerHTML = "Highlighted Item";

总结

以上就是 API 类别 - UI 核心的一些常用接口及方法。通过这些接口和方法，我们可以方便地创建和操作各种 UI 组件，从而提高前端开发的效率和交互体验。