1. Description
| querySelectorAll("[name~='value']") |
| 속성값의 문자열과 부분 매칭되면서 공백으로 구분되는 문자열을 갖고 있는 Element를 찾는다. |
| ※ 【jQuery/Selector #5】Attribute Contains Word Selector [name~=”value”]의 Native버전입니다. |
2. Example
「영문이름에 'of'가 들어가 있고 공백으로 단어 구분이 되는 나라」버튼을 클릭했을 경우, 나라 이름에 'of'가 들어가 있는 요소들을 찾아 border스타일을 dotted로 바꾸고, 버튼을 클릭할 때마다 스타일을 토글시킨다.
「영문이름에 공백이 들어가 있지 않은 나라」버튼을 클릭했을 경우, 나라 이름에 'in'이 들어가 있는 요소들을 찾아 배경색을 orange로 바꾸고, 해당되는 요소들을 찾지 못했을 경우 "해당 나라를 찾을 수 없습니다"라는 메시지를 표시한다.
※ Spain과 China를 찾고자 하는 의도이지만 공백으로 구분되는 문자열이 없기 때문에 해당 요소를 선택할 수 없다.
Countries
영문이름에 'of'가 들어가 있고 공백으로 단어 구분이 되는 나라
영문이름에 'in'이 들어가 있고 공백으로 단어 구분이 되는 나라
[HTML Code]
[//HTML Code]
3. Code
더보기
<!-- ---------------------------------------------------------
--
-- Author: 1q74.tistory.com
--
--------------------------------------------------------- -->
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>[1q74.tistory.com] javascript/native/selector/attribute-contains-word</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
</head>
<body>
<div name="_1q74-example-root">
<div name="_1q74-example-1" style="min-height:240px;">
<h4>Countries</h4>
<li name="Republic of korea">한국</li>
<li name="United Kingdom of Great Britain and Northern Ireland">영국</li>
<li name="United States of America">미국</li>
<li name="Spain">스페일</li>
<li name="China">중국</li>
<br/>
<div id="error-message" style="color:red;"></div>
</div>
<div name="_1q74-example-bottom">
<br/>
영문이름에 'of'가 들어가 있고 공백으로 단어 구분이 되는 나라<br/>
<button name="_1q74-btn-of-with-space">#1. container.querySelectorAll("[name~='of']")</button>
<br/>
</br/>
영문이름에 'in'이 들어가 있고 공백으로 단어 구분이 되는 나라<br/>
<button name="_1q74-btn-without-space">#2. container.querySelectorAll("[name~='in']")</button>
</div>
</div>
<hr/>
<h5>[HTML Code]</h5>
<div name="_1q74-source">
</div>
<h5>[//HTML Code]</h5>
<script>
const btnOfWithSpace = document.querySelector("[name='_1q74-btn-of-with-space']");
const btnWithoutSpace = document.querySelector("[name='_1q74-btn-without-space']");
const container = document.querySelector("[name='_1q74-example-1']");
btnOfWithSpace.addEventListener("click", function() {
const _of = container.querySelectorAll("[name~='of']");
const borderStyles ={
"border-style": "dotted",
"border-color": "green"
};
_of.forEach((el, i) => {
const isStyled = (el.style.borderStyle === "dotted");
// 스타일을 토글한다.
for(const [key, value] of Object.entries(borderStyles)) {
if(!isStyled) {
el.style[key] = value;
} else {
el.style[key] = "";
}
}
});
});
var withoutSpaceClickCount = 0;
btnWithoutSpace.addEventListener("click", function() {
const _in = container.querySelectorAll("[name~='in']");
if(_in.length == 0) {
let msg = "해당 나라를 찾을 수 없습니다.";
if(withoutSpaceClickCount > 0) {
msg += "(" + withoutSpaceClickCount + ")";
}
document.getElementById("error-message").textContent = msg;
++withoutSpaceClickCount;
} else {
_in.style.backgroundColor = "orange";
}
});
// ------------------------------------------------------
// 소스출력
// ------------------------------------------------------
var textSource = $("[name='_1q74-source']");
var exampleHtml = $("[name='_1q74-example-root']").html();
var specialCharLines = textSource.text(exampleHtml).html().split("\n");
textSource.html(specialCharLines.join("<br/>").replaceAll("\t", " "));
// ------------------------------------------------------
</script>
<style>
[name='_1q74-example-bottom'] button {
background: lightgray;
border: 5px outset;
min-height: 30px;
}
[name='_1q74-example-bottom'] button:active {
border: 2px inset;
min-height: 30px;
}
</style>
</body>
</html>4. File
[javascript][native][selector]attribute-contains-word.html
0.00MB
5. See also
【jQuery/Selector #5】Attribute Contains Word Selector [name~=”value”]
1. Description 속성값의 문자열과 부분 매칭되면서 공백으로 구분되는 문자열을 갖고 있는 Element를 찾는다. 2. Example 「영문이름에 'of'가 들어가 있고 공백으로 단어 구분이 되는 나라」버튼을 클릭
1q74.tistory.com
6. Reference
https://developer.mozilla.org/ko/docs/Web/CSS/Attribute_selectors
https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector
https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll
'JavaScript > Native' 카테고리의 다른 글
| 【Native/Selector #4】Attribute Contains Selector [name*=”value”] (0) | 2023.02.27 |
|---|---|
| 【Native/Selector #3】Attribute Contains Prefix Selector [name|=”value”] (0) | 2023.02.26 |
| 【Native/Selector #1】querySelectorAll("*") (0) | 2023.02.25 |