https://www.w3schools.com/cssref/css_selectors.asp
// Adding and removing children (자식노드의 추가/삭제)
Polymer.dom(parent).appendChild(node)
Polymer.dom(parent).insertBefore(node, beforeNode)
Polymer.dom(parent).removeChild(node)
Polymer.dom.flush()
// Parent and child APIs
Polymer.dom(parent).childNodes
Polymer.dom(parent).children
Polymer.dom(node).parentNode
Polymer.dom(node).firstChild
Polymer.dom(node).lastChild
Polymer.dom(node).firstElementChild
Polymer.dom(node).lastElementChild
Polymer.dom(node).previousSibling
Polymer.dom(node).nextSibling
Polymer.dom(node).textContent
Polymer.dom(node).innerHTML
// Query selector
Polymer.dom(parent).querySelector(selector)
Polymer.dom(parent).querySelectorAll(selector)
// Content APIs
Polymer.dom(contentElement).getDistributedNodes()
Polymer.dom(node).getDestinationInsertionPoints()
// Node mutation APIs (노드 변경 API)
Polymer.dom(node).setAttribute(attribute, value)
Polymer.dom(node).removeAttribute(attribute)
Polymer.dom(node).classList
var textInput = Polymer.dom(this.root).querySelector(‘#text01’);
var textInput = Polymer.dom(this.root).querySelector(‘sc-text-field’);
var textInput = this.$$(‘sc-text-field’);
var textInput = this.$$(‘#text01’);
var textInput = this.$.text01;
JavaScript
// class로 찾기
Polymer.dom(this.root).querySelectorAll(".tb-form");
// 속성으로 찾기
Polymer.dom(this.root).querySelectorAll("[name='rdoPkcType']");
// id로 찾기
Polymer.dom(this.root).querySelectorAll("#btnFltr");
// 현재모듈
me.querySelectorAll("sc-label");
this.querySelectorAll("sc-label");
JavaScript
예제)
onAddTooltip : function()
{
var me = this;
var ajax = new SCAjax();
ajax.url = "/bp/iqi/packCommon/findTwHelpList.do";
ajax.body = {tah_type_cds:["00", me.twh.tw_type_cd]};
ajax.addEventListener("response", function(event)
{
ajax.removeEventListener(event.type, arguments.callee);
var dbLabelList = event.target.lastResponse;
// IE 12부터 됨
//var labelListTWH = Array.from(me.querySelector("[validation-group='validGrpTWH']").querySelectorAll("sc-label")); // nodeList -> array
//var labelListMDL = Array.from(me.currentModule.querySelectorAll("sc-label"));
var labelListTWH = [].slice.call(me.querySelector("[validation-group='validGrpTWH']").querySelectorAll("sc-label"));
var labelListMDL = [].slice.call(me.currentModule.querySelectorAll("sc-label"));
var uiLabelList = labelListTWH.concat(labelListMDL);
for (var idx in uiLabelList)
{
var uiLabel = uiLabelList[idx];
// 도움말 중복추가 방지를 위한 기존 element 제거
var oldDiv = uiLabel.parentNode.querySelectorAll(".tooltip");
if (oldDiv.length > 0)
{
uiLabel.parentNode.removeChild(oldDiv[0]);
}
// I/F대상여부색상 초기화
uiLabel.parentNode.style.backgroundColor = "";
// 일치하는 Label찾기
var label = dbLabelList.filter(function(item, index, array)
{
return item.tah_label_nm == uiLabel.text;
}, this);
// 일치하는 Label이 있다면
if (UT.isNotEmpty(label[0]))
{
// 도움말이 있다면
if (UT.isNotEmpty(label[0].tah_help))
{
var div = document.createElement("div");
div.className = "tooltip";
var img = document.createElement("img");
img.src ="/ui/assets/img/icon_question_red_20.png";
img.style.cursor = "pointer";
img.style.marginLeft = "5px";
img.style.marginBottom = "1px";
var span = document.createElement("span");
span.className ="tooltiptext";
span.textContent = label[0].tah_help;
div.appendChild(img);
div.appendChild(span);
uiLabel.parentNode.appendChild(div);
}
// I/F수신대상 항목이라면
if (label[0].tah_if_trgt_yn == "Y")
{
uiLabel.parentNode.style.backgroundColor = "#C4DEFF";
}
}
}
});
ajax.request();
},
JavaScript