Articles of dom

技术为服务器端DOM操作(Java与节点)

我正在做一个POC,在将HTML内容提供给客户端/浏览器之前,我必须处理DOM。 一些用例: 在html页面中注入一个javascript,这个javascript是客户特定的。 根据用户以前select的主题注入样式表。 …更多这样的情况下有一些业务逻辑。 我已经完成了所有的使用案例。 我已经使用Jsoup在Java中实现了它。 我也在Node Js中完成了。 我必须决定select哪种技术? 有没有人知道这两种技术的优点/缺点? 请build议我应该如何testing哪两个更好。 任何可用于testing内存使用的工具/资源使用情况/所花费的时间等。虽然我已经计算了两种情况下的时间。 PS:请随意推荐任何其他技术的服务器端DOM操作和工具来testing其性能和内存。

如何删除htmlparse的一部分?

我做了一个网页的htmlparse,我得到了这个块的页面的DOM: { raw: 'td', data: 'td', type: 'tag', name: 'td', children: [ { raw: '600', data: '600', type: 'text' } ] }, 我怎样才能删除该htmlparse的所有types的“文本”? 谢谢。

在JS中parsing远程DOM

我想获得一个远程网站的DOM,并能够parsing它,理想情况下,将parsing的结果转换成一个DOM节点,并从中有效地获取所需的元素,然后处理它们。 也就是说,我想从检索到的DOM中切出某些元素,并将它们存储在数组中以便进一步操作。 它实际上是可以实现的吗? 到目前为止,我已经与这个: import request from 'request'; export default function getBody(url, callback) { request(url, (err, res, body) => { callback(body); }); } 并在path文件夹中: import express from 'express'; import getBody from '../server'; const router = express.Router(); const url = 'http://www.google.com'; let result = {}; getBody(url, response => { result = response; }); router.get('/', (req, res, […]

使用partialreplace存储为string的html元素

我使用node.js从一个API拉入HTML,我将它存储在一个variables之前,我显示它。 我需要replace该HTMLstring中的链接,但我只能使用链接的前部进行search,因为它们将是dynamic的。 我发现了一个使用document.querySelectorAll("a[href^='http://somelink.com/12345678']") Javascript getElement的href? 但是我没有使用DOM。 需要删除/replace的dynamic链接: <a href="http://somelink.com/12345678-asldkfj>Click Here</a> <a href="http://somelink.com/12345678-clbjj>Click Here</a> <a href="http://somelink.com/12345678-2lksjd>Click Here</a> 我可以search的是: <a href="http://somelink.com/12345678 我需要更改实际的链接名称“单击此处”或删除元素。 任何想法如何实现与纯JS的这个? 最初,我想也许有一种方法来创build一个假/临时DOM? 编辑:用我的代码修改下面的答案,它正是我所需要的。 var str = '<a href="http://somelink.com/12345678-asldkfj">Click Here</a><a href="http://somelink.com/12345678-clbjj">Click Here</a><a href="http://somelink.com/12345678-2lksjd">Click Here</a>'; var div = document.createElement("div"); div.innerHTML = str; var links = div.querySelectorAll("a[href^='http://somelink.com/12345678']"); for(i=0; i<links.length; i++) { if(links[i]) { str = str.replace(links[i].outerHTML, 'New Name'); […]

EventListener存储在哪里?

HHi大家 有人知道在哪里存储事件当我们使用addEventListener方法? 例如: window.addEventListener('mousedown', this.myvar.onClick ); 没关系,但我试图find它的存储位置? 我尝试检查 windows.event windows.Event() console.dir(window.addEventListener) window._debugWindow window.dispatchEvent() // … many other try 我发现无法检查当前数据侦听器存储在哪里。 我需要有名单|| 注册debugging感谢帮助 已解决编辑:

比较两个相等节点的childNodes返回false,比较它们的innerHTML返回true,为什么?

我正在构build一个比较Node.js中两个DOM的非常基本的函数,我打算不仅要检测差异,还要确定确切的区别。 令人惊讶的是,当我使用两个相等的DOM(使用jsdom重build)时,比较节点的childNodes在使用childNodes时返回false,在使用innerHTML时为true。 const checkForUpdates = function(website) { let oldDom = new JSDOM(website.storedPage.page); oldDom = oldDom.window.document.querySelector('body'); let newDom = new JSDOM(website.newPage.page); newDom = newDom.window.document.querySelector('body'); const startChecking1 = function(someDom, anotherDom) { return someDom.childNodes === anotherDom.childNodes; // This returns false }; const startChecking2 = function(someDom, anotherDom) { return someDom.innerHTML === anotherDom.innerHTML; // This returns true }; console.log(startChecking(oldDom, newDom)); […]

jsdom:使用jQuery将脚本附加到body

如何使用jsdom和jQuery将脚本附加到DOM主体? 使用$('body').append('<script src="…"></script>')的明显答案实际上是在文档head添加脚本。 这是我testing的基本node.js脚本: var jsdom = require('jsdom'); jsdom.env( "http://google.com", ['http://code.jquery.com/jquery-1.6.min.js'], function(err, window) { var $ = window.jQuery; $('body').append('<script src="http://example.com/script.js"></script>'); console.log($('html').html()); } ); 从而导致以下内容开始: <head><script src="http://example.com/script.js?_=1352426933034"></script>… 有趣的是,如果你在<sc ript src="…"></script>添加一个空格,那么正确的添加了一个空格,所以我想要的东西(jsdom)会劫持这个脚本,所以它可以添加cachebuster(?)把它放在标题中。 是什么原因造成的, 如何防止它发生,所以它附加脚本呢? 物有所值, $ npm ls /Users/codyaray/dev/proxy/test └─┬ jsdom@0.2.19 ├─┬ contextify@0.1.3 │ └── bindings@1.0.0 ├── cssom@0.2.5 ├── cssstyle@0.2.3 ├── htmlparser@1.7.6 └─┬ request@2.11.4 ├─┬ form-data@0.0.3 │ ├── […]

在Javascript / Node.js中recursion获取两个元素之间的所有HTML(不包括结束标记)

我需要能够将某些元素分别存储在数据库中,但在检索时重新生成HTML以供显示。 我们的解决scheme(开放build议)是存储条目的leadingHTML和trailngHTML属性。 这应该使我们能够像我们想要的那样灵活 – 但只有一个问题。 我正在试图写代码来parsingHTML。 以下面的HTML为例: <h1>this is leadingHTML</h1> <h2>this is leadingHTML2</h2> <p class='select' id='1'>A1</p> <h1 >this is trailngHTML</h1> <h2>this is trailngHTML2</h2> <p class='select' id='2'>A2</p> <h1>this is trailngHTML3</h1> <h2>this is trailngHTML4</h2> <p class='select' id='3'>A3</p> <figure id='fig'> <figCaption> this is some text <span class='select'>B1</span> <div>some text <span class='select'>B2</span></div> </figCaption> <img class='select' alt='test' src='test.jpg'/> <img class='select' […]

Express和Cheerio / JSDOM

我试图让Cheerio和Express一起工作。 我想能够从服务器上操纵dom,但是我发现的只是网页抓取。 有一些要求.. 目前,我可以运行多个app.listen(port); 语句,并使用多个服务器。 我试图附加<script>alert("test);</script>到快递发送的每一个页面。 我创build了快速服务器:(假设Path是一个预定义的variables) var express = require('express'); var app = express(); app.get('/', function (req, res) { app.use(app.static(Path)); res.sendFile(Path + "/index.html"); }); app.listen(Port); 你们可以给我一个工作的例子,将其附加到页面。 有没有办法让这个实时工作? 谢谢!

即使在重新加载页面期间如何使DOM元素可见?

我想在底部执行一些固定的div,如果用户在我的网站上,不用重新加载它们。 这就像Facebook聊天,用户可以遍布网站,但聊天是可见的? 这个问题是因为我创build了与NodeJS的聊天,当页面刷新时,连接被销毁并重新创build,所以我想在这个页面重新加载的时候使这个连接持久化。 我知道可能的解决scheme,使每个请求Ajax调用,但是…这是无法使用….