1Q74

1. Description querySelectorAll("[name~='value']") 속성값의 문자열과 부분 매칭되면서 공백으로 구분되는 문자열을 갖고 있는 Element를 찾는다. ※ 【jQuery/Selector #5】Attribute Contains Word Selector [name~=”value”]의 Native버전입니다. 2. Example 「영문이름에 'of'가 들어가 있고 공백으로 단어 구분이 되는 나라」버튼을 클릭했을 경우, 나라 이름에 'of'가 들어가 있는 요소들을 찾아 border스타일을 dotted로 바꾸고, 버튼을 클릭할 때마다 스타일을 토글시킨다. 「영문이름에 공백이 들어가 있지 않은 나라」버튼을 클릭했을 경우, 나라 이름에 'in'이 들어가 있는 요소들을 찾아 배경색을 ..

1. Description querySelectorAll("[name*='value']") 속성값의 부분 문자열과 매칭되는 Element들을 선택한다. ※ jQuery Attribute Contains Selector [name*=”value”]의 Native버전입니다. 2. Example #1버튼을 클릭하면 name에 'va'가 들어가 있는 Element를 찾아서 텍스트의 색상을 파랑으로 변경하고 'is great'이라는 문자열을 추가한다. 버튼을 클릭할 때마다 텍스트의 오른쪽에 클릭한 횟수가 표시된다.

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를 찾아서 배경색을 변경한다.

1. Description querySelectorAll("*") 부모 Element하위에 있는 모든 자식 Element를 찾는다. 2. Example #1버튼을 클릭하면 태그 하위의 모든 Element를 찾아서, 태그이름과 텍스트를 표시한다. document.getElementById("_1q74-example").querySelectorAll("*")