firefox - 需要在可编辑的 iframe 中选择所有 A 标签并将它们添加属性“类”

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

You can use getElementsByTagName() to get all <a> tags of the range container and then check for each of them whether it actually belongs to the range using range.compareBoundaryPoints() (only parts of the container might be selected). Something like this:

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";
          }
        }
      }