Community Learn Tools Library Leisure
search
English
Home > List of blog posts > JavaScript获取DOM元素，变量节点元素
Blogger Information
Blog 29
fans 1
comment 0
visits 23091
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
JavaScript获取DOM元素，变量节点元素
阿心
Original
1186 people have browsed it

获取DOM元素

  1. <ul id="list">
  2.     <li class="item">item1</li>
  3.     <li class="item" name="two">item2</li>
  4.     <li class="item active">item3</li>
  5.     <li class="item">item4</li>
  6.     <li class="item">item5</li>
  7. </ul>
  8. <script>
  9.     // const定义的变量不可以修改，而且必须初始化。
  10.     const cl = console.log.bind(console);
  12.     //1,标签
  13.     // li 标签 获取多个标签使用 get Elements By Tag Name 按标记名获取元素
  14.     var lis = document.getElementsByTagName('li');
  15.     cl(lis);
  17.     cl("以上获取所有li");
  18.     // HTMLCollection:类数组
  19.     // 可以通过方法获取需要的值：lis[键]或lis.item(键)
  20.     cl(lis.item(2));
  21.     cl("以上获取其中li");
  22.     //Ul标签获取
  23.     var ul  = document.getElementsByTagName('ul');
  25.     cl(ul);
  26.     cl("以上获取所有ul");
  28.     //2,ID（id是唯一的，不能用复数）
  29.     //获取单个标签使用getElementById
  30.     var ul = document.getElementById("list");
  31.     // ul.style.cssText="color:red;list-type:none;border:1px solid;";
  32.     cl(ul);
  33.     cl("以上获取ID为**的UL");
  35.     //3,class
  36.     //获取函数：getElementByClassName
  37.     var lis = document.getElementsByClassName("item");
  38.     cl(lis);
  39.     cl("以上通过class获取到li");
  40.     //获取某个li使用上方法
  41.     // cl(lis.item(3));
  42.     var lis = document.getElementsByClassName("item active");
  43.     // document.querySelector(".item").style.color="red";
  44.     cl(lis.item(2));
  45.     cl("获取active");
  47.     //4,name
  48.     var two = document.getElementsByName('two');
  49.     cl(two);
  50.     cl(two[0]);
  52.     //5,css选择器
  53.     cl(document.querySelector("#list"));
  54.     var item = document.querySelectorAll(".item");
  55.     cl(item);
  56.     cl("获取css选择器");
  57.     //6,获取
  58.     var lis = document.querySelectorAll("#ul > li:nth-of-type(-n+3)");
  59.     lis.forEach(function(item){
  60.        item.style.color="yellow";
  61.     });
  62.     cl("获取某个或多个");
  66. </script>

遍历元素节点

  1. <script>
  2.     var cl = console.log.bind(console);
  3.     ul = document.querySelector('ul');
  5.     //获取所有(childNodes)子节点
  6.     cl(ul.childNodes);
  7.     //js 常用6个节点。
  8.     // 1，元素
  9.     // 2，属性
  10.     // 3，文本
  11.     // 6，注释
  12.     // 9，文档
  13.     // 11，文档片段
  14.     //nodeType（节点类型）nodeValue（节点值）nodeName（节点名称）
  15.     cl((ul.childNodes[0].nodeType) + "----节点0位置的类型和值----" + (ul.childNodes[0].nodeValue));
  16.     cl((ul.childNodes[1].nodeType) + "----节点1位置的类型和值----" + (ul.childNodes[1].nodeValue));
  17.     cl((ul.childNodes[3].nodeType) + "----节点3位置的类型和名称----" + (ul.childNodes[3].nodeName));
  18.     // 获取最后一个节点
  19.     cl(ul.childNodes[ul.childNodes.length-1]);
  21.     cl("----------遍历li---------");
  23.     var ele = [];
  24.     ul.childNodes.forEach(function(item){
  25.         // push() 方法可向数组的末尾添加一个或多个元素，并返回新的长度
  26.         //意思就是在this->ele[]数组里面添加获取到的li元素
  27.         if(item.nodeType === 1)  this.push(item);
  28.     },ele);
  29.     cl(ele);
  30.     //获取第一个子（firstChild）或最后一个子（lastChild）
  31.     cl(ul.firstChild);
  32.     cl(ul.lastChild);
  33.     //获取前一个兄弟(previousSibling)或后一个兄弟（nextSibling）
  34.     cl((ul.lastChild.previousSibling) + "---前后兄弟子节点----" + (ul.firstChild.nextSibling));//节点拼接显示的是类型元素
  35.     cl(ul.firstChild.nextSibling);
  36.     cl(ul.lastChild.previousSibling);
  38.     </script>

遍历元素节点

  1. <script>
  2.     var cl=console.log.bind(console);
  3.     var ul = document.querySelector("ul");
  4.     //children和childNodes区别
  5.     //1，childNodes获取所有节点
  6.     //2，children获取html类型节点
  7.     //获取元素数量方法有二
  8.     cl(ul.children.length);
  9.     //子元素计数（childElementCount）
  10.     cl(ul.childElementCount);
  11.     //获取第一个元素子元素（firstElementChild）获取最后一个元素子元素（lastElementChild）获取某个子元素children[索引]
  12.     cl(ul.firstElementChild);
  13.     //获取前一个/后一个请使用索引(nextElementSibling)/（previousElementSibling）
  14.     cl(ul.children[2].previousElementSibling);
  15.     // HTMLCollention元素节点 没有foEach方法
  16.     cl("---for遍历li元素---")
  17.     for(var i = 0; i < ul.childElementCount;i++){
  18.         cl(ul.children.item(i))
  19.     }
  20. </script>

dataset用户自定义数据

  1. <div id="user" data-id="100" data-user-name="admin" data-src="http://baidu.com"></div>
  3.     <script>
  4.         var cl = console.log.bind(console);
  5.         var user = document.querySelector("#user")
  6.         //dataset是用来专门访问data-的属性。
  7.         cl(user.dataset.id)
  8.         //js规则：多单词连接线去掉，将首字母大写
  9.         cl(user.dataset.userName)
  10.         // 更改数据
  11.         user.dataset.userName = "super";
  12.         cl(user.dataset.userName)
  13.     </script>

body背景颜色切换小功能。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>classlist对象</title>
  6.     <style>
  7.         body{
  8.             background:blue;
  9.         }
  10.         .p1{
  11.             color:pink;
  12.             font-size:28px;
  13.         }
  14.         .p2{
  15.             background:#CCC;
  16.         }
  17.         .p3{
  18.             font-weight:bold;
  19.             text-align:center;
  20.         }
  21.     </style>
  22. </head>
  23. <body>
  24. <p>首页背景颜色切换</p>
  25.     <div>
  26.         <span></span>
  27.         <span></span>
  28.         <span></span>
  29.     </div>
  30.     <script>
  31.         var cl = console.log.bind(console);
  33.         var p = document.querySelector("p");
  34.         //获取class属性。在js中是保留字，所以用className
  35.         // cl(p)
  36.         //添加一个class类属性样式
  37.         p.classList.add("p2")
  38.         //删除
  39.         // p.classList.remove("p2");
  40.         //自动切换
  41.         p.classList.toggle("p2");
  42.         p.classList.toggle("p3")
  43.         //替换(需要替换的属性，替换的属性）
  44.         p.classList.replace("p3", "p2");
  46.         var div = document.querySelector("div");
  47.         document.querySelector("div").style.cssText = "border:1px solid;width:120px;height:35px;"
  48.         // document.querySelectorAll("span").style.cssText = "border:1px solid ;padding:5px;width:30px;height:30px;"
  49.         div.children[0].style.cssText = "border:1px solid ;width:30px;height:30px;display:flex;float:left;background:red"
  50.         div.children[1].style.cssText = "border:1px solid ;width:30px;height:30px;display:flex;float:left;margin:0 5px 0 5px;background:blue"
  51.         div.children[2].style.cssText = "border:1px solid ;width:30px;height:30px;display:flex;floay:left;background:yellow"
  52.         //添加点击事件并改变属性样式
  53.         div.children[0].addEventListener("click",bgspan1,false)
  54.         function bgspan1(ev){
  55.             document.body.style.background = "red";
  56.         }
  57.         div.children[1].addEventListener("click",bgspan2,false)
  58.         function bgspan2(ev){
  59.             document.body.style.background="blue"
  60.         }
  61.         div.children[2].addEventListener("click",bgspan3,false)
  62.         function bgspan3(ev){
  63.             document.body.style.background = "yellow"
  64.         }
  67.     </script>
  68. </body>
  69. </html>

总结：确实有点难，每抄一步，都想要去知道为什么要这样写，是固定写法还是有不一样的方法。

Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：js的知识体系过于庞大了, 分支也多, 所以完全掌握不容易, 还好常用的并不多 , 你保都要好好的关注web开发领域就可以了
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post