javascript - javascriptでHTMLブロックの親ノードを取得する

Question

HTML ブロックがあります。

<div style="text-align:left">
    <span>aaaaa</span>
    <span>bbbbb</span>
    <span>ccccc</span>
    <span>ddddd</span>
</div>

エディターでこの div を選択しようとすると、選択されたスパンのみが取得され、div は取得されません。したがって、このコードでの私の選択は次のとおりです。

 sel = parent.document.getElementById('frame').contentWindow.document.getSelection();
 var range = sel.getRangeAt (0);
 var docFragment = range.cloneContents ();
 var tmpDiv = document.createElement ("div");
 tmpDiv.appendChild (docFragment);
 selHTML = tmpDiv.innerHTML;

だから私がアラート（selHTML）をすると、物乞いで書いたスパンでコードを取得します。しかし、この HTML は div でラップされています。この div を取得するにはどうすればよいですか?

アラインメントのために手動で execCommand を作成したいので、それが必要です。Firefox では execCommand を使用していますが、選択が適切に行われておらず、既にある div の text-align を変更する代わりに、新しい div を追加するため、適切に機能していません。

前もって感謝します

Answer 1

divとそのすべてのコンテンツを含める必要があるouterHTMLが必要だと思います。

selHTML = tmpDiv.outerHTML;

または

sel = parent.document.getElementById('frame')
  .contentWindow.document.getSelection();  

var range = sel.getRangeAt (0);  
var docFragment = range.cloneContents();  
var tmpDiv1 = document.createElement("div"); 
var tmpDiv2 = document.createElement('div'); 
tmpDiv2.appendChild (docFragment); 
tmpDiv1.appendChild(tmpDiv2); 
selHTML = tmpDiv1.innerHTML; 

Answer 2

Firefox では、範囲のcommonAncestorContainerプロパティを使用できます。だからあなたの場合：

var range = sel.getRangeAt(0);
var container = range.commonAncestorContainer;

if (container && container.tagName === "div" && container.style.textAlign) {
    // it's a div tag with an inline style text-align prop

    // you can also modify the container directly:
    container.style.textAlign = "center";
}

Answer 3

試しましたsetHTML.parentNodeか？