JavaScript获取DOM元素

  获取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>

阅读 165

推荐阅读