search

博客列表 >常用DOM操作

常用DOM操作

王佳祥
王佳祥原创
2020年08月23日 17:17:39807浏览

常用DOM操作

一、文档节点的相关操作

1.DOM是什么？

  • DOM全称是document object model(文档对象模型)
    JS将整个HTML/XML文档看成一个对象，也称为DOM树
    DOM树由各种类型的节点组成

2.获取DOM元素的五种方式

  • 标签：document.getElementsByTagName()

  • ID：document.getElementById()

  • CLASS：document.getElementsByClassName()

  • API:document.querySelector()/document.querySelectorAll()

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>如何获取页面元素</title>
  7.   </head>
  8.   <body>
  9.     <div id="list">
  10.       <ul class="poster">
  11.         <li name="active">php中文网</li>
  12.         <li>前端开发</li>
  13.         <li>服务端开发</li>
  14.       </ul>
  15.       <ul>
  16.         <li>安卓开发</li>
  17.       </ul>
  18.     </div>
  19.     <script>
  20.       //1.标签：返回的是一个元素的集合
  21.       var ul = document.getElementsByTagName("ul");
  22.       console.log(ul);
  23.       console.log(ul[0]);
  24.       console.log(ul.item(0));
  26.       //2.id:只返回具有指定id的第一个元素(唯一)
  27.       var list = document.getElementById("list");
  28.       console.log(list);
  29.       //id的替代语法
  30.       var div = document.getElementsByTagName("div");
  31.       console.log(div.namedItem("list"));
  32.       console.log(div.namedItem("list") === list);
  33.       var active = document.getElementsByTagName("li").namedItem("active");
  34.       console.log(active);
  35.       active.style.color = "red";
  37.       //在元素级别调用以上的api方法来获取元素
  38.       var lis = ul.item(0).getElementsByTagName("li");
  39.       console.log(lis);
  40.       lis.namedItem("active").style.backgroundColor = "blue";
  42.       //3.class返回一个html集合
  43.       var poster = document.getElementsByClassName("poster");
  44.       console.log(poster);
  45.       poster.item(0).style.border = "1px solid";
  47.       //4.推荐使用querySelector(css选择器)：获取满足条件的集合中的第一个元素（类似于id）
  48.       //querySelectorAll(css选择器)：获取满足条件的去拿不元素组成的集合
  49.       var div = document.querySelector("#list li");
  50.       console.log(div);
  52.       //5.获取多个
  53.       var lis = document.querySelectorAll(".poster > *");
  54.       console.log(lis);
  55.     </script>
  56.   </body>
  57. </html>

3.节点与元素集合

  • NodeList:所有类型的节点集合，包括了元素，文本，注释，片段，文档，属性…

    HTMLColletion:HTML元素的节点集合 NodeList > HTMLCollection,是NOdeList一个子集

    节点是dom中的最小单元

    节点有：元素，文本节点，注释节点，片段节点，文档节点…

  • 子节点：

    children:只返回父节点中的元素子节点

    childNodes:返回指定节点的子节点的节点列表

  • 父节点：

    parentElement:返回父节点

    充当父节点永远不可能是文本或属性，只能是元素或文档

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>Document</title>
  7.   </head>
  8.   <body>
  9.     <div>
  10.       <p>Hello Word!</p>
  11.       <h3>php中文网</h3>
  12.       <a href="">百度</a>
  13.     </div>
  14.     <ul>
  15.       <li>子节点</li>
  16.     </ul>
  17.   </body>
  18.   <script>
  19.     var div = document.querySelector("div");
  20.     //childNodes返回指定节点的子节点的节点列表
  21.     console.log(div.childNodes);
  22.     //过滤掉节点集合中的非元素节点
  23.     for (var i = 0; i < div.childNodes.length; i++) {
  24.       var currentNode = div.childNodes.item(i);
  25.       if (currentNode.nodeType === 1) {
  26.         console.log(currentNode.tagName.toLowerCase());
  27.       }
  28.     }
  29.     //children:只返回父节点中的元素子节点
  30.     console.log(div.children);
  31.     //如果只想获取第一个子元素级的节点
  32.     console.log(div.firstElementChild);
  33.     console.log(div.lastElementChild);
  34.     console.log(div.children.item(1));
  35.     var li = document.querySelector("li");
  36.     //充当父节点永远不可能是文本或属性，只能是元素或文档
  37.     console.log(li.parentElement);
  38.   </script>
  39. </html>

4.元素的新增，删除

  • 创建元素：createElement()

  • 创建一个元素的片段：createDocumentFragment()

  • 删除元素：removeChild()

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>元素的动态添加与删除</title>
  7.   </head>
  8.   <body>
  9.     <ul></ul>
  10.     <h1>删除元素</h1>
  11.   </body>
  12.   <script>
  13.     //创建元素并添加到页面中
  14.     var h2 = document.createElement("h2");
  15.     //给元素添加内容
  16.     h2.innerText = "欢迎来到php中文网学习！";
  17.     //如果添加的内容有html标签
  18.     h2.innerHTML = "欢迎来到<span style='color:red'>php中文网</span>学习！";
  19.     //把元素添加到页面中，必须在父节点上添加
  20.     document.body.appendChild(h2);
  21.     //添加多个
  22.     var ul = document.querySelector("ul");
  23.     /*     for (var i = 0; i < 10; i++) {
  24.       var li = document.createElement("li");
  25.       li.innerText = "列表项" + (i + 1);
  26.       ul.appendChild(li);
  27.     } */
  28.     //为防止每添加一个元素导致页面dom树重新渲染一次
  29.     //借助文档片段来解决这个问题
  30.     //先创建一个临时文档片段
  31.     //将生成的10个li添加到内存中的这个文档片段节点中
  32.     //将这个文档片段一次性添加到页面中，此时页面只会渲染一次
  33.     var frag = document.createDocumentFragment();
  34.     for (var i = 0; i < 10; i++) {
  35.       var li = document.createElement("li");
  36.       li.innerText = "列表项" + (i + 1);
  37.       frag.appendChild(li);
  38.     }
  39.     //获取父元素
  40.     var bo = document.body;
  41.     //获取父元素中的子元素
  42.     var h1 = document.querySelector("h1");
  43.     console.log(h1);
  44.     //删除指定的元素
  45.     bo.removeChild(h1);
  46.   </script>
  47. </html>

5.事件

  • 事件属性：on事件名称

  • 监听器：addEventListernaer()

  • 事件方法：函数表达式/匿名函数

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>事件基础</title>
  7.   </head>
  8.   <body>
  9.     <!-- 将事件作为元素的一个特殊属性添加到元素上面，用on为前缀 -->
  10.     <!-- <button onclick="表达式/js语句">按钮</button> -->
  11.     <button onclick="alert(this.firstChild.nodeValue)">按钮</button>
  12.     <button>点我试试看</button>
  13.     <a href="https://www.baidu.com">百度一下</a>
  14.     <script>
  15.       //获取第二个按钮
  16.       var btn = document.querySelector("button:nth-of-type(2)");
  17.       console.log(btn);
  18.       //绑定事件
  19.       //addEventListener(事件类型，回调函数，冒泡/捕获)
  20.       btn.addEventListener(
  21.         "mouseover",
  22.         function (ev) {
  23.           //ev.target:触发事件的对象
  24.           console.log(ev.target);
  25.           ev.target.style = "width:100px";
  26.           ev.target.style = "height:100px";
  27.         },
  28.         false
  29.       );
  30.       btn.addEventListener(
  31.         "mouseout",
  32.         function (ev) {
  33.           //ev.target:触发事件的对象
  34.           console.log(ev.target);
  35.           ev.target.style = "none";
  36.         },
  37.         false
  38.       );
  39.       //获取链接
  40.       var link = document.querySelector("a");
  41.       console.log(link);
  42.       link.onclick = function (ev) {
  43.         //禁止原对象的默认行为
  44.         ev.preventDefault();
  45.         btn.style = "none";
  46.       };
  47.     </script>
  48.   </body>
  49. </html>

二、经典的ToDoList案例

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>经典的ToDoList</title>
  7.   </head>
  8.   <body>
  9.     <form action="" id="comment" method="post">
  10.       <label for="content">求留言：</label>
  11.       <input type="text" name="content" />
  12.       <button>提交</button>
  13.     </form>
  14.     <ul></ul>
  15.     <script>
  16.       //获取表单
  17.       var form = document.forms.namedItem("comment");
  18.       //获取留言区
  19.       var ul = document.querySelector("ul");
  20.       //创建自动回复数组
  21.       var arrs = [
  22.         "欢迎来到php中文网学习！",
  23.         "好好学习，天天向上！",
  24.         "你有什么事情？",
  25.         "请到php中文网学习相关课程！",
  26.         "今天是个好天气！",
  27.         "抓紧时间学习吧！",
  28.         "学习使我快乐！",
  29.         "php是世界上最好的语言！",
  30.         "学无止境！",
  31.         "学会自律，才能进步！",
  32.       ];
  33.       console.log(arrs);
  34.       var rand = 0;
  35.       //监听表单的提交事件
  36.       form.addEventListener(
  37.         "submit",
  38.         function (ev) {
  39.           ev.preventDefault();
  40.           console.log("事件被监听了");
  41.           //创建一条新留言
  42.           var li = document.createElement("li");
  43.           if (form.content.value.trim().length === 0) {
  44.             alert("内容为空");
  45.             form.content.focus();
  46.             return false;
  47.           } else {
  48.             setInterval(function () {
  49.               rand = parseInt(Math.random() * 10);
  50.               //console.log(rand);
  51.             }, 2000);
  52.             li.innerHTML =
  53.               form.content.value +
  54.               '<a href="" onclick="del(this)">删除</a>' +
  55.               "<br><p>" +
  56.               arrs[rand] +
  57.               "</p><hr>";
  58.             //
  59.           }
  60.           //将留言添加到列表中
  61.           //将最新留言放到最前面
  62.           //留言为空的时候，直接插入，否则就插入到新一条留言之前
  63.           if (ul.childElementCount === 0) {
  64.             ul.appendChild(li);
  65.           } else {
  66.             //insertBefore(要插入的元素，插入的位置)
  67.             ul.insertBefore(li, ul.firstElementChild);
  68.           }
  70.           //清空留言框
  71.           form.content.value = null;
  72.           form.content.focus();
  73.         },
  74.         false
  75.       );
  76.       function del(ele) {
  77.         this.event.preventDefault();
  78.         console.log(ele.parentElement);
  79.         return confirm("是否删除？")
  80.           ? ul.removeChild(ele.parentElement)
  81.           : false;
  82.       }
  83.     </script>
  84.   </body>
  85. </html>

三、学习总结

  • 获取DOM元素的五种方式

  • 标签：document.getElementsByTagName() 返回一个集合

  • ID：document.getElementById() 返回一个集合

  • CLASS：document.getElementsByClassName() 返回一个集合

  • API:document.querySelector()/document.querySelectorAll() 返回一个数组列表

  • children:只返回父节点中的元素子节点

  • childNodes:返回指定节点的子节点的节点列表

  • parentElement:返回父节点

  • document.createElement():创建元素

  • createDocumentFragment()：创建一个元素的片段

  • removeChild():删除元素

  • addEventListernaer(事件类型，回调，捕获/冒泡)：监听器

上一条：front 23 jQuery中的getter、setter，及dom操作 （0819wed）下一条：laravel--对接微信JsApi支付
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多