获取document对象除了getElement方法,居然还可以使用css选择器方法!!!

例子:

<!DOCTYPE html>

<html>
<head>
<meta charset="utf-8">
<title>example</title>
<style type="text/css">
pre{
border: thin solid black;
}
</style>
</head>
<body>
<pre id="results"></pre>
<img id="caomei"src="img/4d0df8064383e78d74e07014e7ccd0ee.jpg" name="image" alt="caomei">
<p id="tblock">
There are lots of different kinds of fruit.There are over 500 varieties of <span id="banana">banana</span> alone.By the time we add the countless types of apples,oranges,and other well-known fruit,we are faced with thousands of choices.
</p>
<img id="apple" src="img/63fddd61e1afe42e38c6ce76910be815.jpg" name="image" alt="apple">
<p>
One of the most interesting aspects of fruit is the variety available in each country.I live near London,in an area which is known for its apples.
</p>
<img id="san" src="img/161026fa577b8f3aa88187bd67b546fd.jpg" alt="san" />
<script>
var resultsElement=document.getElementById("results");
var elems=document.getElementById("tblock").getElementsByTagName("span");
resultsElement.innerHTML+="there are "+elems.length+" span elements(getelement方法)\n";
var elems2=document.getElementById("tblock").querySelectorAll("span");
resultsElement.innerHTML+="there are "+elems2.length+" span elements(getelement+css方法)\n";
var elems3=document.querySelectorAll("#tblock>span");
resultsElement.innerHTML+="there are "+elems3.length+" span elements(css选择器方法)\n";
</script>

</body>

结果:

there are 1 span elements(getelement方法) 
there are 1 span elements(getelement+css方法) 
there are 1 span elements(css选择器方法) 

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值