ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

web网页的js定位操作语法

2022-02-20 10:33:52  阅读:115  来源: 互联网

标签:web 网页 target 定位 list js querySelector document class


可在当前网页界面按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()

标签:web,网页,target,定位,list,js,querySelector,document,class
来源: https://blog.csdn.net/weixin_45668674/article/details/123027535

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有