[前端学习]常用的DOM操作及其用法示例(一)

一、引言

  在JavaScript（JS）中，"DOM"（文档对象模型）语句是指与HTML或XML文档的结构、样式和内容交互的方法和接口。DOM提供了表示文档结构的对象，并允许JavaScript访问和修改文档的内容、结构和样式。在实际项目中，DOM语句的使用可以让我们获取到更多主动权，本篇我将整理自己在学习、项目过程中常用到的DOM语句，为日后复习巩固用。

二、正文

1.访问元素

        getElementById("这里填写标签ID") : 通过元素的id访问元素: 

        优点:由于在HTML中,标签ID是一对一关系，所以通过该方法可以唯一锁定某个标签

var element = document.getElementById("myID");

        getElementsByTagName("这里填写标签名称") : 通过标签名称访问元素

var elements = document.getElementByTagName("p");
// 获取标签<p>

        getElementsByClassName("这里填写类名")

var elements = document.getElementByClassName("mylcass");
// 获取到类名为myclass的标签

        querySelector(".类名"):使用CSS选择器访问第一个匹配的元素。

var element = document.querySelector(".myClass");
// 获取到第一个匹配的名为myClass的标签

        querySelector(". 类名"):使用CSS选择器选择所有匹配的标签

var element = document.querySelectorAll("div.myClass");

2. 修改元素

        innerHTML: 获取或设置元素内部的HTML

element.innerHTML = "<span>修改后的内容</span>";

        innerText: 获取或设置元素内部的文本内容

temp = element.innerText;
element.innerText = "修改后的文本内容";

          element.setAttribute(name, value):设置元素属性

var element = document.getElementByName("a");
element.setAttribute("href", "http://example.com");
// 将所有a标签的网址修改为目标网址

        element.style.样式：修改元素样式

element.style.color = "red";

3. 创建和删除元素

        createElement("标签名称"):创建一个新的标签

var element = document.createElement("div");
// 创建一个新的div标签

       removeChild(element):移除该标签下的element标签

var parent = document.getElementById("parentID");
var child = document.getElementById("childID");
parent.removeChild(child);
// 移除parentID标签下的childID标签

        appendChild(element):为该标签增加一个子标签

var newChild = document.createElement("span");
newChild.innerText = "我是新增的子标签";
parent.appendChild(newChild);

4. 类和属性操作

          类操作:element.classList.操作("类名");

var element = document.getElementByClassName("board")
// 添加一个类属性到元素
element.classList.add("newClass");

// 从元素中移除一个类
element.classList.remove("oldClass");

// 切换元素的类
element.classList.toggle("activeClass");
// 可用于从一堆并排标签中激活某一个标签

        属性操作:getAttribute("属性");

var value = element.getAttribute("href");
// 获取到标签的href属性

5.事件处理

        addEventListener(event, function, useCapture): 为元素添加一个事件监听器。

        removeEventListener(event, function, useCapture): 移除事件

var element = getElementById("myId");
element.addEventListener("click", function() {
  alert("Element clicked!");
});
// 为id为myId的标签增添一个click事件

element.removeEventListener("click", functionName);
// 移除元素名为functionName的click事件

        需要注意的是,如果想要移除已经添加的事件监听器，则需要保证useCapture参数保持一致，否则会会造成移除失效