DOM의 노드 및 관계 속성 요약-JS 튜토리얼-php.cn

DOM의 노드 및 관계 속성 요약

PHP中文网

풀어 주다： 2017-06-21 13:20:59

원래의

1161명이 탐색했습니다.

<!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 중국어 웹사이트의 기타 관련 기사를 참조하세요!