< h1>">
DOM의 노드 및 관계 속성 요약
- PHP中文网원래의
- 2017-06-21 13:20:591101검색
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="div1">
<h1>培训课程</h1>
<ul>
<li>html+css</li>
<li>javascript</li>
<li>正式课</li>
<li>移动端课程</li>
<li>node.js正式课</li>
</ul>
</div>
<script>//获取关系的属性var oDiv = document.getElementById("div1");
console.log(oDiv.childNodes);//获取所有的子节点console.log(oDiv.children);//获取所有的元素子节点</script>
</body>
</html>노드: 페이지의 노드 태그, 텍스트, 댓글. . . 모두 노드입니다
childNodes: 모든 하위 노드 가져오기
children: 모든 요소 하위 노드 가져오기
parentNode: 상위 노드 가져오기
previousSibling: 이전 형제 노드 가져오기
nextSibling: 다음 남동생 노드 가져오기
firstChild: 모든 하위 노드 중 첫 번째 노드 가져오기
lastChild: 모든 하위 노드 중 마지막 노드 가져오기
js에서 마스터해야 하는 노드 유형 :
in in-in-22 in in in in in in in in in in in in in the details tag name in in in in in in in in in in. 9 '#document'방법: 시뮬레이션 자식 방법은 지정된 요소 아래의 요소 하위 노드를 얻는 데 사용됩니다.
요소 가져오기 모든 형제 요소 노드
<em><em><span style="color: #008000"> / * getMyChildren:获取制定元素下的所有的元素节点<em><em><em> * @parameter：</em></em></em> <br> * ele:我们要获取谁下面的，就把谁传过来<br> tagName:获取元素的类型
* @return:
* 我们最后获取的元素子节点
* by xxxxxxxxx
* </span><span style="color: #008000">*/</span><span style="color: #0000ff">function</span><span style="color: #000000"> getMyChildren(ele,tagName){</span><span style="color: #0000ff">var</span> ary = [],nodes =<span style="color: #000000"> ele.childNodes;</span><span style="color: #0000ff">for</span>(<span style="color: #0000ff">var</span> i = 0;i<nodes.length;i++<span style="color: #000000">){</span><span style="color: #0000ff">var</span> cur =<span style="color: #000000"> nodes[i];</span><span style="color: #0000ff">if</span>(cur.nodeType===1<span style="color: #000000">){<br> if(tagName){<br> if(cur.nodeName.toLowerCase===tagName.toLowerCase){<br> ary.push(cur)<br> }<br> <br> }else{<br></span></em></em>
위 내용은 DOM의 노드 및 관계 속성 요약의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：소규모 데모의 "드래그 앤 드롭" 효과 구현다음 기사：소규모 데모의 "드래그 앤 드롭" 효과 구현