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

最新推荐文章于 2025-03-29 19:02:19 发布

原创最新推荐文章于 2025-03-29 19:02:19 发布 · 2.1k 阅读

0 ·

CC 4.0 BY-SA版权

自学感悟专栏收录该内容

10 篇文章

订阅专栏

本文探讨了不同国家丰富的水果种类，特别强调了苹果、香蕉等常见水果在英国的多样性。通过JavaScript代码展示了如何获取页面元素，进一步展示了信息技术在内容展示中的应用。

例子：

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