JavaScript querySelectorВсе ссылки на экранирующие периоды - PullRequest
Новая
       33

JavaScript querySelectorВсе ссылки на экранирующие периоды

0 голосов
/ 14 апреля 2020

В Ошибка моргания 1045868 Я имею в виду, что querySelectorAll не работает с периодами. Ответ, который я получил, был:

Это за spe c. Селекторы, содержащие точки в идентификаторах, необходимо экранировать, иначе они считаются запусками селекторов классов.

Разные механизмы рендеринга обрабатывают это по-разному, так что определенно существует несоответствие некоторому виду; проблема заключается в определении , кто не соответствует требованиям, поэтому проблема может быть надлежащим образом решена.

Где находится первоначальное определение querySelectorAll и / или где оно указано? Или, если я имею дело с одним или несколькими ленивыми разработчиками, откуда это подразумевается из ?

Ответы [ 3 ]

1 голос
/ 14 апреля 2020

Селекторы Уровень 3: 4. Синтаксис селектора

Символы в селекторах могут быть экранированы с помощью обратной косой черты sh в соответствии с теми же правилами экранирования, что и CSS. [CSS21].

CSS21: 4.1.3 Символы и регистр

В CSS, идентификаторы (включая имена элементов, классы и Идентификаторы в селекторах) могут содержать только символы [a-zA-Z0-9] и символы ISO 10646 U + 00A0 и выше, плюс дефис (-) и знак подчеркивания (_); они не могут начинаться с ди git, двух дефисов или дефиса, за которым следует ди git. Идентификаторы также могут содержать экранированные символы

. (полный стоп) - U+002E, поэтому он не является допустимым символом в качестве части идентификатора и должен быть экранирован из-за этого.

. в #music_playlist-2.7 указывает на селектор такого типа #idIdentifer.classIdentifer, но .7 не является допустимым идентификатором класса, так как идентификаторы не могут начинаться с di git, поэтому в зависимости от того, как синтаксический анализатор для селектора Реализация может просто игнорировать эту ошибку в селекторе и считать .7 как часть предыдущего идентификатора, но это не правильно, по крайней мере, я не могу найти какую-либо часть об этом в спецификациях, которые бы оправдывали это:

Селекторы Уровень 3: 4. Синтаксис селектора

A селектор представляет собой цепочку из одной или нескольких последовательностей простых селекторов , разделенных комбинаторами . Один псевдоэлемент может быть добавлен к последней последовательности простых селекторов в селекторе.

A последовательность простых селекторов представляет собой цепочку простых селекторов , которые не являются разделенный комбинатором . Он всегда начинается с селектора типа или универсального селектора. Никакой другой селектор типа или универсальный селектор не допускается в последовательности.

A простой селектор является либо селектором типа , универсальный селектор , селектор атрибута , селектор класса , селектор идентификатора или псевдокласс .

Универсальный селектор , записанное как CSS квалифицированное имя [CSS3NAMESPACE] со звездочкой (* U + 002A) в качестве локального имени, [...] Если универсальный селектор , представленный * [. ..] не является единственным компонентом последовательности простых селекторных селекторов или за ней сразу следует псевдоэлемент , тогда * может быть опущено и подразумевается наличие универсального селектора .

Поэтому, если вы хотите использовать идентификатор music_playlist-2.7 в вашем querySelectorAll, запишите его так: 

document.querySelectorAll('#music_playlist-2\\.7 input[name="payment_form_function"]');

Или, если вы хотите использовать его в css правиле: 

#music_playlist-2\.7 input[name="payment_form_function"] {
  color: red;
}
0 голосов
/ 14 апреля 2020

Альтернативным селектором будут скобки атрибута: 

const lazyDevs = document.querySelectorAll('[class="lazy.dev"]');

В следующей демонстрации показано, как работает приведенный выше оператор, а также способ устранения проблемы в DOM (есть еще CSS и JavaScript исправить).

Демо 

/*
The attribute selector works: 
'[class="lazy.dev"]'
*/
const lazyDevsA = document.querySelectorAll('[class="lazy.dev"]');
console.log(`'[class="lazy.dev"]' ~~~ ${lazyDevsA.length} ~~~~~~~~~~~ ?`);
console.log('~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~');

/*
In order to find all of the malformed class selectors:
'[class*="."]'
*/
const lazyDevsB = document.querySelectorAll('[class*="."]');
console.log(`'[class*="."]' ~~~~~~~~~ ${lazyDevsB.length} ~~~~~~~~~~~ ?`);
console.log('~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~');


/*
- This function will replace the first string parameter
  (rem) with the second string parameter (add)  
- Then replaces the offending className with the new
  className on every tag within the NodeList
*/
function lazyDevKiller(rem, add) {
  const NodeList = document.querySelectorAll('[class*="'+rem+'"]');
  NodeList.forEach(node => {
    let selector = node.className;
    let classAtt = selector.split(rem).join(add);
    node.className = "";
    node.className = classAtt;
  });
}

/*
- This will find all tags that have one or more dots:
  "." (periods or full stops) in their className.
- It will replace each "." with a dash "-" and assign
  the new className to each tag.
- Note: the elements in the result window are labeled:
  "lazy-dev"
*/
lazyDevKiller('.', '-');
aside {
  font: 700 1.25rem/1.5 "Comic Sans MS", cursive, sans-serif;
  color: blue;
  background: goldenrod;
  text-align: center;
  border-bottom: 3px ridge rgba(0, 0, 255, 0.3);
  width: 20vw;
  margin: 20px 10px;
  display: inline-block;
}

aside::after {
  content: ' 'attr(class);
}
<aside class='lazy.dev'></aside>
<aside class='lazy.dev'></aside>
<aside class='lazy.dev'></aside>
<aside class='lazy.dev'></aside>
0 голосов
/ 14 апреля 2020

Если у вас есть, например, этот элемент: 

<div id='foo.bar'>

Вы можете выбрать его с помощью 

document.getElementById('foo.bar')

, если вы хотите выбрать его querySelector, вы должны экранировать точку 

document.querySelector('#foo\\.bar')
...