您的位置：首页 > Web前端 > CSS

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

2016-01-10 17:28 686 查看

例子：

<!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选择器方法)

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航