目标网站红薯中文网 获取网页源代码也获取不了这些动态渲染的数据 所以用简单的，但是有点麻烦的方法 使用selenium执行js，或者直接在浏览器里面执行js function kkk(){...fWn8lSsFsaF/9s+k9EL38YQKC8ABGoSedLdjZXb4HLx8aMfTaPt6qbOX1d10WSD8LIl5YkNVPyqaZQMKfWrsYniA8O6JPtEJjwVTII6arY9jS3mAd9WcwcL2rTz5.../0iEUOnIdebjTVTqHj5Ttco0wJ5q5Aa5s9pR3VmupI7KgGZwBg05dVirmTZ0Ym2QSAA2kVwY3BTAEAZpTNWzmF7KLwD3mk63yf/4Js5SVS8mfwxoFgTOhPxlsc6WrtJN9tJU7BUe6yKye9...hs_decrypt(base64decode(connt_data), "76980100")) 这里代码还没封装，但是解密够了，connt_data就是需要解密的参数 76980100是上一个请求获取的解密密钥...套用即可 解密之后，里面的参数是对应的 context_kw11 这个就是对应的伪元素的class，将这个都拿去用selenium执行js的方法获取到结果，保存为字典，最后在用re正则，将所有数据都正则出来
:first-letter 伪元素的样式将应用于元素文本的第一个字（母）。 :first-line 伪元素的样式将应用于元素文本的第一行。 :before 在元素内容的最前面添加新内容。...:after 在元素内容的最后面添加新内容。...伪元素和伪类的区别： 与伪类针对特殊状态的元素不同的是，伪元素是对元素中的特定内容进行操作，设计伪元素的目的就是去选取诸如元素内容第一个字（母）、第一行，选取某些内容前面或后面这种普通的选择器无法完成的工作...它控制的内容实际上和元素是相同的，但是它本身只是基于元素的抽象，并不存在于文档中，所以叫伪元素。
可以这样理解，页面中的元素有相同的父元素 的，并且里面又包含li元素的，那么就取第一个li元素，每个子类集合都要进行判断，直到找出所有符合要求的li元素； :last-child：这个也与上面相对了，...(n)：第n个匹配元素(不包括)之后的元素(n从0开始)，如：ul:gt(2)返回从第3个ul开始的所有ul元素(含第三个)； :lt(n)：第n个匹配元素(不包括)之前的元素(n从0开始)，如：ul...利用css选择器进行选择： 元素标签名：比如说(”a“)会选出所有链接元素； #id：通过元素id进行选择，比如说(“#form1”)会选择id为form1的元素； .class：通过元素的CSS类来选择...通过子选择器，容器选择器和属性选择器进行选择： *：匹配所有的元素，比如说:(*)会把页面中的所有元素都返回； E：匹配标签名为E的所有元素，如(“a”)返回所有链接元素； E F：匹配父元素E下的标签名为...F的所有子元素（F可以为E的子类的子类，甚至更远）； E>F：匹配父元素E下的所有标签名为F的直接子元素； E+F：匹配所有标签名为F的元素，并且有E类型的兄弟节点在该F元素之前（E,F紧挨着）； E~
通过id获取元素 document.getElementById('div');//获取id为div的元素 通过class获取 document.getElementsByClassName('top'...);//获取页面中所有的class为top的元素集合 通过标签名获取 document.getElementsByTagName('p');//获取页面中所有的标签为p的元素集合 通过name获取 document.getElementsByName...('user');//获取页面中所有的name为user的元素集合 注意:通过class,name标签名抓取的元素是一个集合,即使该类只有一个符合要求的元素目标,也返回是一个集合,因此可以存储的变量,通过变量名
查看焦点元素 通过 document.activeElement 可以获取哪个元素获取到了焦点。 如图所示，我的光标在这个查询框里。 ? 可以获取到该元素。 ?...使指定元素获取焦点 focus() 方法可以使某个元素获取焦点。 如图，我把输入框的这个元素存到变量 e 里面。 ?...然后手动把焦点指到别的元素上，再通过 focus() 方法让查询框重新获取焦点。 可以看到焦点获取成功了。 ?
CSS伪类与伪元素 每日更新前端基础，如果觉得不错，点个star吧 ?...也就是说，伪类和伪元素是用来修饰不在文档树中的部分，比如，一句话中的第一个字母，或者是列表中的第一个元素。...伪类 伪类用于当已有元素处于的某个状态时，为其添加对应的样式，这个状态是根据用户行为而动态变化的。比如说，当用户悬停在指定的元素时，我们可以通过:hover来描述这个元素的状态。...虽然它和普通的css类相似，可以为已有的元素添加样式，但是它只有处于dom树无法描述的状态下才能为元素添加样式，所以将其称为伪类。 状态性伪类 是基于元素当前状态进行选择的。...比如说，我们可以通过::before来在一个元素前增加一些文本，并为这些文本添加样式。 CSS3规范中要求使用单冒号:用于CSS3伪类，双冒号::用于 CSS3伪元素，目的是区分伪类和伪元素。
1.伪类与伪元素 先说一说为什么css要引入伪元素和伪类，以下是css2.1 Selectors章节中对伪类与伪元素的描述： CSS introduces the concepts of pseudo-elements...直译过来就是：css引入伪类和伪元素概念是为了格式化文档树以外的信息。也就是说，伪类和伪元素是用来修饰不在文档树中的部分，比如，一句话中的第一个字母，或者是列表中的第一个元素。...因此，伪类与伪元素的区别在于：有没有创建一个文档树之外的元素。 3.伪元素是使用单冒号还是双冒号？...CSS3规范中的要求使用双冒号(::)表示伪元素，以此来区分伪元素和伪类，比如::before和::after等伪元素使用双冒号(::)，:hover和:active等伪类使用单冒号(:)。...1 :link 选择未访问的链接 2 :visited 选择已访问的链接 3 :hover 选择鼠标指针浮动在其上的元素 4 :active 选择活动的链接 5 :focus 选择获取焦点的输入字段 结构化
习惯了jquery的同学应该都知道获取元素样式的方式可以直接写成(obj).css(style);更方便的获取高度宽度等一些样式可以直接使用(obj).height()和 一、 getComputedStyle...是什么 getComputedStyle是一个可以获取当前元素所有最终使用的CSS属性值。...为什么要用这个属性呢，是因为通过document.getElementById(element).style.xxx可以获取元素的样式信息但是对于通过class属性引用的外部样式表就获取不到了。...但是getComputedStyle属性是只读的属性，只能读属性，不能设置，但是他可以获取到元素的最终样式信息。...不过，currentStyle属性貌似不支持伪类样式获取，这是与getComputedStyle方法的差异，也是jQuery css()方法无法体现的一点。
利用伪元素:after清除浮动 让页面呈现多列布局时经常会使用 float:left/right ，可是浮动布局会导致父元素的高度为0（未设置高度的情况下），不会根据子元素的高度而变化，另外，后面不需要浮动想在下一行显示的标签出现在浮动元素的后面...所以我们在使用浮动进行布局的时候会需要一个块级元素（行内元素无效）来设置 clear 属性，如果浮动元素下方本来就有元素，那我们可以直接对该元素设置 clear:both ，若没有其他元素需要展示，我们往往会写一个空白标签来清除浮动... 但是这样无疑会增加浏览器的渲染负担，所以考虑使用伪元素 :after 来代替这个空白标签，因为清除浮动需要在浮动元素后面，所以不可以使用...:before ，对 :after 设置 content:"" ，并使其 display:block 成为块级元素后 clear:both 来清除浮动： #content:after{content:"
今天做了一个有关js如何绑定动态修改伪类的content的内容，运用到的有( :before 和 :after 伪元素、CSS content 属性、data-* H5新属性、js)等技术。...:before伪元素和:after 伪元素； 4）:before伪元素和:after 伪元素里各自添加content属性； 5）content 和 attr 配合使用： content: attr...:after（before同理） 6）最后通过js获取到box对象，通过box对象attributes找到添加的 [data-content-before=":before"]和[ data-content-after...=":after"]属性的value，有了value值，这就可以进行动态修改 before伪元素和:after 伪元素里的content值； 以此现在做一个笔记以便以后使用，Hope to help...'; box.attributes[2].value = ':after伪元素';
本文由腾讯云+社区自动同步，原文地址 https://stackoverflow.club/article/using_js_download_html_element/ 目的： 本页面已经有文件、图片...、表格、文本，用js生成一个压缩包并弹出下载框。...步骤一：获取image image的显示用的是类型，所以很方便获取base64字串。...步骤二：获取表格 表格数据下载打算采用csv格式，比较简单不容易出错。...需要两个npm 包， "file-saver": "^2.0.2", "jszip": "^3.2.1", 参考: cnblog 下载文件 github 下载zip 脚本之家 下载zip github js
获取网页元素是前端开发过程中的基础知识，可以通过DOM操作来实现。DOM（文档对象模型）是一种表示和操作html,xml和svg文档的标准编程接口。...javascript需要掌握的常见方法有：1、getElementById：是指根据指定的 id 属性获取指定的元素。...示例：var phone= document.getElementById("phone");2、getElementsByClassName：是指通过元素的class属性获取指定元素集合。...示例：var x = document.getElementsByClassName("example");3、getElementsByTagName：通过标签名获取指定的元素集合。...示例代码：var div = document.querySelector("div");5、querySelectorAll:通过CSS选择器获取所有符合条件的元素集合。
什么是伪元素 伪元素表示了某个元素的子元素。这个子元素虽然在逻辑上存在，但却并不实际存在于文档树中。 因为伪元素并不在文档树中，所以通过JS，也抓取不到伪元素，也不能给它绑事件。...语法 伪元素以::开头。 在CSS1和CSS2中，伪元素和伪类一样，都是用:开头。但在CSS3中，伪元素以::开头，用以和伪类进行区分。 IE8不支持::。因此如果要兼容IE8，只能用:。...常见的伪元素 ::before 在当前元素的内容的前面插入一个子元素。插入的元素为内联元素。 需要注意的是，使用::before时， 必须使用content来指定子元素的内容。...什么时候用伪元素 HTML 标签的目的，就是为了展示内容信息。非内容信息要使用伪元素。 具体的使用场景是图标和清除浮动。 所谓的非内容信息，指的是一些对内容进行修饰的信息。...相关文章 CSS伪元素的一些坑
背景 写了这么多年代码，对CSS中的伪类和伪元素竟然没有细致的进行过学习总结，由此可见在实际代码开发中，用的也确实不多，也就用过一些:first-child,:hover之类的吧，其它的连before...什么的都没用过，于是迫切需要大于伪元素与伪类进行一个系统整体的学习。...伪类和伪元素 伪类：是以一个冒号作为前缀，被添加到选择器的末尾，当你希望在特定状态下(:hover)才被呈现到指定元素时，可以往元素的选择器后面加上伪类。...伪元素：用于创建一些不在文档树中的元素，并为其添加样式。比如::before是指得元素前添加文本，且为文本添加样式，虽然用户可以看到这些文本，但文本实际不在DOM结构中。...常用的伪类和伪元素 伪类可以从状态类伪类、结构类伪类、其它伪类和表单相关伪类进行分类。
伪元素技巧 在 CSS 伪元素基本用法一文中讲述了伪元素的基础功能，本章学习一些进阶功能，看看伪元素能实现哪些方便好用的功能。...; padding: 5px; } .inner { float: left; width: 80px; height: 80px; border: 1px solid; } 使用伪元素清除浮动的办法...lz5z.com/assets/img/avatar.svg); } 计数器 counter counter-reset：创建或者重置一个计数器 counter-increment：计数器递增 content：配合伪元素插入内容...{ background: green; border: 2px solid green; color: #fff; content: "\2714"; } 最后 在网上还有很多关于伪元素的用法...，非常有趣，既能减少 DOM 元素数量，还能用 CSS 实现一部分 JS 的功能，非常酷炫，后面见到有趣的用法会不断记录。
伪类的效果可以通过添加一个实际的类来达到，而伪元素的效果则需要通过添加一个实际的元素才能达到，这也是为什么他们一个称为伪类，一个称为伪元素的原因。...伪类的种类 伪元素的种类 区别 这里用伪类 :first-child 和伪元素 :first-letter 来进行比较。...p>i:first-child {color: red} first second i标签的第一个元素，也就是first，颜色会变红。...那么我们接着看看为元素： p:first-letter {color: red}I am stephen lee.... 总结 伪元素和伪类之所以这么容易混淆，是因为他们的效果类似而且写法相仿，但实际上 css3 为了区分两者，已经明确规定了伪类用一个冒号来表示，而伪元素则用两个冒号来表示。
CSS 引入伪类和伪元素的概念是为了格式化文档树以外的信息。也就是说，伪类和伪元素是用来修饰不在文档树中的部分，比如，一句话中的第一个字母，或者是列表中的第一个元素。...2.伪类和伪元素的概念 2.1 伪类： 伪类用于当已有元素处于某个状态时，为其添加对应的样式，这个状态是根据用户行为而动态变化的。...2.2 伪元素 伪元素用于创建一些不在文档树中的元素，并为其添加样式。 例如，我们可以通过 :before 来在一个元素前增加一些文本，并为这些文本添加样式。...3.伪类列举 伪类和伪元素-1.png 3.1 状态伪类 状态伪类是基于元素当前状态进行选择的。在与用户的交互过程中元素的状态是动态变化的，因此该元素会根据其状态呈现不同的样式。...选择处于编辑状态的元素；input，textarea 和设置 contenteditable 的 HTML 元素获取焦点时即处于编辑状态 :checked input:checked 匹配勾选的input
包含文本和注释节点 原生JS有一个常见的小技巧那就是通过元素的previousSibling 属性，额外需要注意的是该属性会遍历text节点，即回车键。...从零开始我们可以这样的代码获取到一个元素属于父元素的第几个子元素。 var child = this; while( (child = child.previousSibling) !...= null ) i++; 案例代码如下： Html: 123abc JS...= null) i++; console.log(i) //console 1 通过循环遍历previousSibling 属性是否为null这个小技巧，就可以获取到当前元素在父元素中的位置了。
/* 所有用户指针悬停的按钮 */ button:hover { color: blue; } 伪类存在的意义是为了通过选择器，格式化DOM树以外的信息以及不能被常规CSS选择器获取到的信息。...伪元素 伪元素是一个附加至选择器末的关键词，允许你对被选择元素的特定部分修改样式。 下例中的 ::first-line 伪元素可改变段落首行文字的样式。 /* 每一个 元素的第一行。...分类 伪类 ? 伪元素 ?...因此，伪类与伪元素的区别在于：有没有创建一个文档树之外的元素。...总结 1.伪类本质上是为了弥补常规CSS选择器的不足，以便获取到更多信息； 2.伪元素本质上是创建了一个有内容的虚拟容器； 3.CSS3中伪类和伪元素的语法不同； 4.可以同时使用多个伪类，而只能同时使用一个伪元素
熟悉前端的人都会听过css的伪类与伪元素，然而大多数的人都会将这两者混淆(包括我)。那今天就让我们来看看伪类和伪元素的区别吧!...伪类与伪元素 先说一说为什么css要引入伪元素和伪类，以下是css2.1 Selectors章节中对伪类与伪元素的描述： CSS introduces the concepts of pseudo-elements...直译过来就是：css引入伪类和伪元素概念是为了格式化文档树以外的信息。也就是说，伪类和伪元素是用来修饰不在文档树中的部分，比如，一句话中的第一个字母，或者是列表中的第一个元素。...:checked 被选中的input元素 :empty 匹配没有子元素的元素 :valid 匹配条件验证正确的表单元素。 伪元素 伪元素前面是两个冒号，E::first-line 伪元素。...伪类的效果可以通过添加一个实际的类来达到，而伪元素的效果则需要通过添加一个实际的元素才能达到，这也是为什么他们一个称为伪类，一个称为伪元素的原因。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
即时通信 IM
腾讯会议
