竹影篱の文档

Appearance

On this page

创建元素 ​

使用以下方法创建新的 HTML 元素： ​

  • document.createElement(tagName)：创建一个新的 HTML 元素。
js
// 创建一个新的 <div> 元素
var newDiv = document.createElement("div");
  • document.createTextNode(text)：创建一个新的文本节点。
js
// 创建一个包含文本 "Hello World!" 的新文本节点
var newText = document.createTextNode("Hello World!");
  • element.appendChild(childElement)：将一个子元素添加到另一个元素中。
js
// 将新的 <div> 元素添加到页面的 <body> 元素中
document.body.appendChild(newDiv);
  • element.insertBefore(newElement, existingElement)：在一个元素之前插入一个新元素。
js
// 在 <body> 元素中的第一个子元素之前插入新的 <div> 元素
document.body.insertBefore(newDiv, document.body.firstChild);

这些方法可以用来动态地创建和修改 HTML 元素，从而使您的网页更加灵活和交互。

获取元素属性的值 ​

要获取 HTML 元素的属性值，可以使用元素的 getAttribute() 方法。该方法接收一个属性名作为参数，并返回该属性的值。例如，要获取一个元素的 src 属性的值，可以使用以下代码：

js
const img = document.querySelector('img');
const src = img.getAttribute('src');
console.log(src);

此代码将获取第一个 元素的 src 属性值，并将其输出到控制台。如果没有找到该元素，querySelector() 方法将返回 null。

需要注意的是，有些属性比如 class 和 style 是 JavaScript 对象的属性，可以直接通过对象属性来访问和设置。例如，要获取一个元素的 class 属性的值，可以使用以下代码：

js
const elem = document.querySelector('div');
const className = elem.className;
console.log(className);

同样的，要获取元素的 style 属性，可以使用以下代码：

js
const elem = document.querySelector('div');
const style = elem.style;
console.log(style);

这些代码将分别获取第一个div元素的 class 和 style 属性的值，并将它们输出到控制台。

定义元素属性 ​

全局属性
  • class：定义元素的一个或多个类名。
  • id：定义元素的唯一标识符。
  • style：定义元素的 CSS 样式。
  • title：定义元素的额外信息（通常以工具提示形式显示）。
  • data-*：定义自定义数据属性。
  • dir：定义文本方向。
  • lang：定义元素的语言。
  • tabindex：定义元素的 tab 键控制顺序。
  • accesskey：定义元素的快捷键。
  • contenteditable：定义元素的可编辑性。
  • contextmenu：定义元素的上下文菜单。
  • draggable：定义元素是否可拖动。
  • dropzone：定义元素何时拖放。
表单元素属性
  • name：定义表单元素的名称。
  • value：定义表单元素的值。
  • type：定义表单元素的类型。
  • disabled：定义表单元素是否被禁用。
  • readonly：定义表单元素是否只读。
  • required：定义表单元素是否必填。
  • autocomplete：定义表单元素的自动填充。
  • placeholder：定义表单元素的占位符文本。
  • maxlength：定义文本框的最大字符数。
  • pattern：定义文本框的输入模式。
  • min、max：定义数字、日期等输入类型的最小值和最大值。
  • step：定义数字、日期等输入类型的步长。
  • size：定义文本框的宽度。
  • multiple：定义选择框是否允许多选。
  • checked：定义单选框或复选框是否被选中。
  • form：定义表单元素所属的表单。
图像元素属性
  • src：定义图像的 URL。
  • alt：定义图像的替代文本。
  • width、height：定义图像的宽度和高度。
  • usemap：定义图像所使用的客户端图像映射。
链接元素属性
  • href：定义链接的 URL。
  • target：定义链接的目标窗口。
  • download：定义链接是否应该下载而不是导航。
  • rel：定义链接的关系。
  • media：定义链接的媒体类型。
一些定义属性的例子
  • id 属性
js
const div = document.createElement('div');
div.id = 'myDiv';
  • class 属性
js
const div = document.createElement('div');
div.className = 'container';
  • src 属性
js
const img = document.createElement('img');
img.src = 'image.jpg';
img.alt = 'A beautiful image';
  • href 属性
js
const link = document.createElement('a');
link.href = 'https://www.example.com';
link.textContent = 'Click here';
  • title 属性
js
const button = document.createElement('button');
button.title = 'Click me';
button.textContent = 'Click';
  • style 属性
js
const div = document.createElement('div');
div.style.color = 'red';
div.style.fontSize = '24px';
div.textContent = 'Hello World';
  • data-* 属性
js
const button = document.createElement('button');
button.dataset.action = 'save';
button.dataset.id = '123';
button.textContent = 'Save';

这些示例演示了如何使用 JavaScript 来定义 HTML 元素属性。可以使用 DOM 操作来创建新元素、获取现有元素并修改它们的属性。

dom核心重点是什么？ ​

核心重点

DOM（文档对象模型）的核心是将 HTML、XML 文档转换为树形结构，并提供一种访问和操作这些节点的方式。DOM 树中的每个节点都是一个对象，具有属性和方法，可以通过 JavaScript 来访问和操作。 DOM 的核心重点在于：

  • 节点类型：DOM 定义了不同类型的节点，如元素节点、属性节点、文本节点等。每种节点类型都有其特定的属性和方法，可以通过它们来访问和操作节点。
  • 父子关系：DOM 树中的每个节点都有一个父节点和零个或多个子节点。通过访问和操作节点的父子关系，可以更改 DOM 树的结构。
  • 节点属性：DOM 节点具有一组属性，如 id、class、href、src 等。这些属性可以用于访问和操作节点的属性，以及通过 JavaScript 动态更改 HTML 和 CSS。
  • 事件处理：DOM 提供了一种事件处理模型，可以将事件处理程序附加到元素上，以响应用户的操作，如单击、滚动、拖动等。
  • 动态更新：通过 JavaScript，可以动态更改 DOM 树中的节点、属性和内容，而无需重新加载整个页面。

理解和熟练掌握 DOM 的核心概念和操作，可以帮助开发人员更好地操作页面的元素和内容，实现交互性、动态性和可维护性的 Web 应用程序。