forked from xuexb/xpath
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
305 lines (286 loc) · 11.6 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>xpath路径查看 - @xuexb/xpath</title>
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0">
<style type="text/css">
.highlight {
background-color: #09f;
}
#output {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 30px;
line-height: 30px;
text-align: center;
background-color: rgba(0, 0, 0, 0.5);
color: #fff;
font-size: 14px;
}
body {
margin: 0;
padding: 0;
padding-top: 30px;
}
/*卡片样式*/
#results {
padding: 10px;
background-color: #f0f0f0;
}
em {
color: #d00;
font-weight: normal;
font-style: normal;
}
a {
color: #00C;
text-decoration: none;
-webkit-tap-highlight-color: rgba(23,23,23,.1);
}
.result {
width: auto;
margin: 10px 0;
padding: 10px 17px 15px;
border: 0 none;
font: 14px/24px Arial,Helvetica,sans-serif;
word-wrap: break-word;
word-break: break-word;
color: #555;
background-color: #fff;
}
.block {
display: block;
}
.title {
font: 19px/29px Arial,Helvetica,sans-serif;
margin: 0;
}
</style>
</head>
<body>
<div id="output">请点击页面元素</div>
<h1>xpath路径查看</h1>
<div id="results">
<div class="result">
<a href="#" class="block"><h3 class="title"><em>美女</em>_测试xpath</h3></a>
<a href="#" class="block">
<p>
我是测试的内容, 我是测试的内容我是测试的内容我是测试的内容我是测试的内容我是测试的内容我是测试的内容我是测试的内容我是测试的内容我是测试的内容
</p>
</a>
<p>
这是只是文本 <strong>加粗</strong> 啦啦啦~
</p>
</div>
<div class="result">
<a href="#" class="block"><h3 class="title"><em>美女</em>_测试xpath</h3></a>
<a href="#" class="block">
<ul>
<li>
我是1
</li>
<li>
<p>
我是2
</p>
</li>
<li>
<a href="#">
<div>
3.11111
</div>
<div>
3.22222
</div>
</a>
</li>
</ul>
</a>
</div>
</div>
<div class="demo">
<div class="demo2">
<a href="#"><img src="https://dummyimage.com/100x100" alt=""></a>
<p><img src="https://dummyimage.com/100x100" alt=""></p>
<ul>
<li>01</li>
<li>02</li>
<li>03</li>
<li>04</li>
<li>05</li>
<li>06</li>
<li>07</li>
<li>08</li>
<li>09</li>
<li>10</li>
</ul>
</div>
<div id="demo3">
<h3>id</h3>
<ol>
<li>01</li>
<li>02</li>
<li>03</li>
</ol>
</div>
<div class="demo4">
<h3>a标签</h3>
<ul>
<li><a href="#">01</a></li>
<li><a href="#">02</a></li>
<li><a href="#">03</a></li>
<li><a href="#">04</a></li>
<li><a href="#">05</a></li>
</ul>
</div>
</div>
<h3>form</h3>
<form action="#" onsubmit="return false">
<ul>
<li>
<input type="text" placeholder="test">
</li>
<li>
<input type="button" value="测试">
</li>
<li>
<button>
test
</button>
</li>
<li>
<input type="checkbox">
</li>
<li>
<select>
<option>测试</option>
</select>
</li>
</ul>
</form>
<div class="container">
<div class="left">
<div class="logina">
<a class="loginBtn" href="javascript:;">登录</a>
<p class="p1">如果你是注册银用户</p>
<p>点击登录按钮进入登录页面</p>
</div>
<div class="reg">
<p>通过注册，您将可查询该网站相关数据信息，并提供个性化，互动功能以及所选择的内部研究，您可以订阅。</p>
<p>点击按钮继续注册过程</p>
<p><a href="zhuce.html" target="_self">注册用户</a></p>
</div>
</div>
<div class="right">
<div class="loginfo">
<h2 class="color-origin">欢迎光临</h2>
<div class="about">
<h3>Capital Market Division<p>关于资金资本市场部</p></h3>
<p>teststest+H股上市公司）、中植企业集团有限公司、哈尔滨投资集团有限责任公司及沈阳安泰达商贸有限公司分别持股37.47%、32.99%、21.54%和8.01%。公司目前员工1700余人，分布于全国20余个主要城市。银监会对公司2011年监管评级（最新）为2C级。
<br>
2014年末，公司资产管理总规模7,227.93亿元，较年初增长48.05%；公司净资产98.05亿元，净资本87.13亿元；2014年实现收入55.31亿元。公司拥有数万名高端自然人客户及上千家机构客户。
<br>
公司主营业务覆盖房地产、证券、工商企业及基础设施领域，“多元化”交易模式包括股权投资、信托贷款、股权收益权、财产权管理等。经过20余年的发展，公司已成为公司治理完善、风险管控有效、业务创新积极、人员覆盖全国的大型金融企业。<a href="article.html" target="_self">[点击详情]</a></p>
</div>
<!-- 业务范围 -->
<div class="business">
<div class="b_title">业务范围<span>Services</span></div>
<div class="b_info">
<ul>
<li>
<h4>私募机构服务</h4>
<p><a href="article.html" target="_self">中融国际信托有限公司是经中国银监会批准设立的金融机构。</a></p>
</li>
<li>
<h4>私募机构服务</h4>
<p><a href="article.html" target="_self">中融国际信托有限公司是经中国银监会批准设立的金融机构。</a></p>
</li>
</ul>
</div>
</div>
<!-- 新闻中心/资讯图书馆 -->
<div class="news">
<div class="news_box">
<div class="b_title">新闻中心<span>News Center</span></div>
<dl class="news_dl">
<dt>
<a class="active" href="article.html" target="_self"><img src="images/news_img.jpg"></a>
<a href="article.html" target="_self"><img src="images/news_img2.jpg"></a>
<a href="article.html" target="_self"><img src="images/news_img3.jpg"></a>
</dt>
<dd class="first">
<p><a href="article.html" target="_self">中融信托执行总裁汪</a><span class="time">07/23/2016</span></p>
<p class="news_p">[今年以来，多家信托公司、银行下属经或家族信托业务...]</p>
</dd>
<dd>
<p><a href="article.html" target="_self">中融信托执行总裁汪</a><span class="time">07/23/2016</span></p>
</dd>
<dd>
<p><a href="article.html" target="_self">中融信托执行总裁汪</a><span class="time">07/23/2016</span></p>
</dd>
</dl>
</div>
<div class="news_box news_box2">
<div class="b_title">资讯图书馆<span>Library</span></div>
<dl>
<dd><a href="article.html" target="_self">中融信托执行总裁汪中融信托执行总裁汪</a><span>1/2/2016</span></dd>
<dd><a href="article.html" target="_self">中融信托执行总裁汪中融信托执行总裁汪</a><span>1/2/2016</span></dd>
<dd><a href="article.html" target="_self">中融信托执行总裁汪中融信托执行总裁汪</a><span>1/2/2016</span></dd>
<dd><a href="article.html" target="_self">中融信托执行总裁汪中融信托执行总裁汪</a><span>1/2/2016</span></dd>
</dl>
</div>
</div>
</div>
</div>
</div>
<div class="footer">
<div class="footnav">
<p><a href="#">使用条款</a></p>
<p><a href="#">法律法规</a></p>
<p><a href="#">隐私政策</a></p>
<p><a href="#">1</a></p>
<p><a href="#">2</a></p>
</div>
<div class="sec">@2016-3</div>
</div>
<script src="./src/xpath.js"></script>
<script>
var setHighlight = function (element) {
if (document.getElementsByClassName('highlight')[0]) {
document.getElementsByClassName('highlight')[0].classList.remove('highlight');
}
element.classList.add('highlight');
};
var setText = function (text) {
document.getElementById('output').innerHTML = text;
};
document.body.addEventListener('click', function (event) {
var target = event.target || event.srcElement;
event.stopPropagation();
event.preventDefault();
var xpath = getXpath(target);
var element = parseXpath(xpath);
console.log(xpath, element);
setHighlight(element);
setText(xpath);
});
// 卡片
[].slice.call(document.querySelectorAll('.result')).forEach(function (elem) {
elem.addEventListener('click', function (event) {
var target = event.target || event.srcElement;
event.stopPropagation();
event.preventDefault();
var xpath = getXpath(target, elem) || '/';
var element = parseXpath(xpath, elem);
console.log(xpath, element);
setHighlight(element);
setText(xpath);
});
});
</script>
</body>
</html>