JS DOM基础使用

获取元素

在JavaScript中，我们可以使用多种方式获取DOM元素，如：

1. 通过标签名获取元素:

使用document.getElementsByTagName方法，传入标签名，可以获取到一个元素集合。例如：

let elements = document.getElementsByTagName("div");

2. 通过类名获取元素:

使用document.getElementsByClassName方法，传入类名，可以获取到一个元素集合。例如：

let elements = document.getElementsByClassName("myClass");

3. 通过ID获取元素:

使用document.getElementById方法，传入元素的ID名称，可以获取到具有该ID的元素。例如：

let element = document.getElementById("myElement");

4. 使用CSS选择器获取元素:

使用querySelector和querySelectorAll方法可以使用CSS选择器获取元素。querySelector方法返回匹配的第一个元素，而querySelectorAll返回所有匹配的元素。例如：

let element = document.querySelector("#myElement");
let elements = document.querySelectorAll(".myClass");

操作元素

在获取到元素后，我们可以修改它的内容、属性、样式等。

1. 修改元素内容和属性:

可以使用innerHTML和innerText属性修改元素的内容。innerHTML可以设置HTML内容，而innerText只能设置纯文本内容。例如：

let element = document.getElementById("myElement");
// 修改元素内容
element.innerHTML = "<strong>New content dotcpp.com</strong>";
element.innerText = "New text content dotcpp.com";
// 修改元素属性
element.setAttribute("src", "example.jpg");
element.setAttribute("class", "someClass anotherClass");

2. 添加和删除元素:

我们可以使用createElement方法创建新元素，使用appendChild方法将新元素添加到父元素中，使用removeChild方法删除元素。例如：

let parentElement = document.getElementById("parent");
// 添加新元素
let newElement = document.createElement("div");
newElement.innerHTML = "New element";
parentElement.appendChild(newElement);
// 删除元素
let removeElement = document.getElementById("remove");
parentElement.removeChild(removeElement);

3. 修改样式和类名:

可以使用style属性和className属性修改元素的样式和类名。例如：

let element = document.getElementById("myElement");
// 修改样式
element.style.color = "red";
element.style.backgroundColor = "#fff";
// 修改类名
element.className = "newClass";
element.classList.add("newClass");
element.classList.remove("oldClass");

事件处理

在JavaScript中，我们可以通过事件处理来响应用户操作。

1. 事件的概念和常见事件类型:

事件是文档或浏览器窗口中发生的特定动作，例如点击、键盘输入等。常见事件类型包括：

l click 点击事件

l mouseover 鼠标滑过事件

l keydown 按键按下事件

l submit 表单提交事件

l load 文档加载完毕事件

l unload 文档卸载事件

2. 注册和处理事件:

可以使用addEventListener方法注册事件和处理函数。例如：

let element = document.getElementById("myElement");
// 注册click事件
element.addEventListener("click", function() {
    alert("clicked dotcpp.com");
});
// 注册keydown事件
document.addEventListener("keydown", function(event) {
    if (event.keyCode === 13) {
        alert("enter key pressed dotcpp.com");
    }
});

这些是DOM的简单操作，下节我们介绍DOM遍历与操作。