您的位置：首页 > 产品设计 > UI/UE

Selectors API

2016-12-06 09:06 141 查看
初学，仅将自己测试代码发表，不要介意

。

在HTML5中新引入的Selectors API 是要用更精确的方式来指定想要获取的元素，而不必使用标准的DOM的方式循环遍历(lll￢ω￢)

QuerySelector() 函数和 QuerySelectorAII()函数

根据书上的专业的术语，意思大致是说在两个函数的括号内部可以添加一个或多个条件，这些条件可以是元素值、可以class类、可以是id值、可以是name属性或css中属性。

QuerySelector() 这个函数返回的是所有找到条件的第一个值（匹配元素）。

//寻找name名字为two的元素，并将字体颜色设置为红色
document.querySelector("p[name='two']").style.color="red";
//寻找class名字为two的元素，并将字体颜色设置为红色
document.querySelector("p.two").style.color="red";
//寻找鼠标移入的p元素，并将字体颜色设置为红色
document.querySelector("p:hover").style.color="red";



鼠标移入表格时下面div中显示表格中的内容：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
#getelement{
height:100px;
font-size:36px;
background-color:#0CF;
text-align:center;
}
td:hover{
background:#09F;
}
</style>
</head>

<body>
<table width="200" border="2" cellspacing="0" cellpadding="0" onMouseOver="Onmous()">
  <tr>
    <td>一</td>
    <td>二</td>
    <td>三</td>
    <td>四</td>
    <td>五</td>
  </tr>
  <tr>
    <td>上</td>
    <td>山</td>
    <td>打</td>
    <td>老</td>
    <td>虎</td>
  </tr>
</table>
<div id="getelement" ></div>

<script>
function Onmous (){
//申请一个变量存储获取到鼠标移入的td元素的内容。
var omous = document.querySelector("td:hover");
//用变量omous的值替换掉div元素内容。
document.getElementById("getelement").innerHTML=omous.innerHTML;
}
</script>
</body>
</html>
QuerySelectorAII()这个函数返回的是找到条件的所有值（所有匹配的元素）。

将表格中的文字在div中显示出来:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
div#one{
width:100px;
height:100px;
background-color:#F0F;
border:2px solid #3FF;
border-radius:10px;
}
</style>
</head>

<body>
<table width="200" border="2" cellspacing="0" cellpadding="0">
<tr>
<td>获</td>
<td>取</td>
<td>所</td>
<td>有</td>
<td>表</td>
</tr>
<tr>
<td>格</td>
<td>的</td>
<td>值</td>
<td>在</td>
<td>下</td>
</tr>
<tr>
<td>面</td>
<td>D</td>
<td>I</td>
<td>V</td>
<td>中</td>
</tr>
<tr>
<td>显</td>
<td>视</td>
<td>出</td>
<td>来</td>
<td>。</td>
</tr>
</table>

<div id="one">
</div>
<button type="button" id="buton" onClick="oclick()">确定</button>
<script>
function oclick(){
var arry = document.querySelectorAll("td");
var Div = document.querySelector("div#one");
for(var i=0; i<arry.length; i++){
Div.innerHTML += arry[i].innerHTML;
}
}
</script>
</body>
</html>

                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                api
                                                QuerySelector
                                                QuerSelectorAII
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航