这工作得很好,但为了将来参考,我想知道是否有更好的方法来做到这一点。
document.getElementsByTagName('h1')[0].style.display = 'none';
document.getElementsByTagName("p")[0].style.display = 'none';
document.getElementsByTagName("p")[1].style.display = 'none';
document.getElementsByTagName("ul")[0].style.display = 'none';
document.getElementsByTagName("hr")[0].style.display = 'none';
如果有帮助,我愿意使用jQuery。
虽然没有特别要求jQuery,但它将是满足OP示例代码的最短实现,完全符合所编写的代码:
$('h1:eq(0), ul:eq(0), hr:eq(0), p:lt(2)').hide();
将节点保留在数组中,然后您可以编写一些函数来一次隐藏或显示整个数组(或 NodeList),例如
function display_none(nodelist) {
var i = nodelist.length;
while (i-- > 0)
nodelist[i].style.display = 'none';
}
function display_default(nodelist) {
var i = nodelist.length;
while (i-- > 0)
nodelist[i].style.display = '';
}
所以你有
var elms = [
document.getElementsByTagName('h1')[0],
document.getElementsByTagName("p")[0],
document.getElementsByTagName("p")[1],
document.getElementsByTagName("ul")[0],
document.getElementsByTagName("hr")[0]
];
现在可以简单地做
display_none(elms); // hide them all
display_default(elms); // return to default
这是一个纯 Javascript 选项,它为 :lt(n)
伪选择器实现了类似 jQuery 的扩展,因此您可以指定所需的每个标签的数量。
正如问题所问,这适用于前两个"p"
标签,然后是第一个"h1"
、"ul"
和"hr"
标签:
function hideItems(selector) {
var r = /:lt((d+))/;
selector.split(',').forEach(function(item) {
var len, elems, i, m = item.match(r);
if (m) {
item = item.replace(r, "");
elems = document.querySelectorAll(item);
len = Math.min(+m[1], elems.length);
} else {
elems = document.querySelectorAll(item);
len = elems.length;
}
for (i = 0; i < len; i++) {
elems[i].style.display = 'none';
}
});
}
hideItems('p:lt(2),h1:lt(1),ul:lt(1),hr:lt(1)');
工作演示:http://jsfiddle.net/jfriend00/m9vspymz/
使用纯 JavaScript
//gets all DOM elements with a tag of p or li
var elems = document.querySelectorAll('p,li');
//loops over all elements
for(var i = 0;i < elems.length; i++)
{
//hides each element in the array
elems[i].style.display = 'none';
}
专门为您编写的代码
var elems = document.querySelectorAll('p,h1,ul,hr');
for(var i = 0;i < elems.length; i++)
{
elems[i].style.display = 'none';
}
这是代码(JavaScript):
var n = [ // 'tagname',which in order
'h1',0,
'p',0,
'p',1,
'ul',0,
'hr',0
];
for(var i = 0;i < elems.length)
{
document.getElementsByTagName(n[i*2])[(n[i*2]+1)].style.display = 'none';
i++;
i++;
}