Use DOM methods to navigate a document(使用DOM方法来操纵文档)

本文介绍如何使用Jsoup库解析HTML文档并提取所需数据。通过示例展示了如何选取元素、获取属性及文本内容等操作。
[size=large]Problem[/size]
You have a HTML document that you want to extract data from(你想从一个html文件中提取数据). You know generally the structure of the HTML document(你知道html的结构).

[size=large]Solution[/size]
Use the DOM-like methods available after parsing HTML into a Document.
(使用类似dom操作的方法来解析html文档)
File input = new File("/tmp/input.html");
Document doc = Jsoup.parse(input, "UTF-8", "http://example.com/");

Element content = doc.getElementById("content");
Elements links = content.getElementsByTag("a");
for (Element link : links) {
String linkHref = link.attr("href");
String linkText = link.text();
}

[size=large]Description[/size]
Elements provide a range of DOM-like methods to find elements(提供一系列类似于dom方法来找到元素), and extract and manipulate their data(提取和操纵数据). The DOM getters are contextual(): called on a parent Document they find matching elements under the document; called on a child element they find elements under that child. In this way you can winnow in on the data you want.

[size=medium]Finding elements(查找元素方法)[/size]
getElementById(String id)
getElementsByTag(String tag)
getElementsByClass(String className)
getElementsByAttribute(String key) (and related methods)
Element siblings: siblingElements(), firstElementSibling(), lastElementSibling(); nextElementSibling(), previousElementSibling()
Graph: parent(), children(), child(int index)
[size=medium]Element data(元素数据)[/size]
attr(String key) to get and attr(String key, String value) to set attributes
attributes() to get all attributes
id(), className() and classNames()
text() to get and text(String value) to set the text content
html() to get and html(String value) to set the inner HTML content
outerHtml() to get the outer HTML value
data() to get data content (e.g. of script and style tags)
tag() and tagName()
[size=medium]Manipulating HTML and text(操作html 和 文本)[/size]
append(String html), prepend(String html)
appendText(String text), prependText(String text)
appendElement(String tagName), prependElement(String tagName)
html(String value)
`useLocation` 是 `react-router-dom` 中的一个钩子函数,用于获取当前 URL 的信息。以下是其使用方法及示例: ### 获取当前路由状态 在组件中使用 `useLocation` 可获取当前路由的状态信息。如在 `Detail` 组件里,通过 `useLocation` 获取 `location` 对象,进而访问 `state` 中的 `id` 属性: ```jsx import React from 'react'; import {useLocation} from "react-router-dom"; export default function Detail() { const location = useLocation(); console.log("location.state.id", location.state.id); return ( <div> <p>location.state.id:{location.state.id}</p> </div> ); } ``` 此示例展示了如何利用 `useLocation` 从路由状态中提取特定信息并在组件中展示 [^1]。 ### 结合路由重定向 可结合 `useLocation` 和 `useNavigate` 实现路由重定向。在 `App` 组件中,使用 `useLocation` 获取当前路径名,当路径名为 `/my` 时,利用 `useNavigate` 重定向到首页: ```jsx import { useEffect } from "react"; import { Link, Outlet, useLocation, useNavigate } from "react-router-dom"; function App() { const location = useLocation(); const navigate = useNavigate(); useEffect(() => { console.log(location); if (location.pathname === '/my') { console.log('重定向到首页'); navigate('/'); } }, [location.pathname]); return ( <> <nav> <Link to='/'>home </Link> <Link to='/about'>about </Link> <Link to='/my'>my </Link> </nav> <Outlet></Outlet> </> ); } export default App; ``` 此示例展示了如何借助 `useLocation` 监控当前路径变化,依据特定条件实现路由重定向 [^3]。 ### 在服务器端渲染中使用 在服务器端渲染中,可使用 `StaticRouter` 配合 `useLocation`。如下代码展示了在 Node.js 端使用 `StaticRouter` 渲染 React 应用,`useLocation` 可在组件内获取当前 URL 信息: ```javascript import * as React from "react"; import * as ReactDOMServer from "react-dom/server"; import { StaticRouter } from "react-router-dom/server"; import http from "http"; function requestHandler(req, res) { let html = ReactDOMServer.renderToString( <StaticRouter location={req.url}> {/* The rest of your app goes here */} </StaticRouter> ); res.write(html); res.end(); } http.createServer(requestHandler).listen(3000); ``` 此示例展示了在服务器端渲染环境中,如何通过 `StaticRouter` 为 `useLocation` 提供当前 URL 信息 [^2]。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值