本人项目的需求是:页面上同一个div 下有若干标签。我想把该div下标题标签(h标签)的内容,按照从上至下的顺序遍历出来。求高人指点一二,非常谢谢!(使用原生JS,不借助jQuery 等其他JS库)
待遍历的结构:
<div id="container">
<h1>标题1</h1>
<h2>标题2</h2>
<h4>标题4</h4>
<h1>标题1</h1>
<h3>标题3</h3>
</div>
需要遍历后为以下结构:
<ul>
<li class="h1">标题1</li>
<li class="h2">标题2</li>
<li class="h4">标题4</li>
<li class="h1">标题1</li>
<li class="h3">标题3</li>
</ul>
首先把h$元素选取出来:
var container = document.querySelector('#container');
var headings = container.querySelectorAll('h1, h2, h3, h4, h5, h6');
然后迭代、拼接:
var len = headings.length,
ul = document.createElement('ul'),
ulHtmlStr = '';
for (var i = 0; i < len; i++) {
var heading = headings[i];
ulHtmlStr += '<li class="' + heading.tagName.toLowerCase() + '">' + heading.textContent + '</li>';
}
ul.innerHTML = ulHtmlStr;
版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。