获取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>
总结：确实有点难，每抄一步，都想要去知道为什么要这样写，是固定写法还是有不一样的方法。
