时间戳

首页 > 解决方案 > 如何使用Javascript检查页面中的元素是否已经存在？

javascript - 如何使用Javascript检查页面中的元素是否已经存在？

问题描述

我正在使用烧瓶 socketio 构建一个聊天应用程序。所以我正在尝试实现聊天历史记录，但我遇到的问题是，每当新用户连接时，应用程序都会将聊天历史记录发送给新用户以及旧用户，从而导致旧用户重复聊天记录用户。我已经尝试了所有服务器端，但我认为唯一的方法是通过 Javascript 客户端。有什么方法可以让 Javascript 获取聊天记录时，我可以让 JS 先检查页面上是否不存在该消息，然后附加它们吗？

这是正在发生的事情的屏幕截图。 正在发生的事情的视觉表示

代码（客户端 Javascript）

  const socket = io.connect("http://127.0.0.1:5000");

socket.on('connect', function() {

  socket.emit('sync_messages', {
    dname: "{{dname}}"
  });

});

代码（服务器端 Flask Socketio）

@socketio.on('sync_messages')
def handle_sync(data):
        socketio.emit('show_all_messages', messages)

代码（又是客户端）

socket.on('show_all_messages', function(data) {
 // console.log(data);
  len = data.length;
  for (i = 0; i < len; i++) {
    const newNode = document.createElement('div');
    newNode.innerHTML = data[i];
    document.getElementById('messages').appendChild(newNode);
  }

})

标签： javascript

解决方案

真的很简单。您可以为需要查找和执行的元素提供任何类型的属性

function checkElement(){
   if(document.querySelector(/*Selector*/)){
      return true;
   }
   else{return false;}
}

然后在需要时调用此函数。if 语句中的 document.querySelector 会自动寻找你的 html 元素是否存在

推荐阅读