HTML에서 항목은 무엇을 의미합니까?
- 醉折花枝作酒筹원래의
- 2021-06-04 15:14:3810368검색
HTML에서 항목은 노드 목록에서 지정된 인덱스에 있는 노드를 의미하며 구문 형식은 "document.element object.childNodes.item(value)"입니다. 노드는 소스코드에 나타나는 순서대로 정렬되며, 노드 목록의 인덱스는 0부터 시작됩니다.
이 튜토리얼의 운영 환경: Windows7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.
javascript에 jQ의 eq()와 유사한 기능이 있다는 것을 전혀 몰랐습니다. 알고 보니 네이티브 javascript의 item()에도 비슷한 기능이 있는 것으로 나타났습니다.
네이티브 자바스크립트이므로 먼저 children과 childNodes의 차이점을 알아보겠습니다. :
1, childNodes: HTML 노드, 모든 속성 및 텍스트 노드를 포함하여 지정된 요소의 하위 요소 컬렉션을 반환하는 표준 속성입니다. nodeType을 통해 어떤 유형의 노드인지 결정할 수 있습니다. nodeType==1이 요소 노드이고, 2가 속성 노드이고, 3이 텍스트 노드인 경우에만 가능합니다.
2, children: 지정된 요소의 하위 요소 컬렉션을 반환하는 비표준 속성입니다. 그러나 이는 HTML 노드만 반환하고 텍스트 노드도 반환하지 않습니다. 표준 DOM 속성은 아니지만 innerHTML 메서드와 같은 거의 모든 브라우저에서 지원됩니다.
예제
요소의 첫 번째 하위 노드를 반환합니다.
document.body.childNodes.item(0);
테스트 코드: 테스트할 w3c 주소
<!DOCTYPE html>
<html>
<body>
<p id="p1">
<p class="demo">点击按钮来获得 body 元素0个子节点的名称。</p>
<p class="demo">点击按钮来获得 body 元素1个子节点的名称。</p>
<p class="demo">点击按钮来获得 body 元素2个子节点的名称。</p>
<p class="demo">点击按钮来获得 body 元素3个子节点的名称。</p>
</p>
<p id="demo"></p>
<button onclick="myFunction()">试一下</button>
<script>
function myFunction()
{
var x = document.getElementById("demo");
var p1 = document.getElementById("p1");
x.innerHTML = p1.childNodes.item(3).nodeName;
//x.innerHTML = p1.children.item(1).nodeName; //children得到的是元素节点
}
</script>
</body>
</html>다음은 item()의 사용법을 설명합니다.
정의 및 사용법
item() 메서드 노드 list 지정된 인덱스에 있는 노드입니다.
다음 두 구문은 동일한 결과를 생성합니다.
document.body.childNodes.item(0); document.body.childNodes[0];
권장 학습: html 비디오 튜토리얼
위 내용은 HTML에서 항목은 무엇을 의미합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!