、、、
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div>
<div id="aa">
<div id="bb">
<div id="cc">
<div id="ll"></div>
</div>
</div>
</div>
<div id="dd">
<div id="ee">
<div id="ff">
</div>
</body>
<script>
var div = documentquerySelector("#aa")querySelectorAll('div div');
consolelog(div)
</script>
</html>
、、、
这是因为ID是具有全局唯一性的，也就是说同一个页面是不允许出现相同ID的元素的（当然你在html中可以设定相同的id，但js只能定位到第一个），所以要想通过id来获取页面元素，只需要全局定位（即documentgetElementById）即可，不需要在子元素中再来进一步定位。事实上，正是因为上述原因，getElementById是document对象的特有方法，其他对象是没有这个方法的，这就是为什么listgetElementById会提示说不是函数的原因！
一般常用的原生选择器有：
id选择器:documentgetElementById("test");
name选择器:documentgetElementsByName("test");
节点选择器:documentgetElementsByTagName("p");
class选择器:documentgetElementsByClassName("test");
这次要详细说的是 documentquerySelector() ， 开挂般的存在， jQuery的完美替代版本。
接收一个字符串参数， 返回返文档中与指定选择器或选择器组匹配的第一个 HTMLElement 对象。 如果找不到匹配项，则返回 null 。
3返回带有foo或者bar样式类的首个元素
4返回id为‘my-element’的 p 元素
6其他选择方式可自行排列组合
documentquerySelector() 的用法虽然与jQuery里的$()选择器类似,但有些细微区别:
getElementsByClassName()是HTML5新增的DOMAPI。IE8以下不支持。对于现代浏览器开发，还可以使用querySelector()和querySelectorAll()。他们的功能更加强大。=======================附注=========================解释：getElementsByClassName()是HTML5的DOMAPI。举个栗子：documentgetElementsByClassName("wrapper");//取得DOM中所有class="wrapper"的元素解释：querySelector()和querySelectorAll()是新标准的SelectorsAPI(选择符API)。IE8+、FF35+、Safari31+、Chrome、Opera10+支持querySelector()接受一个css选择器作为参数,然后返回DOM中匹配的第一个元素querySelectorAll()接受一个css选择器作为参数,然后返回DOM中匹配的元素的集合数组举个栗子：documentquerySelector("#wrapper")//取得DOM中第一个id=“wrapper”的元素举个栗子：documentquerySelector("wrapper")//取得DOM中第一个class=“wrapper”的元素举个栗子：documentquerySelector("p")//取得DOM中第一个元素举个栗子：documentquerySelectorAll("p")//取得DOM中所有的元素类比于querySelector()PS原生的方法，便是getElementById()和getElementsByTagName()。这两个不会有兼容问题以上内容请参考《Javascript高级程序设计(第三版)》
以上就是关于关于querySelector 选中元素全部的内容，包括:关于querySelector 选中元素、js通过id获取元素的子级元素的奇怪现象、强大的js原生选择器 document.querySelector()等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）