JavaScript dom交互常见操作

1. 操作 html 和文本值（获取和设置）

innerHTML 获取或设置指定元素标签内的 html 内容

const el = document.querySelector(".content");
console.log(el);

// 获取
console.log(el.innerHTML);

// 设置
el.innerHTML = "<h1>hello world</h1>";

innerText 获取或设置指定元素标签内的文本值

const el = document.querySelector(".content");
console.log(el);

// 获取
console.log(el.innerText);

// 设置
el.innerText = "<h1>hello world</h1>";  // 标签也会被当成字符串

2. 操作 html 标签属性（设置，获取，删除）

const el = document.querySelector("a");

// 设置
el.setAttribute("name", "aName");
// el.setAttribute("href", "http://www.baidu.com");
el.setAttribute("class", "active");
el.setAttribute("style", "color:red");
el.setAttribute("onclick", "testFunc(this)");
function testFunc(e) {
  console.log(e);
}
console.log(el)

// 获取
console.log(el.getAttribute("class"));

// 删除
el.removeAttribute("class");
console.log(el)

3. 操作 style（获取和设置）

const el = document.querySelector(".content");

// 获取
console.log(el);
console.log(el.style.color); // 只能获取html标签上的style属性值，不能操作class里的属性

// 设置
el.style.display = "none";

4. 操作 class（获取、添加、删除、修改、判断）

const el = document.querySelector(".content");

// 获取
console.log(el.classList); // 获取当前dom的class列表
console.log(el.classList[0]); // 获取第一个class名称

// 添加 如果有则不添加
el.classList.add("active");

// 删除
el.classList.remove("active");

// 修改 有则删除，无则添加
el.classList.toggle("active");

// 判断 是 否 存在
el.classList.contains("active");