Нужно получить все теги A в выделении в редактируемом iframe и добавить к ним атрибут "class"

Question

У меня есть редактируемый <iframe> с некоторым HTML-кодом в нем.Мне нужно получить все <a> теги в моем диапазоне.Я пробовал этот код, но он не работает:

var select = document.getElementById(iframe_id).contentWindow.getSelection();
var range = select.getRangeAt(0);
//HERE I WANT TO FIND ALL TAGS IN THIS RANGE AND IF IT "A" - ADD NEW ATTRIBUTE "CLASS". SOMETHING LIKE THIS       
var parent = rng.commonAncestorContainer;

for(var i=0; i<parent.childNodes.length; i++)
{
    if(parent.childNodes[i].tagName.toLowerCase() == "a")
        parent.childNodes[i].setAttribute("class", "href_class");
}

Answer 1

Вы можете использовать getElementsByTagName(), чтобы получить все <a> теги контейнера диапазона, а затем проверить для каждого из них, действительно ли он принадлежит диапазону, используя range.compareBoundaryPoints()(могут быть выбраны только части контейнера).Как то так:

var links = rng.commonAncestorContainer.getElementsByTagName("a");
for (var i = 0; i < links.length; i++)
{
  var linkRange = document.createRange();
  linkRange.selectNode(links[i]);
  if (rng.compareBoundaryPoints(Range.START_TO_START, linkRange) <= 0 && rng.compareBoundaryPoints(Range.END_TO_END, linkRange) >= 0)
  {
    links[i].className = "href_class";
  }
}

Answer 2

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

function addAnchorClass(targetFrameId) {

        var targetIframe = document.getElementById(targetFrameId).contentWindow;
        var selection = targetIframe.getSelection();
        var range = selection.getRangeAt(0);
        var alist = range.commonAncestorContainer.getElementsByTagName("a");

        for (var i=0, item; item = alist[i]; i++) {
          if (selection.containsNode(item, true) ) {
            item.className += "PUT YOUR CSS CLASS NAME HERE";
          }
        }
      }