ページ上の位置に基づいて要素を操作する

Question

私のコードでは、要素をクリックするとその要素へのパスが検出され、警告されます。要素のパスを「保存」してから、ボタンをクリックすると、赤い枠線が追加されます。

function nodelistToArray(nodelist) { 
 
    return Array.prototype.slice.call(nodelist); 
 
} 
 

 
function traverse(target, chain) { 
 
    if (chain === void 0) { 
 
    chain = []; 
 
    } 
 
    var index = nodelistToArray(target.parentNode.children).filter(function(a) { 
 
    return a.nodeName == target.nodeName; 
 
    }).indexOf(target); 
 
    chain.push({ 
 
    element: target, 
 
    index: index 
 
    }); 
 
    if (target.nodeName.toLowerCase() == "html") { 
 
    return chain.reverse(); 
 
    } else { 
 
    return traverse(target.parentNode, chain); 
 
    } 
 
} 
 
    
 
document.addEventListener("click", eOnClick, true); 
 

 
function eOnClick(evt) { 
 
    var chain = traverse(evt.target); 
 
    alert(chain.map(function(elm) { 
 
    return elm.element.nodeName + ' [' + (elm.index).toString() + ']'; 
 
    }).join(' > ')); 
 
}

<div> 
 
    <ul> 
 
    <li>1</li> 
 
    <li>2</li> 
 
    <li>3</li> 
 
    </ul> 
 
    <ol> 
 
    <li>1</li> 
 
    <li>2</li> 
 
    <li>3</li> 
 
    </ol> 
 
</div> 
 
<div> 
 
    <ul> 
 
    <li>1</li> 
 
    <li>2</li> 
 
    <li>3</li> 
 
    </ul> 
 
    <ol> 
 
    <li>1</li> 
 
    <li>2</li> 
 
    <li>3</li> 
 
    </ol> 
 
</div> 
 

 
<p>1. Click one of the elements above 
 
<br>2. An alert will tell you where this element is located 
 
<br>3. Click the button below to add a red border to the element 
 

 
<p><button>Click Me</button>

Answer 1

。あなたはこの のような要素を取得し、CSSを適用することができます要素のパスを見つけるために必要だと思うしないでください。

document.addEventListener('click', function(e) { 
    e = e || window.event; 
    var target = e.target || e.srcElement; 
     target.setAttribute('style','border:10px solid red'); 
}, false);