2.2 JSON和XPATH介绍
2.2.1 JSON介绍
- JSON(JavaScript Object Notation,JS对象表示法),一种轻量级的数据交换格式,采用完全独立于编程语言的文本格式来存储和表示数据。
- 简洁和清晰的层次结构使得JSON 成为 理想的数据交换语言。易于人阅读和编写,同时也易于机器 解析和生成,并有效地提升网络传输效率。
- 数据使用键/值(key-value)对表示,示例中"books"–对象(数组结构)
- 使用大括号保存对象,每个名称后跟着一个‘:’(冒号)
- 多个键/值对之间使用,(逗号)隔开,最后一个键/值可不加逗号
1. 一个JSON示例
{
"id":1,
"language":"Python",
"edition":"third",
"price":35,5
"books":[
{
"id":1,
"language":"Python",
"edition":"third",
"price":35,5
}
{
"id":2,
"language":"C++",
"edition":"second",
"price":29.80
}
]
}
2. JSON与HTML简单示例
<html>
<body>
<h2>JSON Object Creation in JavaScript</h2>
<p>
ID: <span id="j_id"></span><br>
Language: <span id="j_language"></span><br>
Edition: <span id="j_edition"></span><br>
Price: <span id="j_price"></span><br>
</p>
<script>
var JSONObject= {
"id":1,
"language": "Python",
"edition": "third",
"price": 35.50};
document.getElementById("j_id").innerHTML = JSONObject.id
document.getElementById("j_language").innerHTML = JSONObject.language
document.getElementById("j_edition").innerHTML=JSONObject.edition
document.getElementById("j_price").innerHTML=JSONObject.price
</script>
</body>
</html>
- 结果图
3. JSON与XML的比较
2.2.2 XPanth介绍
- XPath是W3C(World Wide Web Consortium)的一种标准
- 是一门在XML文档(包括HTML文档)中查找信息的语言, 可以让我们以路径的形式访问html 网页中的各个元素。
- HTML文档中包含的信息示例
- 使用Chrome浏览器,打开网页后,右键->检查->copy xpath,在网页中精准找到要定位的信息。
1.XPath表达式介绍-1
表达式 | 描述 |
---|---|
nodename | 选取当前节点的所有子节点中, 节点名称为nodename的节点 |
/ | 从根节点选取;/div 从最外侧寻找 |
// | 选择所有节点;//div 整个文档中选择所有的div节点元素 |
- | 选择当前节点 |
– | 选取当前节点的父节点 |
@ | 选取属性 ; xpath(“//@class”) 选取整个文档中所有包含class属性的标签 |
相关表达式运用示例1(test1.html)
图中相同颜色对应该表达式选取的标签。
2. XPath表达式介绍-2
在标签后面还可以加上谓词,用于更为精准的选择。 例如div[1], li[last()], li[price>=80]等
谓词 | 描述 |
---|---|
[1] | 选取第一个子节点 |
[last()] | 选取最后一个子节点 |
[position()<6] | 选取前5个子节点 |
[@class] | 选取有属性名为class的子节点 |
[@class =‘0’] | 选取有属性名位class,且值为0的子节点 |
[price>80] | 选取元素为price,而且大于80的子节点 |
相关表达式运用示例2(test1.html)
3. XPath表达式介绍-3
通配符 | 描述 |
---|---|
//* | 选取文档中的所有节点 |
/* | 选取当前节点下的所有子节点 |
[@*] | 选取带有属性的所有节点 |