DOM 가 져 오기 요소, 가 져 오기 및 설정 속성
4134 단어 JavaScriptdom
document.getElementsByTagName("*").length;2. id 속성 값 이 purchase 인 요소 가 몇 개의 목록 항목 을 포함 하고 있 는 지 알 고 싶다 면,
var shopping=document.getElementById("purchases");
var items=shopping.getElementsByTagName("*");3. 여러 개의 클래스 이름 을 지정 하려 면 문자열 매개 변수 에서 빈 칸 으로 클래스 이름 을 구분 하면 됩 니 다.
document.getElementsByClassName("important sale").length;getElement by ClassName 을 지원 하지 않 는 브 라 우 저 는 기 존의 DOM 으로 만 이 기능 을 수행 할 수 있 습 니 다.
<body>
<h1>What to buy</h1>
<p title="a gentle reminder">Don't forget to buy this stuff</p>
<ul id="purchases">
<li class="important">A tin of beans</li>
<li class="sale">A tin of beans2</li>
<li class="sale">A tin of beans3</li>
</ul>
<script>
function getElementsByClassName(node,classname){
if(node.getElementsByClassName){
return node.getElementsByClassName(classname);
}
else{
var results=new Array();
var elems=node.getElementsByTagName("*");
for(var i=0;i<elems.length;i++){
if(elems[i].className.indexOf(classname)!=-1){
results[results.length]=elems[i];
}
}
return results;
}
}
var shopoing=document.getElementById("purchases");
var sales=getElementsByClassName(shopoing,"sale");
</script>
</body>4. 문서 하나 가 노드 트 리 입 니 다.
5. 노드 는 서로 다른 유형, 요소 노드, 속성 노드, 텍스트 노드 로 나 뉜 다.
6. getElement ById 는 문서 의 특정한 요소 노드 에 대응 하 는 대상 을 되 돌려 줍 니 다.
7. 각 노드 는 하나의 대상 이다
8. 요 소 를 얻 으 면 getAttribute 로 각 속성 을 가 져 오고 setAttribute 로 속성 노드 의 값 을 변경 합 니 다.
getAttribute 방법 은 document 대상 에 속 하지 않 기 때문에 document 대상 을 통 해 호출 할 수 없고 요소 노드 대상 을 통 해 만 호출 할 수 있 습 니 다.
<body>
<h1>What to buy</h1>
<p>Don't forget to buy vegetable</p>
<p title="a gentle reminder">Don't forget to buy this stuff</p>
<ul id="purchases">
<li>A tin of beans</li>
<li>A tin of beans2</li>
<li>A tin of beans3</li>
</ul>
<!-- ， getAttribute ， setAttribute 。-->
<script type="text/javascript">
var paras=document.getElementsByTagName("p");
for(var i=0;i<paras.length;i++){
var titleText=paras[i].getAttribute("title");
if(titleText){ //if(titleText!=null)
alert(titleText);
}
}
</script>
</body>9.
setAttribute 도 요소 노드 에 만 사 용 됩 니 다. 만약 에 setAttribute 가 하나의 속성 이 있 는 요소 노드 에 사용 하면 이 속성의 값 이 덮어 집 니 다. 만약 에 이 속성 이 존재 하지 않 는 다 면 setAttribute 가 실제 적 으로 두 가지 작업 을 완 성 했 음 을 나타 냅 니 다. 먼저 이 속성 을 만 든 다음 에 값 을 설정 합 니 다.
<script type="text/javascript">
var shopping=document.getElementById("purchases");
shopping.setAttribute("title","a list of goods");
</script>10. 통과
setAttribute 가 문 서 를 수정 한 후에 도 브 라 우 저의 소스 코드 옵션 을 통 해 문서 의 소스 코드 를 볼 때 보 이 는 것 은 변 하기 전의 속성 값 입 니 다. 즉, setAttribute 가 수정 한 것 은 문서 자체 의 소스 코드 에 반영 되 지 않 습 니 다. 이 표 의 다른 현상 은 DOM 작업 모드 에서 비롯 됩 니 다. 문서 의 정적 내용 을 먼저 불 러 오고 동적 으로 새로 고침 하고 움 직 이 는 것 입 니 다.상태 리 셋 은 문서 의 정적 내용 에 영향 을 주지 않 고 페이지 내용 을 리 셋 하지만 브 라 우 저 에서 페이지 를 리 셋 할 필요 가 없습니다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
기초 정리 - 1문자 (String) 숫자 (Number) 불린 (Boolean) null undefined 심볼 (Symbol) 큰정수 (BigInt) 따옴표로 묶어 있어야 함 Not-A-Number - 숫자 데이터 / 숫자로 표...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
