QDomDocument 可以 类似于js那样 直接获取 标签下的html内容么
比如：
<html><body id='body'><div><font>Hello world!font>div><p>This is a paragraph.p>body>html>
获取 div 标签得到 Hello world! 类似于innerHTML。
参考GPT和自己的思路：在 QDomDocument 中，不像 JavaScript 中的 DOM API 一样有 innerHTML 和 outerHTML 等属性，可以直接获取标签下的 HTML 内容。
但是，可以通过 QDomElement 的 attributes() 方法获取标签的属性列表，通过 elementsByTagName() 方法获取标签下的子节点，然后遍历这些子节点，获取到文本节点的内容，从而实现类似 innerHTML 的功能。
对于你的具体问题，可以通过以下代码实现获取 div 标签下的文本内容：
QDomDocument doc;
doc.setContent("<html><body id='body'><div><font>Hello world!</font></div><p>This is a paragraph.</p></body></html>");
QDomElement body = doc.documentElement().firstChildElement("body");
QDomElement div = body.firstChildElement("div");
QDomNodeList nodeList = div.elementsByTagName("*");
for (int i = 0; i < nodeList.size(); i++) {
QDomNode node = nodeList.at(i);
if (node.isText()) {
QString text = node.toText().data();
// 输出文本节点的内容
qDebug() << text;
}
}
运行结果为：
"Hello world!"
没有innerHTML，但是如果是outerHTML的话可以用QDomNode::save()通过一个QTextStream输出到QString里(QDomDocument和QDomElement都继承自QDomNode)
所以最简单的办法是遍历它的子element，用save()保存到QString，然后拼接起来
另外其实QDom*的类是处理纯xml的，跟html不完全兼容，最合适的其实是从Qt5.6开始被淘汰的QWebFrame + QWebElement，QWebElement有toInnerXml()的方法基本就是innerHTML
1.给链接a加个#的方式来实现跳转
html页面：
<div id="container">
<a href="#div1">div1</a>
<a href="#div2">div2</a>
<a href="#div3">div3</a>
</div>
<div id="div1">div1</div>
<div id="div2">div2</div>
<div id="div3">div3</div>
css样式：
div {
height: 800px;
width: 400px;
border: 2px solid black;
}
#container{
position: fixed;
margin:50px 500px;
}
该锚点法，不需要任何的js代码，即可实现跳转的方法。缺点：点击链接url发生变化，刷新的话会有问题。此方法貌似只能在.html后缀的页面才能起作用，对于.cshtml页面不起作用。
2.用animate属性，当点击锚点后，页面滚动到相应的DIV。
接着上面的代码，具体添加如下代码：
html页面：
<div id="container">
<p id="p1">div1</p>
<p id="p2">div2</p>
<p id="p3">div3</p>
</div>
<div id="div1">div1</div>
<div id="div2">div2</div>
<div id="div3">div3</div>
css样式页面同上，看下js代码如下：
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
$(document).ready(function() {
$("#p1").click(function() {
$("html, body").animate({
scrollTop: $("#div1").offset().top }, {duration: 500,easing: "swing"});
return false;
});
$("#p2").click(function() {
$("html, body").animate({
scrollTop: $("#div2").offset().top }, {duration: 500,easing: "swing"});
return false;
});
$("#p3").click(function() {
$("html, body").animate({
scrollTop: $("#div3").offset().top }, {duration: 500,easing: "swing"});
return false;
});
});
3.简单的window.scrollTo方法使用
即滚动到坐标为(100,500)的地方。比较单一，且没有缓慢的效果
function scrollWindow(){
window.scrollTo(100,500);
}
4.用js的srollIntoView方法进行使用。这里贴下代码：
html页面：
<ul>
<li><a href="javascript:;" data-tab="eat">吃饭</a></li>
<li><a href="javascript:;" data-tab="sleep">睡觉</a></li>
<li><a href="javascript:;" data-tab="walk">逛街</a></li>
</ul>
<div >
<div data-tab="eat" style="background:cyan; height:500px;">
吃饭
</div>
<div data-tab="sleep" style="background:lightgreen;height:2000px;">
睡觉
</div>
<div data-tab="walk" style="background:LightSalmon;height:1000px;">
逛街
</div>
</div>
js代码如下：
[].slice.call(document.querySelectorAll('a')).forEach(function(el){
el.addEventListener('click', function(){
var target = document.querySelector('div[data-tab=' + this.getAttribute('data-tab')+ ']' )
target.scrollIntoView(true);
})
})
注意一个问题，object.scrollIntoView(bool),前面是对象，通常原生的获取对象都是下面的写法：
document.getElementById('#xxx' ).scrollIntoView(true);
那么如果用jquery来调用该方法的话，需要写成下面这样的：
$('#xxx')[0].scrollIntoView(true);