<body><form>
<fieldset>
<legend>Current Node Information</legend>
<label>Node Name: <input type="text" id="nodeNameField"></label><br>
<label>Node Type: <input type="text" id="nodeTypeField"></label><br>
<label>Node Value: <input type="text" id="nodeValueField"></label><br>
<label>Child Element Count: <input type="text" id="childElementCountField"></label>
</fieldset>
<fieldset id="navFieldset">
<legend>Movement Controls</legend>
<input type="button" value="Parent" data-prop="parentNode" id="parentBtn">
<input type="button" value="First Child" data-prop="firstChild" id="firstChildBtn">
<input type="button" value="Reset to Root" data-prop="root" id="rootBtn">
</fieldset>
</form></body>
선택기 (querySelectorAll 함수 내부의 문자열 매개 변수)와 잘 작동합니다.
window.onload = function () {
nodeMove.currentElement = document.documentElement;
var elements = document.querySelectorAll("fieldset#navFieldset input");
for (var i = 0, len = elements.length; i < len; i++) {
elements[i].onclick = function () { nodeMove(this) };
}
update(nodeMove.currentElement);
}
아래는 지금까지 시도한 선택기 목록입니다.
#navFieldset input // this works fine
legend > input // ERROR
#navFieldset > input // this works fine
fieldset > input // this works fine
fieldset#navFieldset // ERROR
필드 셋 내의 모든 버튼을 선택해야합니다. 로 표시된 경우에 this woks fine
특정 선택자에 차이가 있는지 알고 싶습니다 . 또한 사례가 ERROR
잘못된 것으로 표시되는 이유는 무엇입니까? 이유를 알고 싶습니다. 이 리소스 에서 CSS 선택기를 읽고 있습니다 .
예, 이러한 선택기는 모두 다르지만 올바른 것을 선택하십시오. 이 중복성 / 유연성은 약간 다른 마크 업이 나올 때 CSS 선택기에 필요합니다.
legend > input
legend
의 부모가 아니기 때문에 작동하지 않습니다 input
. 그들은 형제 자매입니다. 사용할 수 있습니다 legend ~ input
.
fieldset#navFieldset
를 선택 fieldset
했지만 input
자녀에게 관심이있는 것 같습니다 . 당신은 아이 선택기를 사용할 수 있습니다 >
: fieldset#navFieldset > input
당신이 descendend 선택 사용하는 것과 동일한 방법으로 (공간)
fieldset#navFieldset input
.
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다