html5支持dom,html/html5/dom.html · 心太软/Front-End-Study - Gitee.com

content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">

dom

.active {

color: red;

}

• 前端

• c#

• java

• first
• sec

//1,document.querySelector() css 选择器 返回匹配的第一项

var list = document.querySelector(".first a ")

list.style.color = "red"

//2,document.querySelectorAll() 返回一个匹配的伪数组

var arr = document.querySelectorAll("li")

//3,node.classlist.add() remove toggle contains

var lis = document.querySelectorAll("li a")

lis.forEach(function (element) {

element.onclick = function () {

var active = document.querySelector(".active")

// active.classList.remove('active')

// this.classList.add("active")

// this.classList.toggle("active")

// alert(this.classList.contains("active"))

// this.classList.remove("active")

//4,自定义属性 node.dataset.属性

console.log(active.dataset.userName + ">>>>" + active.dataset.age)

console.log(active.dataset["userName"])

active.dataset.sex = "男"

}

}, this);

一键复制

编辑

Web IDE

原始数据

按行查看

历史