聊一聊js中元素定位的方法

在做selenium web自動化的時候，有時通過selenium定位不到，或無法操作元素，這個時候就需要通過js來

定位/操作元素，然後通過selenium自帶的execute_script()方法去執行js語句。下面介紹幾種js的定位方法。

一.ID

id的值都是唯一的，所以當存在id欄位時可優先使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script>

    function a(){
        alert(document.getElementById("button_id").style.display='block')  //id定位
    }
</script>
<body>
<button style="display: none" id="button_id">隱藏</button>
<button onclick="a()">點選</button>
</body>
</html>

二.NAME

name值定位元素的話返回的為list，用下標取值即可。如下通過name定位並執行點選事件。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script>

    function a(){
        document.getElementsByName("button_name")[0].click()  //name定位
    }
    function b(){
        alert("word")
    }
</script>
<body>
<span name="button_name" onclick="b()">隱藏</span>
<button onclick="a()">點選</button>
</body>
</html>

三.TAG_NAME

tag_name對應的便是標籤名稱，返回的也是list集合。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script>

    function a(){

        document.getElementsByTagName("input")[0].value="請輸入內容"  //輸入內容
    }

</script>
<body>
<input>
<button onclick="a()">點選</button>
</body>
</html>

四.CLASS_NAME

class_name對應的值是class，返回list集合

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script>

    function a(){
        alert(document.getElementsByClassName("h2_class")[0].style.backgroundImage)  //classname定位
    }
</script>
<body>
<h2 class="h2_class" style="display: block; background-image: url('https://static.geetest.com/captcha_v3/batch/v3/25173/2023-01-3')"></h2>
<button onclick="a()">點選</button>
</body>
</html>

五.CSS

css定位有兩個方法，下面一一演示看下。

1.querySelectorAll()：返回所有匹配的結果，list集合。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script>
    function a(){
        document.querySelectorAll("input[name='2']")[1].value="123"  //返回全部
    }
</script>
<body>
<div class="liming">
    <div>
        <input name="2">
    </div>
    <div>
        <input name="2">
    </div>
</div>
<button onclick="a()">點選</button>
</body>
</html>

2.querySelector()：不管匹配結果有多少個，只返回第一個。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script>
    function a(){
        alert(document.querySelector("div[class='liming']>div:nth-child(2)>input").getAttribute("name"))
    }
</script>
<body>
<div class="liming">
    <div>
        <input name="1">
    </div>
    <div>
        <input name="2">
    </div>
</div>
<button onclick="a()">點選</button>
</body>
</html>

文章來源：https://www.cnblogs.com/lihongtaoya/ ，請勿轉載