JavaScript Dom编程基础

什么是DOM编程？

DOM (Document Object Model) 是一种跨平台和语言无关的编程接口，它允许JavaScript脚本动态地访问和操作HTML或XML文档的内容，能够实现对网页的动态操作和交互。以下是JavaScript DOM编程的基本步骤：

1. 获取HTML元素：使用JavaScript的document对象获取HTML页面上的元素节点，可以使用 getElementById(), getElementsByClassName(), getElementsByTagName()等方法获取元素节点。
2. 操作HTML元素：使用DOM的属性和方法来操作获取到的元素，比如设置元素的文本内容、样式等，可以使用 innerHTML、 style等属性 。
3. 监听事件并处理：使用JavaScript的事件处理程序来绑定HTML元素上的事件，可以使用 onclick、onsubmit、onload、onchange等事件来监听用户的操作，然后执行处理程序。

将HTML元素内容改变的DOM实例

<button id="myButton">Click me</button>
<p id="myText">Hello World!</p>

// 获取按钮元素和文本元素
const button = document.getElementById("myButton");
const text = document.getElementById("myText");

// 点击按钮时修改文本内容
button.onclick = function() {
  text.innerHTML = "Hello JavaScript!";
};

案例中使用 getElementById() 方法获取了按钮和文本元素，并使用 onclick 事件处理程序将按钮的点击事件与匿名函数绑定，当用户点击按钮时，会执行匿名函数并修改文本元素的内容。

总的来说，JavaScript DOM编程可以实现HTML页面的动态更新、交互和响应用户的操作。

如何使用循环语句动态生成HTML元素，并使用DOM将其插入到页面中，实现了简单的数据展示功能。

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

// 设置数组
const data = ["apple", "banana", "orange", "kiwi"];

// 获取需要操作的HTML元素
const div = document.getElementById("myDiv");

// 使用循环语句遍历数组并创建列表元素
const ul = document.createElement("ul");
for(let i = 0; i < data.length; i++) {
  const li = document.createElement("li");
  li.textContent = data[i];
  ul.appendChild(li);
}

// 将列表元素添加到HTML元素中
div.appendChild(ul);

首先创建了一个字符串数组 data，然后使用 getElementById() 方法获取了 myDiv 元素，接着使用 createElement() 方法创建了一个 ul 列表元素，并使用 for 循环遍历数组 data 创建了多个 li 元素。最后，将 ul 列表元素添加到 myDiv 元素中，从而将数组中的数据展示在HTML页面中。

classList 是 JavaScript 中用来处理元素 class 的属性，它是一个只读属性，返回一个类数组对象，这个对象上有一些方法，可以用来添加、删除、切换元素的 CSS 类。

classList 对象上有以下方法：

1. add(className)：向元素添加一个或多个类名。
2. remove(className)：从元素中删除一个或多个类名。
3. toggle(className)：如果存在（不存在）就删除（添加）一个类名。
4. contains(className)：如果元素包含该类名，则返回 true，否则返回 false。

// 获取元素
const element = document.querySelector('#my-element')

// 添加类名
element.classList.add('my-class')

// 删除类名
element.classList.remove('my-class')

// 切换类名
element.classList.toggle('my-class')

// 判断是否包含指定类名
element.classList.contains('my-class')