CSS特例定位方式

时间:2023-03-08 15:36:10

同级向下一个元素定位,一个+表示下一个元素,++表格下下个元素

input[name='name1'] +input

td:eq(0)表示第一个td元素,此定位方式限于执行js,在selenium时用此表达式识别不到元素

$(".igrid-data [_row='0']>td:eq(0)")

JS获取元素属性值(获取元素href属性值)

document.getElementById('id1').href

document.getElementsByClassName('xh')[0].href

JS获取text

document.getElementById('id2').innerText

document.getElementsByClassName('classname2')[0].innerText

JS获取value

document.getElementById('id2').value

document.getElementsByClassName('classname2')[0].value

JS通过同级向下的元素,获取属性值

document.querySelector("[title='管理员']").nextSibling.children[0].children[0].className

nextSibling表示和[title='管理员']同级向下一个的元素,如下图所示

CSS特例定位方式

JS获取同级向上的元素

document.querySelector("[title='管理员']").previousSibling

CSS特例定位方式

JS获取元素的父级节点parentNode

document.querySelector("[title='管理员']").parentNode

CSS方式通过text定位元素

$("div:contains('搜索')")

匹配prev之后的所有siblings元素,使用'~'符号

$("form~input")

模糊匹配元素

查找id='before_xxxxx'开始的元素

$("div[id^='before_']")

查找id='xxxx_after'开始的元素

$("div[id$='_after']")

查找id='xxxx_middle_xxx'的元素

$("div[id*='_middle_']")

cssSelector定位元素

document.querySelector("[field='region']")

document.querySelectorAll("[field='region']")[0]

jQuery在 DOM 树进行水平遍历

有许多有用的方法让我们在 DOM 树进行水平遍历:

  • siblings()
  • next()
  • nextAll()
  • nextUntil()
  • prev()
  • prevAll()
  • prevUntil()

例如:$(".fixedtablewrap").prev();#查找与class=‘fixedtablewrap’同级的上一个元素

CSS特例定位方式