共计 5097 个字符，预计需要花费 13 分钟才能阅读完成。
获取 DOM 元素
<ul id=”list”>
<li class=”item”>item1</li>
<li class=”item” name=”two”>item2</li>
<li class=”item active”>item3</li>
<li class=”item”>item4</li>
<li class=”item”>item5</li>
</ul>
<script>
// const 定义的变量不可以修改，而且必须初始化。
const cl = console.log.bind(console);
//1, 标签
// li 标签 获取多个标签使用 get Elements By Tag Name 按标记名获取元素
var lis = document.getElementsByTagName(‘li’);
cl(lis);
cl(“ 以上获取所有 li”);
// HTMLCollection: 类数组
// 可以通过方法获取需要的值：lis[键] 或 lis.item(键)
cl(lis.item(2));
cl(“ 以上获取其中 li”);
//Ul 标签获取
var ul = document.getElementsByTagName(‘ul’);
cl(ul);
cl(“ 以上获取所有 ul”);
//2,ID（id 是唯一的，不能用复数）
// 获取单个标签使用 getElementById
var ul = document.getElementById(“list”);
// ul.style.cssText=”color:red;list-type:none;border:1px solid;”;
cl(ul);
cl(“ 以上获取 ID 为 ** 的 UL”);
//3,class
// 获取函数：getElementByClassName
var lis = document.getElementsByClassName(“item”);
cl(lis);
cl(“ 以上通过 class 获取到 li”);
// 获取某个 li 使用上方法
// cl(lis.item(3));
var lis = document.getElementsByClassName(“item active”);
// document.querySelector(“.item”).style.color=”red”;
cl(lis.item(2));
cl(“ 获取 active”);
//4,name
var two = document.getElementsByName(‘two’);
cl(two);
cl(two[0]);
//5,css 选择器
cl(document.querySelector(“#list”));
var item = document.querySelectorAll(“.item”);
cl(item);
cl(“ 获取 css 选择器 ”);
//6, 获取
var lis = document.querySelectorAll(“#ul > li:nth-of-type(-n+3)”);
lis.forEach(function(item){
item.style.color=”yellow”;
});
cl(“ 获取某个或多个 ”);
</script>
遍历元素节点
<script>
var cl = console.log.bind(console);
ul = document.querySelector(‘ul’);
// 获取所有(childNodes) 子节点
cl(ul.childNodes);
//js 常用 6 个节点。
// 1，元素
// 2，属性
// 3，文本
// 6，注释
// 9，文档
// 11，文档片段
//nodeType（节点类型）nodeValue（节点值）nodeName（节点名称）
cl((ul.childNodes[0].nodeType) + “—- 节点 0 位置的类型和值 —-” + (ul.childNodes[0].nodeValue));
cl((ul.childNodes[1].nodeType) + “—- 节点 1 位置的类型和值 —-” + (ul.childNodes[1].nodeValue));
cl((ul.childNodes[3].nodeType) + “—- 节点 3 位置的类型和名称 —-” + (ul.childNodes[3].nodeName));
// 获取最后一个节点
cl(ul.childNodes[ul.childNodes.length-1]);
cl(“———- 遍历 li———“);
var ele = [];
ul.childNodes.forEach(function(item){
// push() 方法可向数组的末尾添加一个或多个元素，并返回新的长度
// 意思就是在 this->ele[] 数组里面添加获取到的 li 元素
if(item.nodeType === 1) this.push(item);
},ele);
cl(ele);
// 获取第一个子（firstChild）或最后一个子（lastChild）
cl(ul.firstChild);
cl(ul.lastChild);
// 获取前一个兄弟(previousSibling) 或后一个兄弟（nextSibling）
cl((ul.lastChild.previousSibling) + “— 前后兄弟子节点 —-” + (ul.firstChild.nextSibling));// 节点拼接显示的是类型元素
cl(ul.firstChild.nextSibling);
cl(ul.lastChild.previousSibling);
</script>
遍历元素节点
<script>
var cl=console.log.bind(console);
var ul = document.querySelector(“ul”);
//children 和 childNodes 区别
//1，childNodes 获取所有节点
//2，children 获取 html 类型节点
// 获取元素数量方法有二
cl(ul.children.length);
// 子元素计数（childElementCount）
cl(ul.childElementCount);
// 获取第一个元素子元素（firstElementChild）获取最后一个元素子元素（lastElementChild）获取某个子元素 children[索引]
cl(ul.firstElementChild);
// 获取前一个 / 后一个请使用索引(nextElementSibling)/（previousElementSibling）
cl(ul.children[2].previousElementSibling);
// HTMLCollention 元素节点 没有 foEach 方法
cl(“—for 遍历 li 元素 —“)
for(var i = 0; i < ul.childElementCount;i++){
cl(ul.children.item(i))
}
</script>
dataset 用户自定义数据
<div id=”user” data-id=”100″ data-user-name=”admin” data-src=”http://baidu.com”></div>
<script>
var cl = console.log.bind(console);
var user = document.querySelector(“#user”)
//dataset 是用来专门访问 data- 的属性。
cl(user.dataset.id)
//js 规则：多单词连接线去掉，将首字母大写
cl(user.dataset.userName)
// 更改数据
user.dataset.userName = “super”;
cl(user.dataset.userName)
</script>
body 背景颜色切换小功能。
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title>classlist 对象 </title>
<style>
body{
background:blue;
}
.p1{
color:pink;
font-size:28px;
}
.p2{
background:#CCC;
}
.p3{
font-weight:bold;
text-align:center;
}
</style>
</head>
<body>
<p> 首页背景颜色切换 </p>
<div>
<span></span>
<span></span>
<span></span>
</div>
<script>
var cl = console.log.bind(console);
var p = document.querySelector(“p”);
// 获取 class 属性。在 js 中是保留字，所以用 className
// cl(p)
// 添加一个 class 类属性样式
p.classList.add(“p2”)
// 删除
// p.classList.remove(“p2”);
// 自动切换
p.classList.toggle(“p2”);
p.classList.toggle(“p3”)
// 替换(需要替换的属性，替换的属性）
p.classList.replace(“p3”, “p2”);
var div = document.querySelector(“div”);
document.querySelector(“div”).style.cssText = “border:1px solid;width:120px;height:35px;”
// document.querySelectorAll(“span”).style.cssText = “border:1px solid ;padding:5px;width:30px;height:30px;”
div.children[0].style.cssText = “border:1px solid ;width:30px;height:30px;display:flex;float:left;background:red”
div.children[1].style.cssText = “border:1px solid ;width:30px;height:30px;display:flex;float:left;margin:0 5px 0 5px;background:blue”
div.children[2].style.cssText = “border:1px solid ;width:30px;height:30px;display:flex;floay:left;background:yellow”
// 添加点击事件并改变属性样式
div.children[0].addEventListener(“click”,bgspan1,false)
function bgspan1(ev){
document.body.style.background = “red”;
}
div.children[1].addEventListener(“click”,bgspan2,false)
function bgspan2(ev){
document.body.style.background=”blue”
}
div.children[2].addEventListener(“click”,bgspan3,false)
function bgspan3(ev){
document.body.style.background = “yellow”
}
</script>
</body>
</html>
