这是我参与「第五届青训营」伴学笔记创作活动的第 6 天

前言

html5速成入门 css速成入门 JavaScript 速成入门
三件套功能 HTML - Structure ；CSS - Style ； Javascript - Function - DOM
Style Object www.w3schools.com/jsref/dom_o…
MDN DOM 文档：developer.mozilla.org/zh-CN/docs/…

认识

Document Object Model 文本对象模型
Chrome 插件 html tree generater -- 便捷查看dom树

如何选择HTML element

document

html文件的所有内容

document.getElementsBy..

document.getElementsByTagName（"body"）；
document.getElementsByClassName("list")[0];
document.getElementById("title");

document.querySelector

document.querySelector("li"); // 遍历选择第一个发现的

document.querySelectorAll("li"); //选择全部

document.querySelectorAll("#sp-list"); //id选择器

document.querySelectorAll("#sp-list li.list"); //id内 存在class的选择用法

query相对高效，建议使用

如何更改目标Style（css内容）

驼峰命名法

document.body.style.backgroundColor = "red";

document.body.style.backgroundColor = "red";

document.querySelectorAll("li").style.backgroundColor = "red";

变量定义选择器Style Object

var title = document.querySelector("li");
title；// “title”即为选择的元素

title.style.backgroundColor = "red"; // 相同用法

添加删除 CSS Class

*使用css class添加一系列的样式
*浏览器修改颜色直接到 Styles 修改对应的color值但不会更改文件

“通过按钮控制显示颜色”

选择元素classlist

document.querySelector("h1").classList //返回classlist
DOMTokenList ['title', value: 'title']

对classlist列表增删修改样式

.add() | .remove() | .toggle()

<h1>Hello</h1>

.title {
    color: red;
}

document.querySelector("h1").classList.add("title");//添加
document.querySelector("h1").classList.remove("title");// 移除

document.querySelector("h1").classList.toggle("title"); // 使用一次添加，再一次移除

添加监听事件 addEventListener

.addEventListener("事件", function() { }

document.querySelector("button").addEventListener("click", function() {
               document.querySelector("h1").classList.toggle("title");
});

如何修改目标值（html内容）

.innerHTML | .textContent

input
return
.innerHTML = "Goodbye"
"Goodbye"
innerHTML = "Goodbye"
"Goodbye"
.innerHTML
"Goodbye" 完整html内容
.textContent
"Goodbye" 只返回text文本内容

如何对属性修改 Attribute

定义在 opening tag

.attributes

.getattribute("id")

.attributes.class.value = "title"

.setAttribute("class","title")

document.querySelector("ul").attributes; // 返回所有attributes
document.querySelector("ul").getattribute("id"); // 获取指定值
document.querySelector("li").attributes.class.value = "title"; // 修改操作
document.querySelector("h1").setAttribute("class","title"); // setAttribute设置值

DOM 学习 | 青训营笔记

前言

认识