1. Description
| querySelectorAll("[name*='value']") |
| 속성값의 부분 문자열과 매칭되는 Element들을 선택한다. |
| ※ jQuery Attribute Contains Selector [name*=”value”]의 Native버전입니다. |
2. Example
#1버튼을 클릭하면 name에 'va'가 들어가 있는 Element를 찾아서 텍스트의 색상을 파랑으로 변경하고 'is great'이라는 문자열을 추가한다. 버튼을 클릭할 때마다 텍스트의 오른쪽에 클릭한 횟수가 표시된다.
Programming Language
[HTML Code]
<div name="_1q74-example-1">
<h4>Programming Language</h4>
<li name="c">C</li>
<li name="c++">C++</li>
<li name="ada">Ada</li>
<li name="lisp">Lisp</li>
<li name="perl">Perl</li>
<li name="python">Python</li>
<li name="java">Java</li>
<li name="javascript">JavaScript</li>
<li name="go">Go</li>
<li name="ruby">Ruby</li>
</div>
<div name="_1q74-example-bottom">
<br>
<button name="btn-execute">#1. document.querySelectorAll("[name*='va']")</button>
</div>
[//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</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">
<h4>Programming Language</h4>
<li name="c">C</li>
<li name="c++">C++</li>
<li name="ada">Ada</li>
<li name="lisp">Lisp</li>
<li name="perl">Perl</li>
<li name="python">Python</li>
<li name="java">Java</li>
<li name="javascript">JavaScript</li>
<li name="go">Go</li>
<li name="ruby">Ruby</li>
</div>
<div name="_1q74-example-bottom">
<br/>
<button name="btn-execute">#1. document.querySelectorAll("[name*='va']")</button>
</div>
</div>
<hr/>
<h5>[HTML Code]</h5>
<div name="_1q74-source">
</div>
<h5>[//HTML Code]</h5>
<script>
// Example의 container을 얻는다.
var rootContainer = document.getElementsByName("_1q74-example-root")[0];
// 실행버튼을 얻는다.
var btnExecute = rootContainer.querySelector("[name='btn-execute']");
// 'va'가 들어간, 즉, 'java'라는 단어간 들어간 요소를 얻는다.
var languages = rootContainer.querySelectorAll("[name*='va']");
// 찾은 요소의 초기 텍스트를 저장한다.
languages["map"] = function(callback) {
this["_result"] = [];
for(let i = 0; i < this.length; i++) {
this._result[i] = callback(i, this[i]);
}
return this;
}
languages["get"] = function() {
return this._result;
}
var names = languages.map(function(i, el) {
return el.textContent;
}).get();
// 찾은 요소들의 색상을 파랑으로 변경하고,
// 표시되는 텍스트에 문자열을 추가한다.
// (클릭한 횟수를 추가해서 보여준다.)
languages["each"] = function(callback) {
for(let i = 0; i < this.length; i++) {
callback(i, this[i]);
}
}
var clickCount = 0;
btnExecute.addEventListener("click", function() {
languages.each(function(index, element) {
let addedText = " is great!!!";
if(clickCount > 0) {
addedText += "(" + clickCount + ")";
}
element.setAttribute("style", "color:blue;font-size:20px");
element.textContent = names[index] + addedText;
});
++clickCount;
});
// ------------------------------------------------------
// 소스출력
// ------------------------------------------------------
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-root"] {
min-height: 350px;
}
[name="_1q74-example-1"] {
min-height: 270px;
}
[name|="_1q74-example"] button
,[name="_1q74-source"] button {
background: lightgray;
border: 5px outset;
min-height: 30px;
}
[name|="_1q74-example"] button:active
,[name="_1q74-source"] button:active {
border: 2px inset;
min-height: 30px;
}
</style>
</style>
</body>
</html>4. File
[javascript][natvie][selector]attribute-contains.html
0.00MB
5. See also
jQuery Attribute Contains Selector [name*=”value”]
【jQuery/Select #4】Attribute Contains Selector [name*=”value”]
속성값의 부분 문자열과 매칭되는 요소들을 선택한다. 1. 예제 Programming Language C C++ Ada Lisp Perl Python Java JavaScript Go Ruby Execute 2. 결과
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
'JavaScript > Native' 카테고리의 다른 글
| 【Native/Selector #5】Attribute Contains Word Selector [name~=”value”] (0) | 2023.03.18 |
|---|---|
| 【Native/Selector #3】Attribute Contains Prefix Selector [name|=”value”] (0) | 2023.02.26 |
| 【Native/Selector #1】querySelectorAll("*") (0) | 2023.02.25 |