要排序的元素类: public static class NameCount implements Comparable { Collator collator...集合: List NameCountList = Lists.newArrayList(); 该集合中有多个元素后,按name排序的实现: Collections.sort(NameCountList
List list) { list.forEach(each -> System.out.print(each+" ")); } /** * 按对象属性去重...* @return */ public static List deleteSameByOne(List users) { // 1.单个属性去重...(Comparator.comparing(User::getAge))), ArrayList::new)); } /** * 按对象属性去重...* @return */ public static List deleteSameByMany(List users) { // 2.多属性去重...:把多个属性拼起来( 本质上还是单属性去重 ) return users.stream().collect(Collectors.collectingAndThen(
,并且不会返回隐藏元素的文本。 innerText 没有 textContent 兼容性好,尤其是对于 IE 浏览器。...在之后不可能再次将节点再次插入到任何其他元素或同一元素中。 综上,推荐使用 textContent 属性。 2....白名单过滤 白名单过滤就是保留部分标签和属性。 白名单过滤可以使用 JavaScript 中的一个第三方库:cheerio。可以使用 npm 进行下载或者 script 标签进行引入。...var $ = cheerio.load(html); // 允许保留的标签和属性 var whiteList = { 'img': ["src"], };...// 选中所有的元素 $("*").each(function(idx,elem){ // 如果白名单中没有这个元素,就把这个元素从 HTML 中删除 if(!
属性操作(atrributes) 用来获取和更改属性的方法: .attr(name, value) 这个方法用来获取和设置属性。获取第一个符合匹配的元素的属性值。...如果某个属性值被设置成null,那么该属性会被移除。...html() //=> Apple 参见 http://api.jquery.com/removeClass/ 遍历 .find(selector) 在当前元素集合中选择符合选择器规则的元素集合...$('#fruits').find('li').length //=> 3 .parent() 获取元素集合第一个元素的父元素 $('.pear').parent().attr('id') //=>...() 获取元素集合中第一个元素的所有兄弟元素,不包含它自己 $('.pear').siblings().length //=> 2 .children( selector ) .each( function
在匹配的元素中只能获得第一元素的属性。如果设置一个属性的值为null,则移除这个属性。你也可以传递一对键值,或者一个函数。...如果className 没有定义,所有的classes将会被去除,也可以传函数。...$('.pear').parent().attr('id') //=> fruits .parents([selector]) 获得通过选择器筛选匹配的元素的parent集合。....parents().length // => 2 $('.orange').parents('#fruits').length // => 1 .closest([selector]) 对于每个集合内的元素...context参数对chreeio没有意义,但是用来维护APi的兼容性。
selector 和 context 可以是 字符串表达式 、 dom元素 、 dom元素集合 、 cheerio对象 ,而 root 一般都是html文档字符串。...attribute 在应用中我们经常会遇到需要对属性进行获取和修改,现在我们来讲解一下都有哪些方法。 .attr(name[, value]) 这个方法可以获取和设置属性,第二个参数是可选的。...当第二个参数不存在时表示获取属性的值,当有带有第二个参数时,表示设置属性的值。如果设置一个属性的值设置为null ,则删除该属性。..., 'favorite').html() //=> Apple .removeAttr(name) 通过 name 移除某一个属性...,同时返回被移除的这个元素。
正则表达式:艰难的路 在没有任何依赖性的情况下,最简单的进行网络抓取的方法是,使用 HTTP 客户端查询网页时,在收到的 HTML 字符串上使用一堆正则表达式。...第二个元素(在索引1中)将找到我们想要的 标记的 textContent 或 innerHTML。但是结果中包含一些不需要的文本( “Username: “),必须将其删除。...要从每个标题中提取文本,必须在 Cheerio 的帮助下获取 DOM元素( el 指代当前元素)。然后在每个元素上调用 text() 能够为你提供文本。... 代码中用 JSDOM 创建一个 DOM,然后你可以用和操纵浏览器 DOM 相同的方法和属性来操纵该 DOM。...这就具备了一些以前没有的可能性: 你可以获取屏幕截图或生成页面 PDF。 可以抓取单页应用并生成预渲染的内容。 自动执行许多不同的用户交互,例如键盘输入、表单提交、导航等。
我们可以知道列表元素被一个id为post_list元素包裹着,单个列表元素内容是由class为post_item的div元素包裹。...js动态插入的数据读取 前面我们使用request库请求回来了html文档,然后使用cheerio对文档进行解析,整个过程没有去像浏览器那样解析渲染html文档、运行js。...因为这块是js在浏览器运行时动态添加到网页中的内容,因此,我们请求首页时返回的数据并没有这里的数据。...但是这个库中的api没有使用then-able方案,使用的是callback方案,以及js动态写入的内容无法获取到。...解析js动态写入的内容 :_fetchDynamicContent /** * @desc 抓取js动态渲染的页面的内容 * @param {Array} urls 需要抓取的 url 集合
载入 HTML 我是用 Cheerio 模块帮我完成这一工作。...const cheerio = require('cheerio'); const fs = require("fs"); const path = require("path"); const filePath...style>`; // 在 body 后加入 document.body.appendChild(loading); // 如果页面中没有...// 全路径 let thisLink = $pjax_fullpath(posts_list[i].href); // Session Storage 没有才...还有一些错误 如果你定义了 onload 等事件,页面没有刷新即代表没有变化,你需要在 $pjax_jump() 中简单清除一下这些信息。
check,uncheck,selectscrollTo 向网页注入脚本: .js .css的文件类型原理是跟油猴差不多,可以编写自己的js代码注入十分方便 wait 函数可以按照延迟时间或者一个 dom 元素的出现...id']}/hot` const topicOriginalInfo = await nightmare .goto(url) .wait('.zu-main-sidebar') // 等待该元素的出现....evaluate(function () { // 获取这块数据 return document.querySelector('.zu-main-sidebar').innerHTML...wait(waitElement) .evaluate(function () { return document.querySelector('.zh-profile-card').innerHTML...是一个 jQuery 的 selector 库,可以应用于 HTML 片段并且获得对应的DOM 元素,然后我们就可以进行对应的 DOM 操作->增删改查都可以,这边主要用来查询 DOM 和获取数据。
nodejs cheerio模块提取html页面内容 1. nodejs cheerio模块提取html页面内容 1.1. 找到目标元素 1.2. 美化文本输出 1.3. 提取答案文本 1.4....cheerio模块是一个类似jquery的模块,具有相似的API、功能,能够将一个网页解析为DOM,以及通过selector选择元素,设置、获取元素属性。...A 注:其中答案保存在网页中,但在网页中没有显示出来。 1.1 找到目标元素 提取问题文本的整体思路:先找到包含题目的所有元素,然后再获取这些元素的内容即可。...要实现这个方法,要获取一个元素的所有的子结果,使用cheerio的contents函数,这个函数获取一个元素的所有子元素(包括文本元素)。然后调用字符串的trim函数去除首尾的空白文本。...这个代码基本上是解决一次性问题,没有什么重用性(在编写的过程中也没有考虑这些)。但是最重要的是:它解决了问题,它能够工作。它不需要那么好!
用到的模块 mysql http fs cheerio 其中fs 系统自带,不必安装。...其余需要运行以下代码安装: npm install -S mysql http cheerio 运行结果 代码 const http = require('http'); // 导入http模块 const...(html); let list = $("li"); // 遍历每一个li,提取出href,alt属性。...(this).find('a'); let href = a.attr('href'); let alt = a.attr('alt'); // 过滤掉没有...alt的,因为这里是直接获取所有li元素,有些不是目标元素 if (alt !
元素没有被发现,myElement将是空的。...五、通过HTML对象集合找到HTML元素 此示例查找id="frm1"的表单元素,在表单集合里,并显示所有的颜色值。...HTML DOM允许JavaScript获取和更改HTML元素的属性。 六、扩展 获取元素的属性值 getAttribute()方法用于获取元素上指定属性的当前值。...在元素上设置属性 setAttribute()方法用于设置指定元素上的属性的值。...从元素中删除属性 removeAttribute()方法用于从指定元素中删除属性。
父节点拥有子节点,同级的子节点被称为同胞(兄弟或姐妹) 常用节点获取方法和属性 要进行 DOM 操作,首先要获取到需要操作的节点或节点集合,接下来以下面的示例代码为基础,介绍常用的 DOM 获取方法和属性...可以使用索引获取节点集合中的某个元素节点(后续的节点集合也可使用这种方法) document.getElementsByTagName('p')[0] getElementsByClassName(...(间接查找) 方法 说明 innerHTML 返回元素内包含的所有 HTML 内容(文本和标签),类型为字符串 innerText 和innerHTML类似,但是只返回文本 children 返回指定元素的子元素节点集合...,下面介绍如何交互,主要用到修改、删除、添加 DOM修改 方法 说明 innerHTML innerHTML 除了获取元素内容,也可通过赋值用于修改元素中内容。...属性返回一个元素类属性集合(这里可以简单理解为类名的集合),通过使 用 classList 中的方法可以方便的访问和控制元素类名,达到控制样式的目的 classList 常用方法: 方法 说明
) { console.log('id名为box的div'); } // class let divS = document.getElementsByClassName('box01'); // 元素集合...let div02 = document.getElementsByTagName('div'); // 元素集合 类数组 div02 [0].onclick = function () { // 集合取值...); // 元素集合 类数组 ipt [0].onclick = function () { // 集合取值:序号0开始 [ ] console.log('第一个name属性为sex的input');...} // 选取全部符合条件的元素 let pS = document.querySelectorAll('div p'); // 元素集合 类数组 pS [1].onclick = function...() { // 集合取值:序号0开始 [ ] console.log('第二个在div标签里的p'); } // 选取第一个符合条件的元素 let p01 = document.querySelector
window.Node = { ELEMENT_NODE : 1, TEXT_NODE : 3 }; } 2.Document类型 Document类型表示文档,或文档的根节点,而这个节点是隐藏的,没有具体的元素标签...;//获取上一个URL,服务器端 //对象集合 document.anchors;//获取文档中带name属性的元素集合 document.links;//获取文档中带href属性的元素集合...document.applets;//获取文档中元素集合,已不用 document.forms;//获取文档中元素集合 document.images;//获取文档中元素集合 3.Element类型 Element类型用于表现HTML中的元素节点。...innerHTML属性 document.getElementById('box').innerHTML;//获取文本(不过滤HTML) document.getElementById('box').innerHTML
Puppeteer是一个基于Node.js的无头浏览器库,它可以模拟浏览器的行为,如打开网页、点击元素、填写表单等。...Cheerio是一个基于jQuery的HTML解析库,它可以方便地从HTML文档中提取数据,如选择器、属性、文本等。...例如:page.goto(url):打开一个网页page.waitForSelector(selector):等待一个元素出现page.click(selector):点击一个元素page.evaluate...a-last a'); // 如果有下一页的按钮,就点击它,并继续循环 if (nextButton) { await nextButton.click(); } else { // 如果没有下一页的按钮...性能优化的方法有很多,例如:减少无用的请求:有些网页会加载很多不相关的资源,如图片、视频、广告等,这些资源对于数据抓取来说是没有用的,而且会增加网络流量和内存占用。
//查找id为shanghai的元素 var shanghai= docment.getElementById('shanggai'); //查找name为city的元素集合 var citys...= docment.getElementByNames('city'); //查找class为btn btn-info的元素集合 var buttons = getElementsByClassName...('btn btn-info'); //在citys对象中查找标签名为li的元素集合 var li = citys.getElementsByTagName('li'); 改变标签内容和属性...//获取id为"div"的元素 var node = document.getElementById('div'); //增加或改变元素属性 document.getElementById('div...,元素节点是没有值的 console.log(div.nodeValue); //输出为"div class" 属性节点是有值的 console.log(div.getAttributeNode
JavaScript-Dom 简介 DOM:Document Object Model 节点 HTML 文档中的所有内容都是节点 整个文档是一个文档节点 每个 HTML 元素是元素节点 HTML 元素内的文本是文本节点...document.URL document常用方法 名称 说 明 getElementById() 返回对拥有指定id的第一个对象的引用 getElementsByName() 返回带有指定名称的对象的集合...getElementsByTagName() 返回带有指定标签名的对象的集合 write() 向文档写文本、HTML表达式或JavaScript代码 节点的属性 属性名称 描述 parentNode...返回节点的父节点 childNodes 返回子节点集合,childNodes[i] firstChild 返回节点的第一个子节点,最普遍的用法是访问该元素的文本节点 lastChild 返回节点的最后一个子节点...||obj.lastChild.firstChild.innerHTML; alert(str); element属性 属性名称 描述 firstElementChild 返回节点的第一个子节点
特别说明: innerHTML是符合W3C标准的属性,而innerText只适用于IE浏览器,因此,尽可能地去使用innerHTML,而少用innerText。...children:非标准属性,它返回指定元素的子元素HTMLCollection集合,该集合只包含HTML节点,不包含文本节点。...childNodes:标准属性,它返回指定元素的子元素NodeList节点集合,包含HTML节点、所有属性、文本节点。...document.getElementById():返回匹配指定ID属性的元素节点对应的对象,如果没有发现匹配的节点,则返回null。...返回值是一个HTMLCollection对象,也就是说,搜索结果是一个动态集合,任何元素的变化都会实时反映在返回的集合中。这个方法不仅可以在document对象上调用,也可以在任何元素节点上调用。
领取专属 10元无门槛券
手把手带您无忧上云