1. Description
| querySelectorAll("[name|='value']") |
| 기본적으로 속성값의 전체 문자열이 같은 요소들을 선택하지만, [시작문자열]다음에 '-'(하이픈)기호가 들어 있는 요소도 선택한다. |
| ※ 【jQuery/Selector #3】Attribute Contains Prefix Selector [name|=”value”]의 Native버전입니다. |
2. Example
#1버튼을 클릭하면 name속성이 UTF-8로 되어 있는 Element를 찾아서 배경색을 변경하고, #2버튼을 클릭하면 name속성이 UTF로 시작하면서 '-'(하이픈)으로 연결되는 Element를 찾아서 배경색을 변경한다.
Encoding Set
[전체 문자열 매칭]
Encoding Set
[시작하는 일부 문자열 매칭]
[HTML Code]
<div name="_1q74-example-1">
<div name="fulltext">
<h1>Encoding Set</h1>
<li name="UTF">Unicode</li>
<li name="UTF-8">UTF-8</li>
<li name="UTF-16">UTF-16</li>
<li name="UTF-32">UTF-32</li>
<li name="EUC-KR">EUC-KR</li>
</div>
<br>
[전체 문자열 매칭]<br>
<button name="btn-find">[name|='UTF-8']</button>
<hr>
<div name="partial-prefix-text">
<h1>Encoding Set</h1>
<li name="UTF">Unicode</li>
<li name="UTF-8">UTF-8</li>
<li name="UTF-16">UTF-16</li>
<li name="UTF-32">UTF-32</li>
<li name="EUC-KR">EUC-KR</li>
</div>
</div>
<div name="_1q74-example-bottom">
<br>
[시작하는 일부 문자열 매칭]<br>
<button name="btn-find">[name|='UTF']</button>
</div>
<hr>
<h5>[HTML Code]</h5>
<div name="_1q74-source">
</div>
<h5>[//HTML Code]</h5>
<script>
var btnFind = document.getElementsByName("btn-find");
var dataset = [{
name: "fulltext",
selector: "[name|='UTF-8']",
color: "lightgreen",
}, {
name: "partial-prefix-text",
selector: "[name|='UTF']",
color: "green",
}];
btnFind.forEach(function(button, i) {
const data = dataset[i];
const container = document.querySelector("div[name='" + data.name + "']");
const utf = container.querySelectorAll(data.selector);
button.addEventListener("click", function() {
utf.forEach(function(entry) {
entry.setAttribute("style", "background:" + data.color);
});
});
});
</script>
[//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 prefix</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">
<div name="fulltext">
<h1>Encoding Set</h1>
<li name="UTF">Unicode</li>
<li name="UTF-8">UTF-8</li>
<li name="UTF-16">UTF-16</li>
<li name="UTF-32">UTF-32</li>
<li name="EUC-KR">EUC-KR</li>
</div>
<br/>
[전체 문자열 매칭]<br/>
<button name="btn-find">[name|='UTF-8']</button>
<hr/>
<div name="partial-prefix-text">
<h1>Encoding Set</h1>
<li name="UTF">Unicode</li>
<li name="UTF-8">UTF-8</li>
<li name="UTF-16">UTF-16</li>
<li name="UTF-32">UTF-32</li>
<li name="EUC-KR">EUC-KR</li>
</div>
</div>
<div name="_1q74-example-bottom">
<br/>
[시작하는 일부 문자열 매칭]<br/>
<button name="btn-find">[name|='UTF']</button>
</div>
<hr/>
<h5>[HTML Code]</h5>
<div name="_1q74-source">
</div>
<h5>[//HTML Code]</h5>
<script>
var btnFind = document.getElementsByName("btn-find");
var dataset = [{
name: "fulltext",
selector: "[name|='UTF-8']",
color: "lightgreen",
}, {
name: "partial-prefix-text",
selector: "[name|='UTF']",
color: "green",
}];
btnFind.forEach(function(button, i) {
const data = dataset[i];
const container = document.querySelector("div[name='" + data.name + "']");
const utf = container.querySelectorAll(data.selector);
button.addEventListener("click", function() {
utf.forEach(function(entry) {
entry.setAttribute("style", "background:" + data.color);
});
});
});
</script>
</div>
<script>
// ------------------------------------------------------
// 소스출력
// ------------------------------------------------------
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: 200px;
}
[name="_1q74-example-1"] {
min-height: 170px;
}
[name="_1q74-example-bottom"] {
min-height: 150px;
}
[name="_1q74-example-root"] [type="image"]{
width: 100px;
}
[name="_1q74-example-1"] td {
min-width: 100px;
min-height: 30px;
}
[name|="_1q74-example"] button
,[name="_1q74-source"] button {
background: lightgray;
border: 5px outset;
min-height: 40px;
}
[name|="_1q74-example"] button:active
,[name="_1q74-source"] button:active {
border: 2px inset;
min-height: 40px;
}
</style>
</body>
</html>
4. File
[javascript][native][selector]attribute-contains-prefix.html
0.00MB
5. 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 #4】Attribute Contains Selector [name*=”value”] (0) | 2023.02.27 |
| 【Native/Selector #1】querySelectorAll("*") (0) | 2023.02.25 |