Question

如何获取我正在鼠标悬停或点击的元素的完整HTML代码？使用document.onmouseover = function(e){我可以获得触发事件的元素的完整底层HTML代码吗？

现在，我可以获取标签名称或ID或其他内容。我想要的是整个代码。

例如;如果我鼠标悬停在桌子上，我想得到字符串：<table><tr><td></td></tr></table>

这可能吗？

Answer 1

IE已有element.outerHTML

这对其他人来说：

if (!('outerHTML' in document.documentElement)) {
    function getOuterHTML(element){
        var dummy = document.createElement('html');
        dummy.appendChild(element.cloneNode(true));
        var result = dummy.innerHTML;
        dummy.innerHTML = '';
        return result;
    }
}
else{
    function getOuterHTML(element){
        return element.outerHTML;
    }
}

你可以像这样使用它：

 alert( getOuterHTML( document.getElementById("elementID") ) );

Answer 2

通常，您将使用另一个元素包装该元素，并在包装器上调用innerHTML，例如：

   document.onmouseover = function(e){
       var el = e.target;
       var p = document.createElement('p');
       p.appendChild(el.cloneNode(true));
       console.log(p.innerHTML);
   }

我会选择@David Murdoch的解决方案，这似乎更完整。

Answer 3

您的意思是结构还是完整的HTML代码？

仅针对结构，您可以使用jQuery的children()函数并迭代它们。

对于完整代码，Internet Explorer具有名为outerHTML的属性。要在Firefox中完成这项工作，请查看http://snipplr.com/view/5460/outerhtml-in-firefox/。

Answer 4

目前还不清楚你真正在问什么，但我怀疑你只想得到一个字符串，其中包含你正在徘徊的元素的HTML。为此，请尝试以下方法：

function getMouseOverHTML(event) {
  event = event || window.event;
  return event.currentTarget.parentNode.innerHTML;
}

然后，您可以使用该HTML标记字符串执行任何操作。

Answer 5

您可以克隆该节点，然后将其插入另一个节点并获取父节点的innerHTML。

Answer 6

var w = window;

// Change "click" to "mouseover" to experment onmouseover EventListener version
w.addEventListener("click", function(evt)
{
    alert(evt.target.outerHTML);
}, false);

说明

w 变量存储您想要获取html内容的元素，在这种情况下，它是整个窗口元素及其所有子元素和子子元素;当然你可以为它指定你喜欢的元素（如getElementById ......等）
evt.target 会返回您点击的特定dom元素
.outerHTML 返回元素的html;您也可以将其替换为 .innerHTML 以获取内部HTML（HTML 包含INTO 目标元素）;将其替换为 innerText 以仅获取内部文本。
alert（）功能将其显示为警告消息

工作示例： https://jsfiddle.net/zajcnezh/

请注意，addEventListner不是跨浏览器兼容的，我的目的不是这样做，而是为了展示问题的潜在解决方案。但是如果您需要跨浏览器，则可以轻松修改代码片段以实现此目标。

当鼠标悬停或onclick时，JavaScript获取完整的元素代码

6 个答案: