本人项目的需求是:页面上同一个div 下有
若干
<h$>标签。我想把该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>
希望能解答一二,配上简单的代码实现,非常谢谢
var $container = document.getElementById('container');
$container.innerHTML = $container.innerHTML
.replace(/\<(\w+)?\>([^\<\>]*)?/g,
function (_, $1, $2) {
return '<li class="' + $1 + '">' + $2 + '</li>'
});
首先把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;
`
<ul>
${Array.from(
document
.querySelector('#container')
.querySelectorAll('h1,h2,h3,h4,h5,h6'))
.map(h => `
<li class="${h.tagName.toLowerCase()}">
${h.textContent}
</li>`
)
.join('')
}
</ul>
`