Как получить тот же идентификатор, значение или текст даже после изменений DOM

#javascript #php #jquery #html #laravel

#javascript #php #jquery #HTML #laravel

Вопрос:

Мне интересно, равен ли идентификатор div 1, и кто-то изменил идентификатор на 34, когда кто-то нажимает на него, attr (‘id’) по-прежнему равен 1 даже после изменения вместо 34. Прошу прощения за мой английский, спасибо.

         $(document).on('click','.edit_btn:eq(0)',function(){
            var itm_id = $(this).siblings('input').attr('id');
            alert(itm_id);

        });
  

Хотите, чтобы идентификатор был равен 1 вместо 34 даже после того, как кто-то изменит его с помощью DOM

Комментарии:

1. Используйте резервный класс и динамический идентификатор, затем всегда получайте элемент по классу. Если идентификатор элемента равен 1 и изменен на 2 , его класс останется тем же.

2. @Raymond ну, если у них возникнут проблемы с изменением идентификатора, ничто не мешает им также изменить класс

3. @charlietfl верен! Каковы фактические требования для этого?

4. Вы мало что можете сделать, чтобы помешать людям изменять что-либо в инструментах разработки браузера. Просто убедитесь, что всегда проверяете все, что отправляется на сервер

5. @charlietfl Вы можете установить MutationObserver и прослушивать любые изменения атрибута.

Ответ №1:

Вы могли бы использовать MutationObserver, чтобы увидеть, изменился ли атрибут, а затем изменить его обратно. Убедитесь, что при повторном изменении он знает, что это изменение следует игнорировать. Иначе браузер будет зависать. Обратите внимание, что это может быть отключено любой обезьяной с инструментами разработчика.

Не полагайтесь на клиента.

 let i = 0;
const MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver;

let e = document.querySelector('#test');
setInterval(() => {
  i  ;
  // Change
  e.setAttribute('id', i);
}, 1000); // Loop Sleep

let observer = new MutationObserver((mutations) => {
  mutations.forEach((mutation) => {
    if (mutation.type === "attributes") {
      if (e.id !== 'test') {
        let previous = e.id;
        // Revert
        e.setAttribute('id', 'test');
        console.log('Changed to test from', previous)
      }

    }
  });
});

observer.observe(e, {
  attributes: true
});  
 <div id="test">Test</div>