ht

常见的JS元素定位技巧(附小demo)

2019-10-15

有一段时间了解了一下js和jquery定位元素的方法(搭配selenium做自动化,简直是神器),今天在这里做下总结。并举例。

JS定位常用方法。

document.getElementById("id") #通过标签ID定位。
document.getElementsByname("name")#通过name定位,Elements返回list列表。定位到单个取下标。
document.getElementsByTagName("TagName")#通过tag标签名称定位。返回列表。定位单个取下标。
document.getElementsByClassName("className")#通过class属性的名称定位。返回列表,定位单个取下标。
document.getElementsByTagNameNS("ns", "tagName")#通过tagName定位元素属性,ns不清楚是什么匹配全部 ns写*
附上ns解释:字符串,规定要搜索的命名空间名称。值 "*" 匹配所有的标签。

  1. 首先打开http://www.baidu.com, 打开F12查看输入框H5

image.png

查看到 id="kw", name="wd",class="s_ipt",标签为 input

  1. 再打开Console可以调试JS。

image.png

实例(以百度为例):

  • 第一个:document.getElementById("id")
document.getElementById("kw") .value=("我是以ID找到的,并写了这句话。")

image.png

  • 继续第二个:document.getElementsByname("name")
document.getElementsByname("wd")[0].value=("我是以name找到的,并写了这句话。")
#多注意Elements返回列表。 多多注意。

image.png

  • 第三个:document.getElementsByTagName("TagName")
document.getElementsByTagName("input")[7].value=("我是以tagname找到的,并写了这句话。")

image.png
image.png

  • 第四个:document.getElementsByClassName("className")
document.getElementsByClassName("s_ipt")[0].value=("我是以calssName找到的,并写了这句话")

image.png

  • 第五个:document.getElementsByTagNameNS("ns", "tagName")
document.getElementsByTagNameNS("*",'input')[7].value=("我是以tagnameNS定位的,并写了这句话")
#此方法目前只会这样用,和tagname方法差不多。将来发现其它用法后更新。

image.png

好了到此为止

后边会再讲解jquery定位,以及其它相关操作方法以及selenium中如何使用。


转载请注明出处,如有错误,请帮忙指正,谢谢!
标题:常见的JS元素定位技巧(附小demo)
作者:走在人生的路上z
地址:http://www.17mark.com/articles/2019/10/15/1571135916947.html

评论
  • 第5个方法比第3个方法只多了个“NS”,这两个有什么区分呢?分别用在什么不同的情况下呢?

    回复»
发表评论
       
       
© 2020 17mark 京ICP备19042824号