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

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

2 个答案: