{"draftJsState":{"blocks":[{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Давайте подробно рассмотрим, как XPath и CSS-селекторы работают с элементами DOM, сравним их синтаксис и функциональные возможности. ","type":"unstyled","key":"4i1m1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Мы разберём наиболее важные аспекты, такие как выбор элементов по классу, идентификатору, атрибутам, иерархии и другим характеристикам. Для каждого случая приведём примеры, как это реализовать с помощью XPath и CSS-селекторов, а также примеры структуры DOM-дерева.","type":"unstyled","key":"bkjr1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"1. Выбор элемента по тегу","type":"header-two","key":"55u45"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Пример DOM:","type":"header-three","key":"dkfej"},{"data":{"image":{"id":"66ebbb79413d2349e13223b2"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"5m2ep"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"CSS-селектор:","type":"header-three","key":"4td41"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"div","type":"blockquote","key":"5prfa"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"XPath:","type":"header-three","key":"7dbgg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"//div","type":"blockquote","key":"djtmh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":10,"offset":0,"style":"BOLD"}],"text":"Объяснение: В обоих случаях селектор просто выбирает все элементы с указанным тегом (div).","type":"unstyled","key":"c84hq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"2. Выбор элемента по идентификатору (id)","type":"header-two","key":"f5r5n"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Пример DOM:","type":"header-three","key":"1a468"},{"data":{"image":{"id":"66ebbc2ca6b27f7d76ced380"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"5rpn5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"CSS-селектор:","type":"header-three","key":"ac47a"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"#main-content","type":"blockquote","key":"41vdu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"XPath:","type":"header-three","key":"bfeqm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"//*[@id='main-content']","type":"blockquote","key":"8iv8r"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":10,"offset":0,"style":"BOLD"}],"text":"Объяснение: В CSS-селекторах для выбора элемента по идентификатору используется символ #, а в XPath мы выбираем элементы с атрибутом id, равным \"main-content\".","type":"unstyled","key":"b032c"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"3. Выбор элемента по классу","type":"header-two","key":"5gts2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Пример DOM:","type":"header-three","key":"149m2"},{"data":{"image":{"id":"66ebbcac007ed056579e03f4"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"9h8p5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"CSS-селектор:","type":"header-three","key":"5v68m"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":".header","type":"blockquote","key":"2rfng"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"XPath:","type":"header-three","key":"31gsi"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"//*[@class='header']","type":"blockquote","key":"8ctm0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":10,"offset":0,"style":"BOLD"},{"length":1,"offset":80,"style":"BOLD"}],"text":"Объяснение: В CSS-селекторах для выбора элемента по классу используется символ \".\", а в XPath мы выбираем элементы с атрибутом class, равным \"header\".","type":"unstyled","key":"cr6e7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"4. Выбор элемента по атрибуту","type":"header-two","key":"bfb0s"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Пример DOM:","type":"header-three","key":"4qv47"},{"data":{"image":{"id":"66ebbd543cb2333a7406eed3"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"68gdf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"CSS-селектор:","type":"header-three","key":"49ikg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"input[type='text']","type":"blockquote","key":"d50nu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"XPath:","type":"header-three","key":"6p9t"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"//input[@type='text']","type":"blockquote","key":"fairl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":10,"offset":0,"style":"BOLD"}],"text":"Объяснение: В CSS-селекторах можно выбрать элемент по атрибуту с помощью квадратных скобок [], в XPath используется аналогичная конструкция с @ перед именем атрибута.","type":"unstyled","key":"6n046"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"5. Выбор элемента по частичному совпадению атрибута","type":"header-two","key":"44bhg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Пример DOM:","type":"header-three","key":"9jlmn"},{"data":{"image":{"id":"66ebbdd83cb2333a7407a322"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"ehccv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"CSS-селектор:","type":"header-three","key":"2t5n7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"[class*='primary']","type":"blockquote","key":"2clg4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"XPath:","type":"header-three","key":"a11pf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"//*[contains(@class, 'primary')]","type":"blockquote","key":"dmt8d"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":10,"offset":0,"style":"BOLD"},{"length":2,"offset":36,"style":"BOLD"},{"length":10,"offset":150,"style":"BOLD"}],"text":"Объяснение: В CSS-селекторах символ *= используется для поиска элементов, в которых атрибут содержит указанное значение. В XPath используется функция contains() для аналогичного поиска.","type":"unstyled","key":"15l8d"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"6. Выбор дочерних элементов","type":"header-two","key":"2t3g2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Пример DOM:","type":"header-three","key":"5ma3d"},{"data":{"image":{"id":"66ebbe51d69f9315c5b8c54e"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"5vdgf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"CSS-селектор:","type":"header-three","key":"cpeuq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"div > span","type":"blockquote","key":"398s"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"XPath:","type":"header-three","key":"afe3q"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"//div/span","type":"blockquote","key":"1ca7d"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":10,"offset":0,"style":"BOLD"}],"text":"Объяснение: В CSS-селекторах символ > указывает на выбор элемента, который является прямым потомком. В XPath используется аналогичная конструкция с косой чертой /.","type":"unstyled","key":"cd71c"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"7. Выбор всех потомков (вложенных элементов)","type":"header-two","key":"dhbq7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Пример DOM:","type":"header-three","key":"em2fd"},{"data":{"image":{"id":"66ebbea2f2b2f7091ef599da"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"56t1j"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"CSS-селектор:","type":"header-three","key":"5301a"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"div * ","type":"blockquote","key":"rn3o"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"XPath:","type":"header-three","key":"bffed"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"//div//*","type":"blockquote","key":"vkd1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Этот XPath-селектор работает аналогично CSS-селектору div * и выбирает все элементы, которые являются потомками div, независимо от их типа и уровня вложенности.","type":"unstyled","key":"28to"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":10,"offset":0,"style":"BOLD"}],"text":"Объяснение: В CSS и XPath можно выбрать все вложенные элементы, используя пробел в CSS и двойную косую черту // в XPath.","type":"unstyled","key":"5dipt"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":14,"offset":26,"style":"BOLD"}],"text":"Если целью является выбор всех элементов внутри родительского контейнера, то можно использовать универсальные селекторы: div * (CSS) или //div//* (XPath).","type":"unordered-list-item","key":"drtir"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":34,"offset":19,"style":"BOLD"},{"length":9,"offset":159,"style":"ITALIC"},{"length":12,"offset":171,"style":"ITALIC"}],"text":"Если нужно выбрать только элементы определённого типа (например, только span), то можно использовать селекторы, которые явно указывают на нужный тег. Например div span или //div//span","type":"unordered-list-item","key":"dbvcp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"8. Выбор элемента по порядковому номеру (nth-child)","type":"header-two","key":"6m5ql"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Пример DOM:","type":"header-three","key":"avak4"},{"data":{"image":{"id":"66ebc083dd3a0f64042d5a6f"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"36omj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"CSS-селектор:","type":"header-three","key":"eo0h6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"ul li:nth-child(2)","type":"blockquote","key":"b528a"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"XPath:","type":"header-three","key":"8avr2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"//ul/li[2]","type":"blockquote","key":"ck6gl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":10,"offset":0,"style":"BOLD"}],"text":"Объяснение: В CSS используется псевдокласс :nth-child() для выбора элемента на основе его позиции среди всех дочерних элементов. В XPath квадратные скобки [2] указывают на выбор второго элемента.","type":"unstyled","key":"emj3b"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"9. Выбор элемента по текстовому содержимому","type":"header-two","key":"bfs8q"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Пример DOM:","type":"header-three","key":"a0ab9"},{"data":{"image":{"id":"66ebc0f8b7a4bb23c141b652"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"8ckb1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"CSS-селектор:","type":"header-three","key":"cuj8f"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"/* CSS не поддерживает выбор по тексту */","type":"blockquote","key":"mv1i"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"XPath:","type":"header-three","key":"5mvja"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"//p[text()='Important message!']","type":"blockquote","key":"drc6k"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":10,"offset":0,"style":"BOLD"}],"text":"Объяснение: В CSS-селекторах нет возможности выбирать элементы на основе их текстового содержимого, в то время как XPath поддерживает такую функциональность с помощью конструкции text().","type":"unstyled","key":"e0gq2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"10. Выбор элемента по соседям ниже (братьям)","type":"header-two","key":"33h9o"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Пример DOM:","type":"header-three","key":"btq2i"},{"data":{"image":{"id":"66ebc2c82b752c5f177ce486"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"56cbr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"CSS-селектор:","type":"header-three","key":"1fqr1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":10,"offset":0,"style":"BOLD"},{"length":33,"offset":22,"style":"BOLD"}],"text":"Селектор + — выбирает только следующий соседний элемент.","type":"unordered-list-item","key":"9barv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"div + p","type":"blockquote","key":"b69ek"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":15,"offset":50,"style":"BOLD"}],"text":"Этот селектор выберет только элемент

, который непосредственно следует за

.","type":"unstyled","key":"2ge7t"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":10,"offset":0,"style":"BOLD"},{"length":24,"offset":22,"style":"BOLD"}],"text":"Селектор ~ — выбирает всех последующих соседей на том же уровне, которые следуют за

.","type":"unordered-list-item","key":"fd6on"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"div ~ p","type":"blockquote","key":"3dk9s"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":3,"offset":22,"style":"BOLD"},{"length":27,"offset":218,"style":"BOLD"}],"text":"Этот селектор выберет все элементы

, которые располагаются после

, независимо от того, какие другие элементы находятся между ними. В данном случае, он также выберет элемент

, так как он идёт после

, но не обязательно сразу за ним.","type":"unstyled","key":"7cdbh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"XPath:","type":"header-three","key":"3qjor"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":24,"offset":14,"style":"BOLD"}],"text":"Чтобы выбрать непосредственного соседа (аналог CSS-селектора +):","type":"unordered-list-item","key":"c6sjm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"//div/following-sibling::p[1]","type":"blockquote","key":"d0v82"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":15,"offset":56,"style":"BOLD"}],"text":"Этот XPath-селектор выберет только элемент

, который непосредственно следует за

.","type":"unstyled","key":"4vtp3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":24,"offset":14,"style":"BOLD"}],"text":"Чтобы выбрать всех последующих соседей (аналог CSS-селектора ~):","type":"unordered-list-item","key":"4t2cj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"//div/following-sibling::p","type":"blockquote","key":"35d6g"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":22,"offset":28,"style":"BOLD"}],"text":"Этот XPath-селектор выберет всех следующих братьев типа

, которые идут после

.","type":"unstyled","key":"8ns0f"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":10,"offset":0,"style":"BOLD"}],"text":"Объяснение: ","type":"unstyled","key":"f1ifk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":16,"offset":0,"style":"BOLD"},{"length":33,"offset":26,"style":"BOLD"}],"text":"Селектор + в CSS выбирает только следующий соседний элемент (непосредственного брата).","type":"unordered-list-item","key":"4h90s"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":16,"offset":0,"style":"BOLD"},{"length":24,"offset":26,"style":"BOLD"}],"text":"Селектор ~ в CSS выбирает всех последующих соседей на том же уровне (всех братьев, начиная с первого после элемента).","type":"unordered-list-item","key":"53bpn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":5,"offset":2,"style":"BOLD"},{"length":29,"offset":57,"style":"BOLD"},{"length":27,"offset":120,"style":"BOLD"}],"text":"В XPath для выбора непосредственного соседа используется following-sibling::element[1], а для всех последующих соседей — following-sibling::element.","type":"unordered-list-item","key":"aompo"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"11. Выбор предыдущих соседей (preceding-sibling)","type":"header-two","key":"a18hg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Пример DOM:","type":"header-three","key":"dbfob"},{"data":{"image":{"id":"66ebc56228c4236d577745ec"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"6osg7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":18,"offset":66,"style":"BOLD"}],"text":"Допустим, мы находимся на элементе

, и нам нужно выбрать его предыдущих соседей (все элементы, которые находятся перед ним на том же уровне вложенности).","type":"unstyled","key":"92ad4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"CSS-селектор:","type":"header-three","key":"5tdff"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":40,"offset":4,"style":"BOLD"},{"length":5,"offset":98,"style":"BOLD"}],"text":"CSS не поддерживает выбор предыдущих соседей. В CSS можно выбирать только элементы, расположенные после указанного элемента (вперед по иерархии), с помощью селекторов + и ~, но выбрать предыдущих соседей невозможно.","type":"unstyled","key":"2n0mp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"XPath:","type":"header-three","key":"d4upn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":36,"offset":14,"style":"BOLD"}],"text":"Чтобы выбрать непосредственного предыдущего соседа (ближайшего брата):","type":"unordered-list-item","key":"34eoj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"//div/preceding-sibling::*[1]","type":"blockquote","key":"5kd9u"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":11,"offset":22,"style":"BOLD"}],"text":"Этот селектор выберет элемент

, который находится непосредственно перед

.","type":"unstyled","key":"397nc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":23,"offset":14,"style":"BOLD"}],"text":"Чтобы выбрать всех предыдущих соседей:","type":"unordered-list-item","key":"em93v"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"//div/preceding-sibling::*","type":"blockquote","key":"1ihu3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":12,"offset":28,"style":"BOLD"}],"text":"Этот XPath-селектор выберет всех братьев, которые находятся перед

, то есть и , и

.","type":"unstyled","key":"4r7kp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"12. Выбор последнего элемента","type":"header-two","key":"6i3m8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Пример DOM:","type":"header-three","key":"e67p0"},{"data":{"image":{"id":"66ebc5efa6b27f7d76dadd09"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"c7pma"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"CSS-селектор:","type":"header-three","key":"7bp6p"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"ul li:last-child","type":"blockquote","key":"4l7jd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"XPath:","type":"header-three","key":"aql3o"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"//ul/li[last()]","type":"blockquote","key":"fndrs"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":10,"offset":0,"style":"BOLD"},{"length":11,"offset":43,"style":"BOLD"},{"length":6,"offset":100,"style":"BOLD"}],"text":"Объяснение: В CSS используется псевдокласс :last-child, в то время как в XPath используется функция last() для выбора последнего элемента.","type":"unstyled","key":"5iakk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"13. Выбор родительского элемента","type":"header-two","key":"4ha7f"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Пример DOM:","type":"header-three","key":"60o5a"},{"data":{"image":{"id":"66ebc63de7b33775f3e8453e"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"6prc3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"CSS-селектор:","type":"header-three","key":"d0id7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"/* CSS не поддерживает выбор родителя */1","type":"unstyled","key":"ap6pv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"XPath:","type":"header-three","key":"41jp5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"//span/parent::div","type":"blockquote","key":"8fc9s"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":10,"offset":0,"style":"BOLD"},{"length":8,"offset":128,"style":"BOLD"}],"text":"Объяснение: CSS-селекторы не поддерживают выбор родительских элементов, в то время как XPath позволяет это делать с помощью оси parent::.","type":"unstyled","key":"7ovuj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Сравнительная таблица XPath и CSS-селекторов","type":"header-two","key":"9mt45"},{"data":{"image":{"id":"66ebc8e9d69f9315c5c83889"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"3uemg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Заключение","type":"header-three","key":"b5lu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"XPath и CSS-селекторы предоставляют разные возможности для поиска и работы с элементами DOM. CSS-селекторы более просты и быстры в большинстве случаев, но их функциональность ограничена. XPath предоставляет гораздо больше возможностей, таких как выбор родительских элементов, работа с текстом и сложные фильтры, но его синтаксис более сложный и он может работать медленнее.","type":"unstyled","key":"dsl4q"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В статье приведены не все возможности XPath и CSS селекторов. Пишите в комментариях, чего бы еще хотелось узнать.","type":"unstyled","key":"36uh2"},{"data":{"image":{"id":"66ebc9440587ef5b6a806d30"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"8eoem"},{"data":{},"depth":0,"entityRanges":[{"key":0,"length":80,"offset":0}],"inlineStyleRanges":[{"length":80,"offset":0,"style":"BOLD"}],"text":"Вместо оглавления. Что вы найдете на канале QA Helper - справочник тестировщика?","type":"unstyled","key":"edk46"},{"data":{},"depth":0,"entityRanges":[{"key":1,"length":35,"offset":75}],"inlineStyleRanges":[{"length":110,"offset":0,"style":"BOLD"}],"text":"Не забудьте подписаться на канал, чтобы не пропустить полезную информацию: QA Helper - справочник тестировщика","type":"unstyled","key":"30voh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":79,"offset":0,"style":"BOLD"}],"text":"Пишите в комментариях какой пункт было бы интересно рассмотреть более подробно.","type":"unstyled","key":"4u22m"},{"data":{},"depth":0,"entityRanges":[{"key":2,"length":36,"offset":24}],"inlineStyleRanges":[{"length":60,"offset":0,"style":"BOLD"}],"text":"Обязательно прочитайте: Что должен знать и уметь тестировщик","type":"unstyled","key":"ebbs1"},{"data":{},"depth":0,"entityRanges":[{"key":3,"length":53,"offset":32}],"inlineStyleRanges":[{"length":86,"offset":0,"style":"BOLD"}],"text":"Также будет интересно почитать: Вопросы которые задают на собеседовании тестировщикам.","type":"unstyled","key":"9c5gs"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"marker","key":"7OxSswPVS9ulxmJ7Pcar"}],"entityMap":{"0":{"data":{"href":"https://dzen.ru/a/Zt1sS4DFpEfp77j5?share_to=link","url":"https://dzen.ru/a/Zt1sS4DFpEfp77j5?share_to=link"},"mutability":"MUTABLE","type":"LINK"},"1":{"data":{"href":"https://dzen.ru/id/667312f273e0422ea27887ee?share_to=link","url":"https://dzen.ru/id/667312f273e0422ea27887ee?share_to=link"},"mutability":"MUTABLE","type":"LINK"},"2":{"data":{"href":"https://dzen.ru/a/ZsHoaW5Tswu0FYmF?share_to=link","url":"https://dzen.ru/a/ZsHoaW5Tswu0FYmF?share_to=link"},"mutability":"MUTABLE","type":"LINK"},"3":{"data":{"href":"https://dzen.ru/suite/eca1006e-66ab-4b7c-a8ea-a0ea722d5304?share_to=link","url":"https://dzen.ru/suite/eca1006e-66ab-4b7c-a8ea-a0ea722d5304?share_to=link"},"mutability":"MUTABLE","type":"LINK"}}},"mentions":[]}