分别使用css与xpath语法解析获得yi下内容 (1)获得title标签的内容 (2)获取所有的li标签的内容 (3)获取id="go"的后代节点中的第一个li标签的内容 (4)获取id="go"的后代节点中的最后一个li标签的内容 (5)获取id="go"的后代节点中的第五个li标签的内容 (6)获取head标签的所有后代节点 (7)获取head标签的所有兄弟节点 (8)获取存在id属性的所有标签 (9)获取存在id='testid'的所有标签 (10)获取属性值中存在‘t’的所有标签

时间: 2023-05-31 19:05:54 浏览: 217

以下是使用CSS和XPath语法分别解析获取yi下内容的答案： HTML代码如下： ``` <html> <head> <title>这是标题</title> </head> <body> <ul id="go"> <li>第一个li标签内容</li> <li>第二个li标签内容</li> <li>第三个li标签内容</li> <li>第四个li标签内容</li> <li>第五个li标签内容</li> </ul> <div id="test"> <ul> <li>第一个li标签内容</li> <li>第二个li标签内容</li> <li>第三个li标签内容</li> <li>第四个li标签内容</li> <li>第五个li标签内容</li> </ul> <p>这是一个段落</p> </div> <span id="testid">这是一个span标签</span> <a href="http://www.test.com">这是一个链接</a> </body> </html> ``` 1. 使用CSS语法获得title标签的内容 ``` document.querySelector('title').textContent; ``` 2. 使用CSS语法获取所有的li标签的内容 ``` let liList = document.querySelectorAll('li'); let liContentList = []; for (let i = 0; i < liList.length; i++) { liContentList.push(liList[i].textContent); } console.log(liContentList); ``` 3. 使用CSS语法获取id="go"的后代节点中的第一个li标签的内容 ``` document.querySelector('#go li:first-child').textContent; ``` 4. 使用CSS语法获取id="go"的后代节点中的最后一个li标签的内容 ``` document.querySelector('#go li:last-child').textContent; ``` 5. 使用CSS语法获取id="go"的后代节点中的第五个li标签的内容 ``` document.querySelector('#go li:nth-child(5)').textContent; ``` 6. 使用CSS语法获取head标签的所有后代节点 ``` let headNodes = document.querySelectorAll('head *'); console.log(headNodes); ``` 7. 使用CSS语法获取head标签的所有兄弟节点 ``` let headSiblings = document.querySelectorAll('head ~ *'); console.log(headSiblings); ``` 8. 使用CSS语法获取存在id属性的所有标签 ``` let idElements = document.querySelectorAll('[id]'); console.log(idElements); ``` 9. 使用CSS语法获取存在id='testid'的所有标签 ``` let testidElements = document.querySelectorAll('[id="testid"]'); console.log(testidElements); ``` 10. 使用CSS语法获取属性值中存在‘t’的所有标签 ``` let tElements = document.querySelectorAll('[*="t"]'); console.log(tElements); ``` 1. 使用XPath语法获得title标签的内容 ``` document.evaluate('//title', document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue.textContent; ``` 2. 使用XPath语法获取所有的li标签的内容 ``` let liList = document.evaluate('//li', document, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null); let liContentList = []; for (let i = 0; i < liList.snapshotLength; i++) { liContentList.push(liList.snapshotItem(i).textContent); } console.log(liContentList); ``` 3. 使用XPath语法获取id="go"的后代节点中的第一个li标签的内容 ``` document.evaluate('//*[@id="go"]/li[1]', document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue.textContent; ``` 4. 使用XPath语法获取id="go"的后代节点中的最后一个li标签的内容 ``` document.evaluate('//*[@id="go"]/li[last()]', document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue.textContent; ``` 5. 使用XPath语法获取id="go"的后代节点中的第五个li标签的内容 ``` document.evaluate('//*[@id="go"]/li[5]', document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue.textContent; ``` 6. 使用XPath语法获取head标签的所有后代节点 ``` let headNodes = document.evaluate('//head//*', document, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null); console.log(headNodes); ``` 7. 使用XPath语法获取head标签的所有兄弟节点 ``` let headSiblings = document.evaluate('//head/following-sibling::*', document, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null); console.log(headSiblings); ``` 8. 使用XPath语法获取存在id属性的所有标签 ``` let idElements = document.evaluate('//*[@id]', document, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null); console.log(idElements); ``` 9. 使用XPath语法获取存在id='testid'的所有标签 ``` let testidElements = document.evaluate('//*[@id="testid"]', document, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null); console.log(testidElements); ``` 10. 使用XPath语法获取属性值中存在‘t’的所有标签 ``` let tElements = document.evaluate('//*[contains(@*, "t")]', document, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null); console.log(tElements); ```

阅读全文

相关推荐

CSDN会员

开通CSDN年卡参与万元壕礼抽奖

海量 VIP免费资源千本正版电子书商城会员专享价千门课程&专栏

全年可省5,000元立即开通