在没有id和class情况下获取元素

一.适用情况

正常情况下，我们可以设置id与class，通过getElementById与getElementByClassName来获取到元素。

但如果使用了框架，比如easyui，elementui等。界面由动态生成，真正的元素很难定位到元素所在。

有一个快捷的方法可以获取到可视页面中的任意元素。

 

二.步骤

    1.右击目标元素进入调试

    2.确定目标是否为自己选中的那个元素

    3.右击该选中元素dom

    4.点击复制css选择器

    5.粘贴出来稍加改动

或许有点抽象，我们来看个例子

 

三.举例

以博客举例，我希望获取并改动这个元素，但是此项为根据文章而动态生成的元素，并没有任何id和class提供

1.右击查看元素，不行也可用ctrl+shift+c这个来选中

2.右击html，复制css选择器

3.将其粘贴出来发现是这样

.article > ul:nth-child(111) > li:nth-child(1)

4.试试jq调用元素，也就是套上$("")

ps:这里我把>号去掉了，当时并不理解其含义。现在想想应该不用去掉，>代表访问直接子级

$(".article   ul:nth-child(111)   li:nth-child(1)")

5.在控制台查看这一元素

成功获取到啦。

7.粗略改动一下来确定我们是否能真正操纵这个元素

改动成功。

8.改过的效果图