Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 获取页面元素的5种方法及简单演示自动回复
Blogger Information
Blog 32
fans 2
comment 0
visits 27906
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
获取页面元素的5种方法及简单演示自动回复
简行
Original
1167 people have browsed it

获取页面元素的5种方法（）

  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>演示获取dow元素</title>
  7.   </head>
  8.   <body>
  9.     <div class="nav">
  10.       <p>我是class="nav"中的第一个p标签</p>
  11.       <p>我是class="nav"中的第二个p标签</p>
  12.       <ul name="list">
  13.         <li id="tip">农夫山泉</li>
  14.         <li>饮用天然水</li>
  15.         <li>净含量1.5L</li>
  16.       </ul>
  17.     </div>
  18.     <div class="nav">
  19.       第二个div
  20.     </div>
  21.   </body>
  22.   <script>
  23.     //标签:返回的是一个元素对象的集合
  24.     var pv = document.getElementsByTagName("p");
  25.     console.log(pv[0].innerText);
  26.     console.log(pv["0"].innerText);
  27.     console.log(pv.item(0).innerText);
  28.     //id:只返回具有指定id的第一个元素(唯一)
  29.     var tip = document.getElementById("tip");
  30.     console.log(tip.innerText);
  31.     //class:返回一个html集合
  32.     var nav = document.getElementsByClassName("nav");
  33.     console.log(nav[1].innerText);
  34.     //API
  35.     //querySelector(css选择器): 获取满足条件的集合中的第一个元素(类似于id)
  36.     var li = document.querySelector("li");
  37.     var li2 = document.querySelector("li:nth-of-type(2)");
  38.     console.log(li.innerText);
  39.     console.log(li2.innerText);
  40.     // querySelectorAll(css选择器): 获取满足条件的全部元素组成的集合(多个)
  41.     var list = document.querySelectorAll("ul >li");
  42.     console.log(list.item(2).innerText);
  43.   </script>
  44. </html>

选做：简单演示自动回复

1.HTML代码：

  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.   <style>
  9.     li {
  10.       list-style-type: none;
  11.       margin-top: 10px;
  12.       /* background-color: rgb(120, 192, 214); */
  13.       border: 1px solid;
  14.     }
  15.     span {
  16.       font-size: 1.5rem;
  18.       color: rgb(172, 86, 86);
  19.     }
  20.     .region {
  21.       width: 200px;
  22.       min-height: 200px;
  23.       border: 1px solid;
  24.     }
  25.   </style>
  27.   <body>
  28.     <form action="" method="POST" name="reply" onsubmit="return false">
  29.       <label for="comment">留言内容：</label>
  30.       <input type="text" id="comment" />
  31.       <button>发送</button>
  32.     </form>
  33.     <div>
  34.       <h3>留言区</h3>
  35.       <ul class="region"></ul>
  36.     </div>
  37.   </body>
  38.   <script>
  39.     var btn = document.querySelector("button");
  40.     var form = document.querySelector("form");
  42.     var ul = document.querySelector("ul");
  44.     btn.addEventListener("click", function () {
  45.       //获取留言信息
  46.       var message = form.comment.value;
  48.       if (message.trim().length === 0) {
  49.         alert("请输入留言信息");
  50.         //focus():重新获取焦点
  51.         // form.comment.focus();
  52.         // return false;
  53.       } else {
  54.         getmsg(message);
  55.       }
  57.       form.comment.value = null;
  58.       form.comment.focus();
  59.     });
  61.     function getmsg(message) {
  62.       var xhr = new XMLHttpRequest();
  64.       xhr.onreadystatechange = function () {
  65.         if (xhr.readyState == 4 && xhr.status == 200) {
  66.           var obj = JSON.parse(xhr.responseText);
  67.           console.log(obj);
  68.           var farg = document.createDocumentFragment();
  70.           var li = document.createElement("li");
  71.           li.innerHTML = "<span>你：</span>" + message;
  72.           li.style.background = " rgb(226, 214, 205)";
  73.           li.style.marginLeft = "-30px";
  74.           li.style.marginRight = "45px";
  75.           farg.appendChild(li);
  77.           var lis = document.createElement("li");
  78.           lis.innerHTML = "<span>客服：</span>" + obj["message"];
  79.           lis.style.background = "rgb(120, 192, 214)";
  80.           lis.style.marginRight = "5px";
  81.           farg.appendChild(lis);
  83.           //保证发送的信息始终在第一条
  84.           //  childElementCount:获取父元素下子元素个数
  85.           if (ul.childElementCount === 0) {
  86.             ul.appendChild(farg);
  87.           } else {
  88.             // insertBefor(要插入的元素, 插入的位置)
  89.             ul.insertBefore(farg, ul.children.item(0));
  90.           }
  91.         }
  92.       };
  94.       xhr.open("POST", "reply.php");
  96.       var data = new FormData(form);
  98.       xhr.send(data);
  99.     }
  100.   </script>
  101. </html>

2.后端reply.php:

  1. <?php
  3. $msg_arr=[
  4.     ["id"=>1,"title"=>"价格","message"=>"目前暂无定价"],
  5.     ["id"=>2,"title"=>"商品","message"=>"商品66666"],
  6.     ["id"=>3,"title"=>"地址","message"=>"中国福建"],
  7.     ["id"=>4,"title"=>"评价","message"=>"好评如潮"],
  9. ];
  10. //取随机数
  11. $j = rand(0,3);
  12. $msg = $msg_arr[$j];
  14. echo json_encode($msg);

Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：客服回复过快, 感觉太假了, 可设置1秒延时
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