前言
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
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的选择用法
如何更改目标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
.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设置值