DOM Traversa l Вопрос - Использование mutationObserver для вставки AdjacentHTML после каждого узла и для добавленияEventListener к каждой кнопке - PullRequest
Новая
       45

DOM Traversa l Вопрос - Использование mutationObserver для вставки AdjacentHTML после каждого узла и для добавленияEventListener к каждой кнопке

0 голосов
/ 16 мая 2019

Итак, я использую setMutationObserver для вставки кнопок ввода AdjacentHTML в класс div с именем ._5pcq.после окончания этого класса.Этот класс находится внутри контейнера с именем ._3576.

https://greasyfork.org/scripts/12228/code/setMutationHandler.js

Как только это будет сделано, я использую setMutationObserver для добавленияEventListener ('click', function (event) {} к каждой вставленной кнопкев класс ._5pcq. Это означает, что он смотрит внутри каждого класса ._3576 для кнопок после того, как они были вставлены, что означает, что я указываю второй MutationObserver, чтобы искать .TextCopyButton внутри _3576и для каждого узла (.TextCopyButton), который он находит, он добавляет прослушиватель.

Теперь, чтобы скопировать текст в класс ._3576. Мне нужно перейти из event.target, которыйis (.TextCopyButton) до того места, где находится текст для копирования. Это 2 родительских узла вверх, nextSibling, nextSibling, а затем вверх 9 parentNodes. Без потери отслеживания текущего узла.

event.target.parentNode.parentNode.nextSibling.nextSibling.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.nextSibling;

Я не могу сделать getElementsByClassName (_3576), потому что для этого потребуется индексный номер узла.Это означает, что мне нужно использовать event.target для ссылки на текущий узел, из которого нажата кнопка.Мой вопрос заключается в том, как я могу сослаться на текущий узел и добраться до нужного мне места, не используя так много цепочек parentNode.

Мне нужно что-то в духе event.target.parentNode [2] .nextSibling [2] .parentNode [9] ИЛИ event.target.traverseToNode ('. 3576');

Понятия не имею, что еще можно попробовать.Я пробовал getElementsByClassName ('_ 3576') [event.target]

Я пробовал использовать ключевое слово THIS.

Мой код находится здесь: 

setMutationHandler({
target: document.querySelector('._3576'),
selector: '.copybtnP',
handler: nodes => nodes.forEach(node => {
    node.setAttribute("style", "color:blue; border: 1px solid blue;");
    node.addEventListener('click', function(event) {
        var classCheck = document.getElementsByClassName('canvasArea');
        var status_content = event.target.parentNode.parentNode.nextSibling.nextSibling.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.nextSibling; 

        if (classCheck.length > 0) {
            status_content = event.target.previousSibling.previousSibling.previousSibling;
        }
                //alert(status_content + ' (Working)');
                //alert(event.target.previousSibling.innerText);
          getSelection().removeAllRanges();
          var range = document.createRange();
          range.selectNode(status_content);
          window.getSelection().addRange(range);







try { var successful = document.execCommand('copy');
var msg = successful ? 'successful' : 'unsuccessful';
//console.log('Copying text command was ' + msg);
} catch (err) {console.log('Oops, unable to copy');}
          return false;
      })
})

});

https://pastebin.com/Et66j0uc

1 Ответ

0 голосов
/ 16 мая 2019

Я думаю, что вы спрятали свой вопрос в кучу ненужного описания. Насколько я понимаю, вы хотите просто уменьшить количество вызовов .parentNode при обходе DOM.

Самый очевидный ответ - создать функцию, которая берет начальную точку и количество обходов и делает их в цикле. 

function up(start, num) {
  while (--num >= 0 && (start = start.parentNode)) {
    // nothing to do in the loop body
  }
  return start
}

const res = up(event.target, 2)

Тогда вы можете сделать то же самое для обхода родного брата.

Тем не менее, вы также можете использовать метод .closest() для прохождения вверх по предкам, предполагая, что вы можете описать элемент, на который нацелены, с помощью селектора. 

const res = event.target.closest(".someParentClass")

Это должно оказаться более устойчивым к изменениям, которые вы вносите в DOM, при условии, что ваш селектор четко определен.

...