css selector只匹配最近的一层

Posted 2023-03-25

参考技术A 语法：find_element_by_css_selector("css选择器定位策略”) 或者 find_elements_by_css_selector("css选择器定位策略”)

1、css可以通过元素的 id，class，标签 这三个常规属性直接定位到

tips：若用id定位，则用 #。若用class定位，则用 .
下面是百度搜索框的html代码：

通过css selector定位有如下三种常规方式：
　 find_element_by_selector("#kw") （#表示通过id定位）
find_element_by_selector(".s_ipt") (. 表示通过class定位）
find_element_by_selector("标签名“”) 其实单纯通过标签名来定位元素，是有很大局限性的，因为一个页面中，非常大可能的
存在标签名的重复，因此无法很精确的定位

关于javascript dom扩展：Selector API

众多javascript库中最常用的一项功能，就是根据css选择符选择与某个模式匹配的DOM元素。之前由于对javascript的认识较低，对javascript对DOM操作还停留在getElementById()和getElementsByTagName上，对类的获取不得不强行封装一个函数，比如

function getElementByClassName(TagName,classname){
    var tags=document.getElementsByTagName(TagName);
    var list=[];
    for(var i in tags)
    {
        var tag=tags[i];
        if(tag.className==classname){list.push(tag);}
    }
    return list;
}

 

因此在实际开发过程中还是比较麻烦的。今天接触到DOM扩展中的Selector API感觉像是发现了新世界的大门。

selector API是由W3C发起指定的一个标准，致力于让浏览器原生支持css查询。核心方法就是：querySelector()和querySelectorAll().操作起来也比较简单。

querySelector()方法

querySelector()方法接收一个css选择符，返回与该模式匹配的第一个元素，如果没有找到匹配的元素，则返回null。请看下面的例子。

//取得body元素
var body = document.querySelector("body");

//取得id为"text"的元素
var text = document.querySelector("#text");

//取得类名为“selected”的元素
var selected = document.querySelector(".selected");

//取得类为“button”的第一个图片元素
var img = document.body.querySelector("img.button");

querySelectorAll()方法

querySelecyorAll()方法接收的参数与querySelector方法一样，都是一个css选择符，但是返回的是所有匹配的元素而不仅仅是一个元素。这个方法返回的是一个NodeList实例，也就是一个数组。看下面的例子。

//取得某div中的所有<p>元素。
var p = document.getElementById("myDiv").querySelectAll("p");

//取得类为“selected”的所有元素
var selecteds = document.querySelectorAll(".selected");

　　但是因为获取的是一个数组的形式，因此要操作数组中的每一个元素，可以使用item()方法或者方括号语法 比如：

var i, len, selected;
for(i=0;i<selecteds.len,i++){
   selected = selecteds[i];  //或者selecteds.item(i);
   selected.style.backgroundColor = "red";      
}

第一篇随笔，一步一个脚印，嗯哼！