html概述笔记,Html5笔记(3)概述

使用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 Demo

td

{

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;

}

效果如下