web网页的js定位操作语法_f12控制台输入js 获取元素定位-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_45668674/article/details/123027535

本文介绍了如何在网页中使用JavaScript进行元素定位，包括通过id、name、标签名、class和CSS选择器等方式，以及如何进行组合定位和触发元素事件。例如，利用document.getElementById、document.getElementsByName、document.querySelectorAll等方法进行元素查找，并展示了如何使用querySelector和querySelectorAll获取特定属性的元素。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

可在当前网页界面按F12切换到控制台界面，然后切换到console页签,然后就可在控制台输入对应语法对页面的不同按钮等进行定位操作

定位方法为：
除了id定位的是单个的element元素对象，其他都是elements对象类似于python中的list
1.id定位
document.getElementById("id")
2.name定位返回list
document.getElementByName("name")
3.标签名定位返回list
document.getElementByTagName("tag")
4.class定位返回list
document.getElementByClassName("class")
5.css选取器定位返回list
document.querySelectorAll("css selector")
6.标签类型获取如a标签，定位返回list(和第三条重复)
document.getElementByTagName("a")




组合定位,一级一级往下锁定，每一级返回的都是类似数组list的类型（.length可获取对应数组的长度）
document.getElementByClassName("class_name")[0].getElementByTagName("a").length


获取html的web界面中第一个<p>元素:
document.querySelector("p")
获取class="example"的第一个元素
document.querySelector(".example")
获取class="example"的第一个<p>元素
document.querySelector("p.example")
获取网页中有"target"属性的的第一个<a>元素
document.querySelector("a[target]")
获取网页中有"target"属性且值为"111"的img标签,并触发点击事件
document.querySelector("img[target='111']").click()
或者document.querySelector('img[target="111"]').click()

定位方法为：
除了id定位的是单个的element元素对象，其他都是elements对象类似于python中的list
1.id定位
document.getElementById(“id”)
2.name定位返回list
document.getElementByName(“name”)
3.标签名定位返回list
document.getElementByTagName(“tag”)
4.class定位返回list
document.getElementByClassName(“class”)
5.css选取器定位返回list
document.querySelectorAll(“css selector”)
6.标签类型获取如a标签，定位返回list(和第三条重复)
document.getElementByTagName(“a”)

组合定位,一级一级往下锁定，每一级返回的都是类似数组list的类型（.length可获取对应数组的长度）
document.getElementByClassName(“class_name”)[0].getElementByTagName(“a”).length

获取html的web界面中第一个

元素:
document.querySelector(“p”)
获取class=“example"的第一个元素
document.querySelector(”.example")
获取class="example"的第一个

元素
document.querySelector(“p.example”)
获取网页中有"target"属性的的第一个元素
document.querySelector(“a[target]”)
获取网页中有"target"属性且值为"111"的img标签,并触发点击事件
document.querySelector(“img[target=‘111’]”).click()
或者document.querySelector(‘img[target=“111”]’).click()