GVKun编程网logo

从 DOM 的特定元素选择性地复制 HTML+CSS+JS 的工具（dom对象中复制和删除元素方法）

22

如果您想了解从DOM的特定元素选择性地复制HTML+CSS+JS的工具的相关知识，那么本文是一篇不可错过的文章，我们将对dom对象中复制和删除元素方法进行全面详尽的解释，并且为您提供关于8HTMLDO

如果您想了解从 DOM 的特定元素选择性地复制 HTML+CSS+JS 的工具的相关知识，那么本文是一篇不可错过的文章，我们将对dom对象中复制和删除元素方法进行全面详尽的解释，并且为您提供关于8 HTML DOM 元素的查找与改变&改变CSS样式&HTML事件、css – 如何选择除特定元素及其所有后代之外的所有元素、css – 如果选择器不是特定元素的子元素,那么如何定位选择器(因此只有当它是根时)、css 元素选择器实例_html/css_WEB-ITnose的有价值的信息。

本文目录一览：

从 DOM 的特定元素选择性地复制 HTML+CSS+JS 的工具（dom对象中复制和删除元素方法）

从 DOM 的特定元素选择性地复制 HTML+CSS+JS 的工具（dom对象中复制和删除元素方法）

像大多数 Web 开发人员一样，我偶尔喜欢查看网站的源代码，以了解它们的标记是如何构建的。像 Firebug 和 Chrome
开发者工具这样的工具可以很容易地检查代码，但是如果我想复制一个特定的部分并在本地使用它，复制所有单个元素及其相关的 CSS
会很痛苦。保存整个源代码并删除不相关的代码可能也需要做同样多的工作。

如果我可以在 Firebug 中右键单击一个元素并有一个“为这个元素保存 HTML+CSS+JS”选项，那就太好了。这样的工具存在吗？是否可以扩展
Firebug 或 Chrome 开发人员工具以添加此功能？

答案1

小编典典

SnappySnippet

我终于找到了一些时间来创建这个工具。您可以从 Github安装SnappySnippet
。它允许从指定的（最后检查的）DOM 节点轻松提取
HTML+CSS。此外，您可以将代码直接发送到 CodePen 或 JSFiddle。享受！

SnappySnippet Chrome 扩展

其他特性

  • 清理 HTML（删除不必要的属性，修复缩进）
  • 优化 CSS 使其可读
  • 完全可配置（所有过滤器都可以关闭）
  • 使用::before和::after伪元素
  • 漂亮的 UI 归功于Bootstrap和Flat-UI项目

代码

SnappySnippet 是开源的，你可以在 GitHub
上找到代码。

执行

由于我在制作这个过程中学到了很多东西，所以我决定分享一些我遇到的问题以及我的解决方案，也许有人会觉得它很有趣。

第一次尝试 - getMatchedCSSRules()

起初，我尝试检索原始 CSS 规则（来自网站上的 CSS
文件）。非常令人惊讶的是，这非常简单window.getMatchedCSSRules()，但是，它并没有很好地工作。问题是我们只采用了在整个文档的上下文中匹配的
HTML 和 CSS 选择器的一部分，而在 HTML 片段的上下文中不再匹配。由于解析和修改选择器似乎不是一个好主意，所以我放弃了这个尝试。

第二次尝试 - getComputedStyle()

然后，我从@CollectiveCognition 建议的东西开始 - getComputedStyle()。但是，我真的想将 CSS 与 HTML
分开，而不是内联所有样式。

问题 1 - 将 CSS 与 HTML 分开

这里的解决方案不是很漂亮，但很简单。我已将 ID 分配给所选子树中的所有节点，并使用该 ID 创建适当的 CSS 规则。

问题 2 - 删除具有默认值的属性

为节点分配 ID 效果很好，但是我发现我的每个 CSS 规则都有大约 300 个属性，这使得整个 CSS 不可读。
结果getComputedStyle()返回为给定元素计算的所有可能的 CSS
属性和值。其中一些是空的，一些有浏览器默认值。要删除默认值，我必须首先从浏览器中获取它们（每个标签都有不同的默认值）。解决方案是将来自网站的元素的样式与插入空的相同元素的样式进行比较<iframe>。这里的逻辑是
empty 中没有样式表<iframe>，所以我添加的每个元素都只有默认的浏览器样式。通过这种方式，我能够摆脱大多数无关紧要的属性。

问题 3 - 只保留速记属性

我发现的下一件事是不必要地打印出具有速记等效项的属性（例如，有border: solid black 1px，然后border-color:black;，border-width: 1pxitd。）。
为了解决这个问题，我简单地创建了一个具有速记等效项的属性列表，并将它们从结果中过滤掉。

问题 4 - 删除前缀属性

在之前的操作之后，每个规则中的属性数量明显减少，但我发现我有很多-webkit-我从未听说过的前缀属性（-webkit-app-region？？-webkit-text-emphasis-position）。
我想知道是否应该保留这些属性中的任何一个，因为其中一些似乎很有用（-webkit-transform-origin等-webkit-perspective-origin）。不过，我还没有弄清楚如何验证这一点，而且由于我知道大多数时候这些属性只是垃圾，所以我决定将它们全部删除。

问题 5 - 组合相同的 CSS 规则

我发现的下一个问题是相同的 CSS 规则一遍又一遍地重复（例如，对于每个<li>具有完全相同的样式的 CSS 输出中创建的规则相同）。
这只是一个相互比较规则并将具有完全相同的一组属性和值的规则组合起来的问题。结果，#LI_1{...}, #LI_2{...}我得到了`#LI_1,

LI_2 {…}`.

问题 6 - 清理和修复 HTML 的缩进

因为我对结果很满意，所以我转向了 HTML。它看起来像一团糟，主要是因为该outerHTML属性保持它的格式与从服务器返回的完全相同。
唯一outerHTML需要的 HTML 代码是简单的代码重新格式化。因为它在每个 IDE 中都可用，所以我确信有一个 JavaScript
库可以做到这一点。事实证明我是对的 (jquery-clean)。更重要的是，我有多余的属性删除（style等data-ng-repeat）。

问题 7 - 过滤器破坏 CSS

由于在某些情况下，上面提到的过滤器可能会破坏片段中的 CSS，因此我将它们全部设为可选。 您可以从“设置” 菜单中禁用它们。

8 HTML DOM 元素的查找与改变&改变CSS样式&HTML事件

8 HTML DOM 元素的查找与改变&改变CSS样式&HTML事件

HTML DOM（Document Object Model）文档对象模型

  • 当网页被加载时，浏览器会创建页面的文档对象模型。
  • HTMLDOM 定义了用于HTML的一系列标准的对象。通过DOM，你可以访问所有的HTML元素，连同它们所包含的文本和属性。
  • HTMLDOM独立于平台和编程语言，可以Java、JavaScript之类的调用。
  • HTMLDOM模型被构造为对象的树。

JavaScript能够改变页面中所有的HTML元素、属性、CSS样式，能够对页面中所有的事件做出反应。

HTML DOM树：

分享图片

 

 

 

查找HTML元素

  • 通过ID查找HTML元素    getElementById()
  • 通过标签名查找HTML元素  getElementByTagName()
  • 通过类名找到HTML元素 　getElementByClass()　

改变HTML内容：

  • 利用innerHTML属性
  • document.getElementById(id).attribute=new value  如document.getElementById("image").src="landscape.jpg"

改变CSS样式：

  • document.getElementById(id).style.property = new style  如：document.getElementById("p1").style.color = "blue";
  • onclick="document.getElementById(‘id1‘).style.color=‘pink‘"  还可以嵌在事件里

 

HTML事件的例子：

  • 当用户点击鼠标时　　   <h1 onclick="this.innerHTML = ‘哈哈‘">点击文本!</h1>
  • 当网页加载时
  • 当图像加载时
  • 当鼠标移动到元素上时
  • 当输入字段被改变时
  • 当提交HTML表单时
  • 当用户触发按键时

 

使用HTMLDOM来分配事件：

<body>
<p>点击按钮执行 <em>displayDate()</em> 函数.</p>
<button id="myBtn">点这里</button>
<script>
document.getElementById("myBtn").onclick = function(){displayDate()};
function displayDate(){
     document.getElementById("demo").innerHTML = Date();
}
</script>
<p id="demo"></p>
</body>

 

onload事件和onunload事件：

  • onload事件和onunload事件会在用户进入或离开页面时触发
  • onload事件可用于检测访问者的浏览器类型和浏览器版本，并基于这些信息来加载网页的正确版本
  • onload和onunload事件可用于处理cookie

onchange事件：

  • 常用于对输入字段进行验证
<script type="text/javascript" charset="utf-8">
    function myFunction(){
        var x = document.getElementById("fname");
        x.value = x.value.toupperCase();
    }
</script>

 

onmouSEOver和onmouSEOut等事件：

  • onmouSEOver：用户的鼠标移至HTML元素上方
  • onmouSEOut：用户的鼠标移除元素
  • onmousedown：当点击鼠标按钮
  • onmouseup：当释放鼠标按钮
  • onclick：当点击鼠标

css – 如何选择除特定元素及其所有后代之外的所有元素

css – 如何选择除特定元素及其所有后代之外的所有元素

更新：这可能是不可能的.我还在寻找解决方案.

我需要创建一个CSS选择器来使用*选择所有页面元素,这将排除.exception元素及其所有后代(！).此.exception元素及其后代需要保留其初始样式,而*样式应该应用于所有其他页面元素.

重要提示：如果首先将任何样式应用于.exception及其后代,然后我需要手动将其覆盖为其初始值,则解决方案并不好！我不想将任何样式应用于.exception和/或它的后代AT ALL！

期望的结果

请记住,这只是一个微不足道的例子.我需要应用解决方案的页面包含更多元素,因此我需要一个通用的解决方案来过滤元素.那里不可能手动选择和覆盖元素.

http://jsfiddle.net/zV5gf/2/(初始状态,无解)

enter image description here

enter image description here

解决方案：不是选择器 – 不完美

这个解决方案不够好,因为它会排除li.exception,但它不会排除它的后代. li.exception后代的初始样式将丢失.

http://jsfiddle.net/zV5gf/3/

*:not(.exception){
    background-color:orange !important;
}

div.exception及其后代的逻辑解决方案不起作用(浏览器不支持)：

*:not(.exception *){
    background-color:orange !important;
}

enter image description here

enter image description here

最佳答案
把背景：继承给它的孩子怎么样？

*{
    background-color:white
}

*:not(.exception){ 
    background-color:red
}

.exception *{
    background:inherit;
}

JSFiddle

css – 如果选择器不是特定元素的子元素,那么如何定位选择器(因此只有当它是根时)

css – 如果选择器不是特定元素的子元素,那么如何定位选择器(因此只有当它是根时)

我不明白为什么以下代码没有所需的行为： 
.toggle {
      color: red;
    }
    
    :not(.list) .toggle {
      font-weight:bold;
    }
<div>
      <a href="#!">Toggle</a>
      <ul>
        <li><a href="#!">Link 1</a></li>
        <li>
          <div>
            <a href="#!">SubToggle</a>
            <ul>
              <li><a href="#!">SubLink 1</a></li>
              <li>
                <a href="#!">SubLink 2</a>
              </li>
              <li><a href="#!">SubLink 3</a></li>
            </ul>
          </div>
        </li>
        <li><a href="#!">Link 3</a></li>
      </ul>
    </div>

我认为使用：not()会导致仅将“粗体”应用于主“切换”链接,而是对所有红色应用“粗体”.为什么？

请注意,此代码嵌套了相同的类名,我不希望使用不同的css类来定位特定级别,我想仅使用后代选择器和其他运算符来定位元素

这里还有jsFiddle直接尝试.

解决方法

我想你可能想要这个： 
.toggle {
  color: red;
  font-weight: bold;
}

div *:not(.list) .toggle {
  font-weight: normal;
}

css 元素选择器实例_html/css_WEB-ITnose

css 元素选择器实例_html/css_WEB-ITnose

一个完整的html页面是有很多不同的标签组成，而标签选择器，则是决定哪些标签采用相应的css样式。本文章向码农介绍css 标签/元素选择器以及其实例，需要的码农可以参考一下。

【标签选择器】

一个完整的HTML页面是有很多不同的标签组成，而标签选择器，则是决定哪些标签采用相应的CSS样式，(在大环境中你可能出于不同的位置，但是不管怎么样，你总是穿着同一套衣服，这件衣服就是由标签选择器事先给你限定好的，不管走到哪里都是这身衣服)比如，在style.css文件中对p标签样式的声明如下：

p{font-size:12px;background:#900;color:090;}
登录后复制

[/quote]则页面中所有p标签的背景都是#900(红色)，文字大小均是12px，颜色为#090(绿色)，这在后期维护中，如果想改变整个网站中p标签背景的颜色，只需要修改background属性就可以了，就这么容易！

 

立即学习“前端免费学习笔记（深入）”；

相关阅读：

CSS3 属性选择器

css 属性选择器 - 根据html元素的name属性值选择改元素

对CSS选择器优先级(权重)的认识

css 标签选择器、id选择器、类选择器实例

CSS选择器种类及及其使用介绍

css 串联选择器和后代选择器介绍及示例

CSS 选择器详情讲解

CSS中伪选择器的用法实例

CSS选择器中的逻辑处理

css 高大上选择器:nth-child() 应用实例

我们今天的关于从 DOM 的特定元素选择性地复制 HTML+CSS+JS 的工具和dom对象中复制和删除元素方法的分享就到这里，谢谢您的阅读，如果想了解更多关于8 HTML DOM 元素的查找与改变&改变CSS样式&HTML事件、css – 如何选择除特定元素及其所有后代之外的所有元素、css – 如果选择器不是特定元素的子元素,那么如何定位选择器(因此只有当它是根时)、css 元素选择器实例_html/css_WEB-ITnose的相关信息，可以在本站进行搜索。

本文标签：

上一篇我可以在 CSS 中使用 onclick 效果吗？（css onclick是用来干嘛的）

下一篇使用 OpenSSL “无法写入‘随机状态’”是什么意思？（openwrt无法写入）

相关文章