常见的JS元素定位技巧（附小demo）

  |   0 评论   |   0 浏览

有一段时间了解了一下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://17mark.com/articles/2019/10/15/1571135916947.html
此处应有打赏走在人生的路上z
走在人生的路上z