需要一些关于如何查找由 JavaScript 生成的动态 DOM ID 的说明

当我尝试抓取一些网站时，我发现了一个找不到解决方案的问题。我需要使用 JavaScript 从运行 AJAX 的网页中选择一些数据。如果我点击页面上的按钮，我可以从 Chrome 开发者工具中看到有许多元素具有动态 ID。例如：如果我像这样运行 JavaScript： var data = document.getElementsByClassName('title'(; 我可以看到有很多 DOM 项目，以下是元素之一。

<!DOCTYPE html>
<html class="context-soccer yui3-js-enabled" lang="en-GB">
<head>
<title></title>
<style>
a {
	text-decoration: none;
}
.com-bet-button {
	display: inline-block;
	text-align: center;
	height: 25px;
	line-height: 25px;
	font-size: 12px;
	font-weight: 700;
	border-width: 0;
	width: 42px;
	color: #fff;
	font-size: 13px;
	padding: 0;
	background-color: #2797e6;
}
a:active, a:hover {
	outline: 0;
}
a:focus {
	outline: thin dotted;
}
.com-bet-button:focus, .com-bet-button:hover {
	background-color: #2180c4;
}
.mod-minimarketview .ui-bet-button, .mod-minimarketview .ui-runner-active {
	height: 31px;
	line-height: 31px;
}
.mod-minimarketview .minimarketview-content .ui-bet-button {
	float: right;
}
menu, ol, ul {
	padding: 0 0 0 40px;
}
body {
	color: #1e1e1e;
	font-size: 12px;
}
blockquote, body, code, dd, div, dl, dt, fieldset, form, h1, h2, h3, h4, h5, h6, input, legend, li, ol, p, pre, td, textarea, th, ul {
	margin: 0;
	padding: 0;
}
li {
	list-style: none;
}
.mod-minimarketview .minimarketview-content ul li {
	float: left;
	width: 212px;
}
.mod-minimarketview .minimarketview-content .runner-item {
	border-bottom: 1px solid #e1e1e1;
}
.mod-minimarketview .minimarketview-content .runner-item:hover, .mod-minimarketview .minimarketview-content ul.sortedMarketList > li.sortedMarket:hover {
	background-color: #e1e1e1;
	transition: background-color .1s ease-in;
}
.mod-minimarketview .minimarketview-content .runner-list3 li.runner-item {
	width: 212px;
}
dl, menu, ol, ul {
	margin: 1em 0;
}
.mod-minimarketview .minimarketview-content {
	position: relative;
	float: left;
	width: 100%;
	transition: max-height 1s linear;
}
.mod-minimarketview {
	transition: max-height 1s linear;
	transition: margin-bottom .1s linear;
	float: left;
	width: 100%;
	*zoom:1: ;
	margin-bottom: 5px;
	background-color: #fff;
}
.mod-marketgroups .list-minimarkets {
	float: left;
	width: 100%;
	margin-top: 0px;
}
.mod-eventgroups .headtohead-container, .mod-eventgroups .redirect, .mod-eventgroups .update-container {
	float: left;
	width: 100%;
}
.module-placeholder {
	margin: 0 1px 5px;
}
#zone-rightcolumn > .grid-1 > .module-placeholder {
	width: 636px;
	float: left;
}
#zone-rightcolumn > .grid-1 {
	width: 100%;
	float: left;
}
#zone-rightcolumn {
	width: 638px;
	float: left;
	position: relative;
}
#zone-left-right-columns {
	width: 1014px;
	margin: 0 auto;
}
#zone-container .scroller, .zone-container .scroller {
	padding: 20px 0 30px;
	display: block;
	*zoom:1: ;
}
.zone-container {
	width: auto !important;
}
#zone-container, .zone-container {
	position: relative;
	width: 100%;
	min-height: 600px;
}
body {
	margin: 0;
}
body {
	font-size: 1em;
	line-height: 1.4;
}
html {
	font-size: 100%;
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
}
button, html, input, select, textarea {
	color: #222;
}
html {
	-webkit-font-smoothing: antialiased;
}
html, html.page-virtual-sports {
	background-color: #e1e6ea !important;
}
button, html, input, select, textarea {
	font-family: Arial,Tahoma,Verdana,Helvetica,sans-serif;
}
html {
	color: #000;
	background: #fff;
}
html {
	background: #ecf0f3 !important;
}
</style>
</head>
<body class="lang-en jur-international" id="yui_3_5_0_1_1577049074725_23110" data-twttr-rendered="true"><div class="zone-container" id="zone-container"><div class="scroller context-event" id="yui_3_5_0_1_1577049074725_23109"><div class="zone grid-1-1" id="zone-left-right-columns"><div class="grid-1 last-grid" id="yui_3_5_0_1_1577049074725_23121"><div class="zone grid-1 page-area page-column" id="zone-rightcolumn" data-column="Middle" data-page-area="Main"><div class="grid-1 last-grid" id="yui_3_5_0_1_1577049074725_23120"><div class="module-placeholder" id="yui_3_5_0_1_1577049074725_23119"><div class="mod yui3-widget yui3-module yui3-eventgroups" id="mod-eventgroups-1015-container" data-mod-id="1015" data-mod-type="eventgroups"><div class="mod-eventgroups mod-eventgroups-eventgroups yui3-eventgroups-content" id="mod-eventgroups-1015"><div class="update-container" id="yui_3_5_0_1_1577049074725_23118"><div class="mod yui3-widget yui3-module yui3-marketgroups" id="mod-marketgroups-1055-container" data-mod-id="1055" data-mod-type="marketgroups"><div class="mod-marketgroups mod-marketgroups-marketgroups yui3-marketgroups-content" id="mod-marketgroups-1055"><div class="updated-minimarkets" id="yui_3_5_0_1_1577049074725_23117"><div class="list-minimarkets ui-event ui-29619519" id="yui_3_5_0_1_1577049074725_23116" data-eventid="29619519" data-rule="NO_RULE"><div class="mod yui3-widget yui3-module yui3-minimarketview yui3-minimarketview-focused" id="mod-minimarketview-1056-container" data-mod-id="1056" data-mod-type="minimarketview"><div class="mod-minimarketview mod-minimarketview-minimarketview yui3-minimarketview-content" id="mod-minimarketview-1056"><div class="minimarketview-content minimarket-MATCH_ODDS-217161878 ui-market ui-924_217161878 ui-market-open" id="yui_3_5_0_1_1577049074725_27044" data-marketid="924.217161878"><ul class="runner-list3 minimarketview-1056" id="yui_3_5_0_1_1577049074725_27043"><li class="runner-item " id="yui_3_5_0_1_1577049074725_27042"><a class="com-bet-button ui-bet-button ui-market-action bet-button-b6aa2daf38ef7fdfa20369ad99daf6d705818911 ui-runner ui-924_217161878-48350 ui-runner-active ui-betslip-action" id="yui_3_5_0_1_1577049074725_27041" href="/sport/football/english-championship/blackburn-v-wigan/29619519?gaZone=Main&amp;gaTab=UG9wdWxhcg==&amp;bssId=48350&amp;bsmSt=1577130300000&amp;bsmId=924.217161878&amp;modules=betslip&amp;gaMod=minimarketview&amp;bseId=29619519&amp;isSP=false&amp;bsContext=REAL&amp;action=addSelection&amp;bsUUID=b6aa2daf38ef7fdfa20369ad99daf6d705818911&amp;gaPageView=event&amp;xsrftoken=821c3ad1-24ff-11ea-a6bc-fa163e7531ec&amp;bsGroup=29619519" rel="nofollow" data-betslip-action="add-bet" data-loader=".multiples-bet-list" data-context="real" data-eventid="29619519" data-marketid="924.217161878" data-uuid="b6aa2daf38ef7fdfa20369ad99daf6d705818911" data-selectionid="48350" data-is-fctc="0"><span class="ui-runner-price ui-924_217161878-48350 ui-display-decimal-price" id="yui_3_5_0_1_1577049074725_27045">
1.8
</span></a></li></ul></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></body>
</html>

如果我在几分钟后重新加载页面，那么如果我再次检查同一个 DOM 项目，id 会发生变化，例如，它从 id="yui_3_5_0_1_1577049074725_27043" 变为 id="yui_3_5_0_1_1577049074725_45678"，而其他的仍然相同。我想获取元素 ID 并制作 Web 表单，然后使用 HTTP Post 提交表单，但元素 ID 不断变化，我无法提交表单。在提交表格之前，我必须知道身份证件。首先，我尝试逐步浏览页面的JavaScript，但这似乎并不容易，因为某些JavaScript显然要添加一些无关紧要的东西，例如Google Analytic和Tag Manager，如果在Google Chrome开发工具中逐步调试，则需要数周或数月才能到达生成动态ID的行，但是表格只会在那里停留几天，然后就消失了。您没有足够的时间来调试它。但是我可以看到同一个 DOM 项目的网络链接是这样的： https://www.betfair.com/sport/football/english-championship/blackburn-v-wigan/29619519?gaZone=Main&gaTab=UG9wdWxhcg==&bssId=1&bsmSt=1577130300&bsmId=924.217317379&modules=betslip&gaMod=correct-score-markets&bseId=29619519&isSP=false&bsContext=REAL&action=addSelection&bsUUID=21f4d0d51ce1f65f2667b8141dbc46815f1ba965&gaPageView=event&xsrftoken=821c3ad1-24ff-11ea-a6bc-fa163e7531ec&bsGroup=29619519对于此网络链接，除了每次访问 UUID 时都不同之外，所有信息都保持不变。因此，我认为不同的yui ID#与这个UUID有一些关系，但是由于我不知道如何获取UUID，那么我无法弄清楚如何获取DOM ID#。调试 JavaScript 似乎不是一个正确的解决方案。对于这个页面，有 100+ 个这样的 DOM 项，但我不需要全部，我只需要其中的 5 到 10 个，只要在网页消失之前找到必要的信息，我会使用 HTTP Post 数据到 Web 服务器。
请告诉我应该去哪个方向弄清楚它。或者至少找出哪个 JavaScript 函数正在创建 DOM ID#，如果有的话。我正在考虑生成一个 UUID，然后通过替换网络链接的 UUID 部分来访问网络链接，但不确定它是否有效。我如何找到id="yui_3_5_0_1_1577049074725_27043"我想将数据发布到服务器的时间，实际上，唯一缺少的链接是id的最后一部分，即27043。谢谢

也许可能的解决方案是：如果只有 id 在变化并且 id 中有模式，那么可能的解决方案是获取标签并迭代它们，并在找到具有特定 id 模式的标签时中断循环。示例如下：

var elements = document.getElementsByTagName('div');
var wanted_element;
for (element in elements)
{
var id = elements[element].getAttribute('id');
if (id.includes("yui_3_5_0_1_1577049074725_"))
{console.log(id);
wanted_element = elements[element];
break;}
}

但是您的情况可能需要进行一些调整(检查更多属性等(。如果你使用的是python和Selenium，这可能看起来像这样：

from selenium import webdriver
driver = webdriver.Chrome()
driver.get('YourUrl')
divs = driver.find_elements_by_tag_name('div')
wanted_div = None
for div in divs:
ID = div.get_attribute('id')
if 'yui_3_5_0_1_1577049074725' in ID:
wanted_div = div
break

对于 id 属性中的模式检查，您还可以使用正则表达式...

相关内容

最新更新

热门标签：