이와 같이 구성된 HTML에서 원하는 특정 요소를 얻기위한 올바른 선택기 문자열은 무엇입니까?

파한 셔길 안사리
<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 선택기를 읽고 있습니다 .

Artjom B.

작업 선택자

예, 이러한 선택기는 모두 다르지만 올바른 것을 선택하십시오. 이 중복성 / 유연성은 약간 다른 마크 업이 나올 때 CSS 선택기에 필요합니다.

작동하지 않는 선택자

legend > inputlegend의 부모가 아니기 때문에 작동하지 않습니다 input. 그들은 형제 자매입니다. 사용할 수 있습니다 legend ~ input.

fieldset#navFieldset를 선택 fieldset했지만 input자녀에게 관심이있는 것 같습니다 . 당신은 아이 선택기를 사용할 수 있습니다 >: fieldset#navFieldset > input당신이 descendend 선택 사용하는 것과 동일한 방법으로 (공간) fieldset#navFieldset input.

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정
0

몇 마디 만하겠습니다

0리뷰
로그인참여 후 검토

관련 기사

Related 관련 기사

뜨겁다태그

보관