使用Selectors API简化选取操作
一、以前用来查找元素的JavaScript方法
函数
描述
示例
getElementById()
根据指定的id属性值查找并返回元素
getElementById("foo");
getElementsByName()
返回所有name属性为指定值的元素
getElementsByName("foo");
getElementsByTagName()
返回所有标签名称与指定值相匹配的元素
getElementsByTagName("input");
二、新QuerySelector方法
函数
描述
示例
结果
querySelector()
根据指定的选择规则,
返回在页面中找到的第一个匹配元素
querySelector("input.error");
返回第一个CSS类名为"error"的
文本输入框
querySelectorAll()
根据指定规则返回页面中所有相匹配的元素
querySelectorAll
("#results td");
返回id值为results的元素下所有
的单元格
三、示例
使用Selector API获取鼠标当前在哪个单元格上
Query Selector Demotd
{
border-style:solid;
border-width:1px;
font-Size:300%;
}
td:hover
{
background-color:cyan;
}
#hoverResult
{
color:green;
font-Size:200%;
}
A1 | A2 | A3 |
B1 | B2 | B3 |
C1 | C2 | C3 |
Focus the button,hover over the table cells,and hit Enter to
identify them using querySelector('td:hover').
Find 'td:hover' target
document.getElementById("findHover").οnclick=function()
{
//找出页面中的单元格
var hovered=document.querySelector("td:hover");
if(hovered)
document.getElementById("hoverResult").innerHTML=hovered.innerHTML;
}
效果如下