HTML Element
devdocs: https://devdocs.io/dom/htmlelement
MDN: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement
μμ λ°λΌνκΈ°: https://codesandbox.io/s/staging-feather-jthzn / https://jthzn.csb.app/
HTML Element μΈν°νμ΄μ€λ λͺ¨λ μ’ λ₯μ HTML elementλ₯Ό λνλΈλ€.(?) μ΄λ€ elements μ§μ μ μΌλ‘ μ΄ μΈν°νμ΄μ€λ₯Ό ꡬννλ λ°λ©΄, λ€λ₯Έ elementλ€μ κ·Έκ²μ μμνλ μΈν°νμ΄μ€λ₯Ό ν΅ν΄ ꡬννλ€.
Properties
λΆλͺ¨μΈ Elementμ μμ±μ μμνλ€. DocumentAndElementEventHandlers, ElementCssInlineStyle, GlobalEventHandlers, HTMLOrForeignElement, TouchEventHandlersμ μμ±μ ꡬννλ€.
HTMLElement.accessKey
μμμ ν λΉλ accessKeyλ₯Ό λνλ΄λ DOMString μ΄λ€.
accessKeyκ° λκ° νλλ λ¨μΆν€?
accessKey: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/accesskey Macμμλ control + option + keyλ₯Ό νμ λ μμ±μ΄ λ¨Ήνλ€.
HTMLElement.accessKeyLabel (Read only)
μμμ ν λΉλ accessKeyλ₯Ό ν¬ν¨νλ DOMStringμ λ°ννλ€. μ‘΄μ¬νμ§ μλ κ²½μ° λΉλ¬Έμμ΄μ λ°ννλ€.
Syntax
label = element.accessKeyLabel
Example
<body> <div id="app"> <button accesskey="h" title="Caption" id="btn1">Hover me</button> </div> <script> const node = document.querySelector("#btn1"); if (node.accessKeyLabel) { console.log("1"); node.title += " [" + node.accessKeyLabel + "]"; } else { console.log("2"); node.title += " [" + node.accessKey + "]"; } node.onclick = function() { const p = document.createElement("p"); p.textContent = "Clicked!"; node.parentNode.appendChild(p); }; </script> </body>
μκΈ°λ€. μμ λΌκ³ λ°λΌνλλ° λ¬΄μ‘°κ±΄
if (node.accessKeyLabel)
μ΄ μ‘°κ±΄λ¬Έμμ falseλ₯Ό νκ³ μ½λλ₯Ό μΉ λ accessKeyLabelμ΄ μλμμ±μΌλ‘ μλ¬λ€. https://codesandbox.io/s/staging-feather-jthznHTMLElement.contentEditable
μ΄κ²μ DOMStringμ΄κ³ elementλ μμ κ°λ₯ νλ€λ©΄ true, κ·Έλ μ§μλ€λ©΄ false κ·Όλ° DOMString inheritλ λΆλͺ¨μ μμ κ°λ₯ν μνλ₯Ό μμνλ€.
HTMLElement.isContentEditable
μμμ μμ μ¬λΆλ₯Ό booleanμΌλ‘ return ν΄μ€λ€. flagλ μ§μ§ isλ‘ μμ..
syntax
editable = element.isContentEditable
Example
<body> <p class="p1">p1</p> <p class="p2" contenteditable="true">p2</p> <script> const p1 = document.querySelector(".p1"); const p2 = document.querySelector(".p2"); console.log("p1.isContentEditable", p1.isContentEditable); // false console.log("p1.isContentEditable", p2.isContentEditable); // true console.log("typeof", typeof p2.isContentEditable); // 'boolean' </script> </body>
HTMLElement.contextMenu
λμ΄μ μ¬μ©λλ©΄ μλμ§λ§ μλ§ μ¬μ©λκ³ μμ κ²μ΄λ€. elementμ κ΄λ ¨λ contextual menuλ₯Ό λνλ΄λ HTMMenuElementμ΄λ€. μλ§λ null..
HTMLElementOrForeignElement.dataset (READ ONLY)
custom data attributes (
data-*
) elementλ₯Ό scriptμμ μ½κ³ μΈ μ μλ DomStringMapμΌλ‘ return ν΄μ€λ€. μ΄ Accessλ DOMκ³Ό HTML μμ κ°λ₯νλ€. μ½κΈ°λ§ κ°λ₯νκ³ μ§μ μΈ μ μλ€. data- data- μμν΄μΌνλ€.html: λ¬Έμ, μ«μ λμ(-), μ (.), μ½λ‘ (:), μΈλμ€μ½μ΄(_) λ μ¬μ©κ°λ₯νμ§λ§ λλ¬Έμλ μ¬μ©ν μ μλ€.
javascript: μΉ΄λ©μΌμ΄μ€λ‘ μ°κ³ λμ μ λ±μ λͺ¨λ μ κ±° λ€μ 컨벀μ dash-style -> camelCase λ‘ λ³ν, μ΄ κ·μΉλλ‘ DOMStringMapμ Keyλ‘ λ³νλλ€.
μ λμ΄ data-λ μμ λλ€.
a-zκΉμ§ μλ¬Έμ μμ μ€λ λͺ¨λ λμλ μμ , μλ¬Έμλ -> λλ¬Έμλ‘
camelCase -> dash-styleλ‘ λ³ν
λ³νμ a-z μλ¬Έμλ‘ μΈ μ μλ€.
dash-κ° μΆκ°λλ€.
λλ¬Έμλ μλ¬Έμλ‘ λ³νλλ€.
λ€λ₯Έ λ¬Έμλ λ³νλμ§ μλλ€.
valueμ μ κ·ΌνκΈ°
element.dataset.keyname κ³Ό κ°μ΄ camelCase keyλ₯Ό μ¬μ©ν΄μ μ€μ νκ±°λ μ½μ μ μλ€.
element.dataset[keyname] λ κ°λ₯
in operatorλ₯Ό μ΄μ©νμ¬ attributeμ μ‘΄μ¬μ¬λΆλ₯Ό μ μ μλ€.
valueλ₯Ό μ€μ νκΈ°
valueκ° μ€μ λλ©΄ νμ λ¬Έμμ΄μ΄λ€.
delete operatorλ₯Ό μ¬κΈ°μλ μ¬μ©ν μ μλ€.
syntax
const dataAttrMap = element.dataset
return value
A DOMStringMap.
<div id="user" data-id="1234567890" data-user="sla" data-data-of-birth>sla</div>
const el = document.querySelector('#user'); console.log('user' in el.dataset); // true el.dataset.dataOfBirth = '04-27'; delete el.dataset.id; console.log('id', 'id' in el.dataset); // false el.dataset.someDataAttr = 'mydata' console.log('someDataAttr', 'someDataAttr' in el.dataset); // ture
ν.. μ λ° λ€μ 컨벀μ μ΄ μλ μ€ λͺ°λλΉ.
HTMLElement.dir
λ°©ν₯μ λνλ΄λ global attributeλ₯Ό DOMStringμΌλ‘ λ°ννλ€. κ°λ₯ν κ°μ "ltr", "rtl", "auto"μ΄λ€. ν μ€νΈλ₯Ό μ°λ λ°©ν₯μ μ€μ νκ±°λ κ°μ Έμ¬ λ μ μ©νλ€. μλμ΄μ νλΈλ¦¬μ΄λ RTL λ°©ν₯μ±μ μ¬μ©νλ λνμ μΈ μΈμ΄μ΄λ€. μ΄λ―Έμ§μ μμ±μΌλ‘λ μ¬μ©ν μ μλ€. titleκ³Ό altκ° rtl ν¬λ§·μΌλ‘ μ μλλ€. π ν μ΄λΈμμ μ μλ κ²½μ° μ΄μ μμκ° μ€λ₯Έμͺ½μμ μΌμͺ½μΌλ‘ λ°°μ΄λλ€.
autoλ‘ μ€μ λμ΄ μλκ²½μ° μ²«λ²μ§Έ λ¬Έμλ λΆλͺ¨μμμ λ°©ν₯μ±μ κΈ°μ€μΌλ‘ νλ€.
Syntax
let currentWritingDirection = elementNodeReference.dir; elementNodeReference.dir = newWritingDirection;
currentWritingDirection
λ νμ¬ elementμ ν μ€νΈ μ°κΈ° λ°©ν₯μ λνλ΄λ λ¬Έμμ΄ λ³μμ΄λ€.newWritingDirection
μ ν μ€νΈ μ°κΈ° λ°©ν₯μ κ°μ λνλ΄λ λ¬Έμμ΄ κ°μ΄λ€.
'ltr' -> left to right
'rtl' -> right to left
'auto' -> elementμ contentμ λ°λΌ κ²°μ λμ΄μΌ νλ€.
<div class="name">my name is sla</div>
const el = document.querySelector(".name"); el.dir = "rtl";
μΌλ¨ μ€λ₯Έμͺ½ λμ λΆμ μ λ ¬μ΄ λμ.. π€
μνΌ μ΄λ°κ² μμλ€λ.. π€
HTMLElement.draggable μμκ° dragκ° κ°λ₯νμ§ BooleanμΌλ‘ λ°ννλ€.
HTMLElement.dropzone dropzoneμ΄ λμ΄μ μ°μ΄μ§ μλλ€. λͺ¨λ λΈλΌμ°μ κ° μ§μνμ§ μμ.
HTMLElement.hidden
elementκ° hiddenμΈμ§ μλμ§λ₯Ό Boolean κ°μΌλ‘ λνλΈλ€. λͺ¨λ presentation modeμμ μ μ©λλ€. μ¬μ©μκ° μ κ·Ό ν μ μλλ‘ λμ΄ μλ μ½ν μΈ λ₯Ό μ¨κΈ°κΈ° μν΄ μ¬μ©ν΄μλ μλλ€. cssμ displayλ₯Ό μ¬μ©ν΄μ μ μ΄νλκ²κ³Ό λ€λ₯΄λ€. hiddenμ μ μ ν μ¬μ© μ¬λ‘
νμ¬λ κ΄λ ¨μ΄ μμ§λ§ λμ€μ νμν μ μλ μ½ν μΈ
μ΄μ μ νμνμ§λ§ λ μ΄μ νμνμ§ μμ μ½ν μΈ
νμ΄μ§ λ€λ₯Έ λΆλΆμμ ν νλ¦Ώμ²λΌ μ¬μ¬μ©λλ μ½ν μΈ (?)
drawing buffer offscreen canvas λ§λ€λ?? drawing bufferμ μ§μ§ λͺ¨λ₯΄κ² λ€ offscreen canvas: off screen λ λ ν μ μλ canvasλ₯Ό μ 곡νλ€. windowμ worker contextμμ μ¬μ©ν μ μλ€. web workers λ¨μΌ μ°λ λμμ μ€ννκ³ μΆμ§ μμλ.. λ³λμ background threadμμ μ¬μ©νκ³ μΆμλ
λΆμ μ ν μ¬μ© μ¬λ‘
tabμ΄ μλ dialog box μμ pannel μ¨κΈ°κΈ°
ν contentμμ ν presentationμ μ¨κΈ°λ©΄μ λ€λ₯Έ presentationμ λ³Ό μ μκ² ν¨
β μλ§ μ κ·Όμ± κ΄λ ¨λκ² μλκΉ μκ°μ΄ λ¬.. λμ 보μ΄μ§ μμ§λ§ 리λκΈ°λ‘ μ½μ μ μλ κ·Έλ°κ²λ€.. κ·Έλμ λμλ§ μ보μ΄λκ² hiddenμ μ¬μ©νλ κ³³μ μ§κΈμ μ¬μ©νμ§ μμ§λ§ λμ€μ μ¬μ©λ , νΉμ μ΄μ λμ΄μ νμμλκ²λ€ νμ μΈκ±° κ°λ€. μ΄λ΄λ cssμμλ₯Ό μ΄μ©νλΌλ λ» κ°μ
Elements that are not hidden must not link to elements which are.
βHiddenβ ν΄μ£Όμ§ μμ μμλ βHiddenβν μμμ μ°κ²° μν€μ§ μμμΌ νλ€.
Syntax
isHidden = HTMLElement.hidden; HTMLElement.hidden = true | false;
Value
viewμμ μ¨κ²¨μ Έ μλ€λ©΄ true, μλλ©΄ false
<div id="welcome" class="panel"> <h1>welcome</h1> <button class="button" id="okButton">OK</button> </div> <div id="awesome" class="panel" hidden> <h1>Thanks!</h1> <p>Thank you!</p> </div> document.querySelector("#okButton").addEventListener("click", function() { document.querySelector("#welcome").hidden = true; document.querySelector("#awesome").hidden = false; }, false);
addEventListenerμ 3λ²μ§Έ μΈμλ options
options
capture: DOM νΈλ¦¬μ νλ¨μ μλ EventTarget μΌλ‘ μ μ‘νκΈ° μ μ, λ±λ‘λ listener λ‘ μ΄ νμ μ μ΄λ²€νΈμ μ μ‘μ¬λΆλ₯Ό λνλ΄λ Boolean ? ν EventTargetκ³Ό CurrentTarget μκΈ°μΈκ°.. EventTargetλ μ μ΄κ° κ°λ₯νꡬλ..
once: 리μ€λκ° μΆκ°ν ν νλ²λ§ νΈμΆ
passive: μ΄κ±΄ μ²μ보λ€.. trueμΌ λ listenerμμ μ§μ ν ν¨μκ° preventDefault()λ₯Ό νΈμΆνμ§ μμμ λνλ΄λ BooleanμΌλ‘ λνλΈλ€.. ν? μ΄λ°κ²..
useCapture μμμ μλλ‘ νλ₯΄λ captureκ³Όμ
modern browsersλ captureλΌκ³ λΆλ¦¬λ κ²μ νλ€.
elementλ₯Ό ν΄λ¦νλ©΄ κ·Έκ²μ μμμ μλλ‘ νλ¬λ΄λ¦°λ€.
λΈλΌμ°μ λ "λ bodyλ ν΄λ¦νκ³ , oneλ ν΄λ¦νκ³ twoλ ν΄λ¦νκ³ threeλ ν΄λ¦νλ€" νκ³ μΈμνλ€.
μ€μ λ‘ μμμ μλλ‘ λ΄λ €κ°λ€κ°, λͺ¨λ μ΄λ²€νΈλ₯Ό λ΄κ° ν΄λ¦ν κ³³μ "captures" λ₯Ό νκ³ λ³΄κ΄νλ€.
νμ§λ§ μ΄λ²€νΈλ μ€νλμ§ μλλ€. κ·ΈλΌ μ΄μ ν΄λ¦ν κ³³μμ "bubble Up"μ΄ μΌμ΄λλ€.
User agent - μ¬μ©μλ₯Ό λμ νμ¬ μΌμ μννλ μννΈμ¨μ΄ μμ΄μ νΈμ΄λ€. μλ₯Ό λ€μ΄, μ΄λ©μΌ 리λμμλ λ©μΌ μ¬μ©μ μμ΄μ νΈμ΄κ³ , μ¬μ©μ μμ΄μ νΈλ₯Ό λ»νλ μ©μ΄μΈ μΈμ κ°μ νλ‘ν μ½μμλ ν΅μ μΈμ μ μͺ½ λμ λ§νλ€.(wikipedia)
μ μ μμ΄μ νΈκ° μ¬μ©μ μΈν°λ μ μ΄λ²€νΈ, νμ΄μ§ λ΄ ν μ€νΈ κ²μ("νμ΄μ§μμ μ°ΎκΈ°"), ν μ€νΈ μ νμ λͺ©μ μΌλ‘ μ£Όμ΄μ§ λ Έλκ° μλ κ²μ²λΌ λμν΄μΌνλμ§ μ¬λΆλ₯Ό λνλ΄λ Boolean μ λ°νν©λλ€.
inert="true"
elementκ° κ°μ§κ³ μλ€λ©΄ browserλignore
νλ€.ν€λ³΄λλ‘ μ΄λνλ μ¬μ©μκ° μλ€κ³ νμ
νλ²κ±° λ©λ΄κ° μκ³ β 컨ν μΈ λ‘ μ΄λνλλ° νλ²κ±° λ©λ΄ μμ μλ anchor tag λ€ μ΄λν΄μΌ 컨ν μΈ λ‘ μ΄λνλ€.
μ΄λ₯Ό μ μ΄νκ³ μ ν λ
inert
λ₯Ό μ¬μ©νκ² λλ€.nodeμ νμ μμμ rendered text λ΄μ©μ λνλΈλ€.
innerTextμ textContentμ μ°¨μ΄κ° μλλ°
innerTextλ rendered appearanceλ₯Ό μκ³ μλ€.
<br>
νκ·Έλ₯Ό κ°μκ±Έ μΈμνκ³ , hidden elementsλ₯Ό 무μνλ€.DOMString
μ λ°ν property elementμ μμμ text contentμ κΈ°λ³ΈμΈμ΄λ₯Ό get, get κ°λ₯νλ€. Tags for Identifying Languages μ μλ language codeλ₯Ό return νλ€. default valueλunknown
μ΄λ€. Syntaxlet languageUsed = elementNodeReference.lang; // get elmentNodeReference.lang = NewLangyage; // set
Example
document.documentElement.lang // get
HTMLElement.noModule module scriptsλ₯Ό μ§μνλ μ μ μμ΄μ νΈμμ importν scriptλ₯Ό μ€νν μ μλμ§ μ¬λΆλ₯Ό λνλ΄λ Booleanμ΄λ€.
Content Security Policy μ μ¬μ©νλ νλ²λ§ μ¬μ©ν μ μλ μνΈνλ μ«μλ₯Ό 리ν΄νμ¬ μ£Όμ΄μ§ fetchμ μ§νμ νμ©ν μ§ λ§μ§ μ¬λΆλ₯Ό κ²°μ νλ€. scriptμμλ§ nonce μμ±μ΄ λ ΈμΆλλ€. Examples
let nonce = script['nonce'] || script.getAttribute('nonce');
getAttributeμ μ΄κ±΄ κ³Όκ±° λΈλΌμ°μ λ€ μ©,
script['nonce']
μ΅μ λΈλΌμ°μ μ©μ΄λ€. μ΅κ·Ό λΆλΌμ°μ μμ accsessνλ λ°©λ²μscript['nonce']
μ΄λ κ² λ°μ μλ€. nonce λ°μ΄ν°λ₯Ό μ μΆνλ κ²μ λ°©μ§νλ λ° λμμ΄ λλ€. https://stackoverflow.com/questions/42922784/what-s-the-purpose-of-the-html-nonce-attribute-for-script-and-style-elements λ μ½μ 거리: https://developers.google.com/web/fundamentals/security/csp/#if_you_absolutely_must_use_itHTMLElement.spellcheck spell-checking μ controlνλ Booleanμ΄λ€.. λ€? μ΄λ°κ² μμλ€κ³ μ? π
htmlelement.style
CSSStyleDeclaration
μ΄λ€. μμμ μΈλΌμΈ μ€νμΌμ μ€μ νκΈ° μν΄ μ¬μ©λλ€. getν λμλ μμμ μΈλΌμΈ μ€νμΌ μμ±μ μ μλ λͺ¨λ μ€νμΌ μμ±μ ν¬ν¨νλ cssμ μΈμ λ΄μ CSSTyleDeclation κ°μ²΄λ₯Ό λ°ννλ€.Setting μ½κΈ°μ μ©μ CSStyleDeclation κ°μ²΄λ₯Ό λ°ννκΈ° λλ¬Έμ λ¬Έμμ΄μ μ§μ ν λΉνλ©΄ μλλ€.(elt.style = "color: red" κ°μ / elt.style.cssText = "color: blue; border: 1px solid black"; μ΄λ κ² ν΄μΌνλ€. ) λ§μ½ μ€νμΌ μ μκ° μ¬λ¬κ° μμ λ νΉμ μ€νμΌλ§ λ³κ²½νκ³ μ νλ€λ©΄ νΉμ μ€νμΌμ μ κ·Όν΄μ λ³κ²½νλκ² λ°λμ§νλ€. (elt.style.color = "..." κ°μ΄) λλ ( ele.setAttribute('style', '...')) μ¬μ©νμ¬ μμ μ 체λ₯Ό μ¬μ μνλ€. kebab-caseκ° μλ calmel-caseλ‘ λμ΄μλ€. resetμ nullμ΄λ ''λΉλ¬Έμμ΄ νμ§λ§ IEλ ''λΉλ¬Έμμ΄λ§ λ¨Ήνλ€.
// μ¬λ¬ μ€νμΌμ μ μ ν λ. elt.style.cssText = "color: blue; border: 1px solid black"; // Or elt.setAttrubute("style", "color:red; border: 1px solid black"); // νΉμ μ€νμΌλ§ λ°κΏ λ elt.style.color = "blue";
Getting μ€μ§ μΈλΌμΈ μ€νμΌλ§ κ°μ Έμ¨λ€. section μ€νμΌ κ·μΉμ΄λ μΈλΆ μ€νμΌ sheetμ κ°μ λ€λ₯Έ κ·μΉ μ€νμΌμ κ°μ Έμ€μ§ μλλ€. μμμ λͺ¨λ μ€νμΌ μμλ₯Ό κ°μ Έμ€κ³ μΆλ€λ©΄
window.getComputedStyle()
λ₯Ό λμ μ¬μ©νλΌ!
Last updated
Was this helpful?