需要得到选择所有A标签可编辑的iframe，并将其添加属性“类”

Question

我有一个可编辑在它的一些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

这应该让你开始在正确的方向。此代码不会对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"; 
      } 
     } 
     } 

Answer 2

您可以使用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"; 
    } 
}