찾다

집 >웹 프론트엔드 >JS 튜토리얼 >Jjavascript 학습 실습 사례(개발 시 흔히 사용되는)_javascript 기술

Jjavascript 학습 실습 사례(개발 시 흔히 사용되는)_javascript 기술

WBOY
WBOY원래의
2016-05-16 17:52:13995검색

요소의 텍스트 콘텐츠를 반복하는 사용자 정의 함수
이 함수는 HTML 및 XML DOM 문서에서 제대로 작동하는지 확인할 수 있습니다. 이 기능을 사용하면 모든 요소의 텍스트 콘텐츠를 가져올 수 있습니다.
텍스트 콘텐츠를 반복합니다. 요소

코드 복사 코드는 다음과 같습니다.



요소의 텍스트 콘텐츠를 반복하는 함수< ;/제목> <br></head> <br><div id="test"> <br><li><a href ="#">태그 1</a></li> <br><li><a href="#">태그 2</a></li> <li><a href="#">a태그 3</a></li> <br><li> <a href="#">a태그 4</a>< /li> <br></ul> <br><script type="text/javascript"> <br><!-- <BR>함수 텍스트(e) { <BR>/ /요소가 전달되면 해당 하위 요소를 계속 순회하고, 그렇지 않으면 배열로 간주됩니다. <BR>e=e.childNodes || e; 🎜>//모든 하위 노드 탐색 <BR>for(var i=0;i<e.length;i ){ <BR>if(e[i].nodeType!=1){//다음이 아닌 경우 요소 노드에 해당 텍스트 값을 추가합니다.<BR>t =e[i].nodeValue "<br>" <br>}else{ <br>t =text(e[i].childNodes); // 그렇지 않으면 계속해서 재귀적으로 호출 <br>} <br>} <br>return t; <br>} <br>var obj=document.getElementById('test') <br>var text=text(obj); >document.write(텍스트); <br></script> <br></html> 일반적으로 DOM 문서를 순회하기 위해 이전Sibling, nextSibling, firstChild, lastChild 등을 사용하지만, 일반적인 상황에서는 텍스트 노드를 순회할 필요가 없습니다. 따라서 여기서는 여러 사용자 정의 함수를 사용하여 이전Sibling, nextSibling, firstChild 및 lastChild를 캡슐화하고 순회된 텍스트 노드를 건너뛰고 요소 노드를 직접 얻을 수 있습니다. <br> 노드를 찾기 위한 여러 대체 함수 <br> <br><br><br><br>코드 복사<br><br><br> 코드는 다음과 같습니다.<br><div class="codebody" id="code41529"> <br><html> <br><head> <br><meta http-equiv="Content-type" content="text/html;charset=gb2312"> title>previousSibling, nextSibling, firstChild, lastChild 및 parentNode에 대한 대체 함수



대부분의 경우 인접한 텍스트가 아닌 DOM 요소를 탐색해야 합니다.

따라서 previousSibling, nextSibling, firstChild, lastChild 및 parentNode



< script type="text/javascript"> ;
var obj=document.getElementById('test');
document.write("nextSibling을 사용하여 다음 형제 노드를 반환합니다. div 요소, ① 노드 유형: " obj .nextSibling.nodeType "②노드 이름:" obj.nextSibling.nodeName "
");
document.write("다음 형제를 반환하려면 사용자 정의 next 함수를 사용하십시오. div 요소의 요소, ① 노드 유형 :" next(obj).nodeType "②노드 이름:" next(obj).nodeName "
");
document.write("다음의 첫 번째 하위 노드를 사용합니다. firstChild가 반환한 div 요소, ① 노드 유형: " obj.firstChild.nodeType "② 노드 이름: " obj.firstChild.nodeName "
");
document.write("다음을 사용하여 반환된 첫 번째 div 요소 사용자 정의 첫 번째 함수 하위 요소, ① 노드 유형: " first(obj).nodeType " ② 노드 이름: " first(obj).nodeName "
");
document.write("다음의 마지막 항목 사용 lastChild가 반환한 div 요소 자식 노드, ① 노드 유형: " obj.lastChild.nodeType " ② 노드 이름: " obj.lastChild.nodeName "
");
document.write("div 반환됨: 사용자 정의 마지막 함수 요소의 마지막 하위 요소, ① 노드 유형: " last(obj).nodeType " ② 노드 이름: " last(obj).nodeName "
");
//--> ;




양식 객체를 얻는 7가지 방법



코드 복사
코드는 다음과 같습니다.



양식 개체를 얻는 7가지 방법<br> <br> 🎜><form name="myform"> <br><input type="text" value="양식 개체를 얻는 7가지 방법" name="test"> <br></form> ><script type="text/javascript"><!-- <BR>document.write("방법 1:" document.myform.test.value "<br>") ;// 자주 사용됩니다<BR>document.write("방법 2:" document.forms[0].test.value "<br>");//아래 첨자 인덱스를 통해 액세스되며 더 일반적으로 사용됩니다<BR>document.write(" 방법 3:" document.forms['myform'].test.value "<br>"); //방법 3과 4는 전환될 수 있습니다. 이는 js가 객체에 액세스하기 위해 배열을 사용할 수 있다는 사실 때문입니다. 액세스를 위해 <BR>document.write("방법 4:" document.forms.myform.test.value "<br>") <BR>document.write("방법 5:" document['myform '].test.value "<br>"); <BR>document.write("방법 6:" document.forms.item(0).test.value "<br>");//참고 예 item(), item[] <BR>document.write("방법 7:" document.forms.item('myform').test.value "<br>")//-- > ; <BR></script> <BR></body> <BR></html> <BR><BR> <BR>모두 선택, 선택 반전 기능을 구현합니다. 없음 선택 취소<BR> </script>


코드 복사 코드는 다음과 같습니다.
< ;title>모두 선택, 선택 취소


모두 선택>
모두 선택 취소
반전




마우스를 위로 올리면 하위 항목 목록이 표시됩니다




코드 복사

코드는 다음과 같습니다.

显示隐藏菜单

<머리>
操제작菜单
<스타일>
li{
목록 스타일:없음;
}
#menu ul li{
float:left;
너비:75px;
높이:30px;
텍스트 정렬:가운데;
}
#submenu{
clear:both;
}
#submenu ul li{
배경:#888;
폭:236px;
}
#submenu ul li a{
color:#fff;
텍스트 장식:없음;
}
.highlight{
배경:#888;
}


<본문>







复代代码
代码如下: 코드 보기
<머리>
遍历문서文档对象的所有属性

<본문>





동일한 방식, 우리는 같은 방식으로 창을 열었습니다.
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：JavaScript_javascript 기술에 대한 자세한 분석다음 기사：JavaScript_javascript 기술에 대한 자세한 분석

관련 기사

더보기