JavaScript의 DOM 노드 탐색에 대한 자세한 설명-JS 튜토리얼-php.cn

JavaScript의 DOM 노드 탐색에 대한 자세한 설명

藏色散人

풀어 주다： 2022-08-06 16:49:56

앞으로

1631명이 탐색했습니다.

이 글에서는 DOM 노드를 사용하여 페이지 요소를 얻는 방법을 주로 소개합니다. 요소 노드, 텍스트 노드, 속성 노드, 문서 노드 및 주석 노드를 포함하여 페이지 문서의 모든 것이 노드입니다. 다음은 노드를 가져오는 두 가지 주요 방법을 소개합니다.

(1) 노드 가져오기(텍스트 노드, 요소 노드 등 모든 노드 포함)

1.parentNode: 상위 노드 가져오기

2 .childNodes: 하위 노드를 가져오고, 인덱스 값을 통해 각 하위 노드를 가져옵니다

3.firstChild: 상위 노드의 첫 번째 하위 노드를 가져옵니다

4.lastChild: 상위 노드의 마지막 하위 노드를 가져옵니다

5. nextSibling: 다음 인접한 하위 노드 가져오기 A 형제 노드

6.previousSibling: 하위 노드에 인접한 이전 형제 노드 가져오기

7.attributes: 속성 node

<!DOCTYPE html>
<html>
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>由节点关系获取元素</title>
    <style>
 
    </style>
</head>
 
<body>
    <div name="div1">
        <p name=&#39;p1&#39;>文本节点</p>
        <p>2</p>
        <ul>
            <li>3</li>
            <li id="li4">4</li>
            <li>5</li>
            <li>6</li>
        </ul>
    </div>
    <section>7</section>
    <main><span>8</span><i>9</i></main>
    <script>
        //注意换行和空格也属于结点，属于文本节点，按节点关系访问时需要考虑。属性节点无须考虑。
        //1. parentNode获取div
        console.log(document.querySelector(&#39;p&#39;).parentNode);
        console.log(document.querySelector(&#39;p&#39;).parentNode.attributes[0]);
        console.log(document.querySelector(&#39;p&#39;).parentNode.nodeName); //DIV
        console.log(document.querySelector(&#39;p&#39;).parentNode.nodeValue); //null
        console.log(document.querySelector(&#39;p&#39;).parentNode.nodeType); //1 元素节点
        // 2.通过childNodes获取第一个p
        console.log(document.querySelector(&#39;div&#39;).childNodes[1]);
        console.log(document.querySelector(&#39;div&#39;).childNodes[1].firstChild.nodeName);
        console.log(document.querySelector(&#39;div&#39;).childNodes[1].firstChild.nodeType); //2 文本节点
        console.log(document.querySelector(&#39;div&#39;).childNodes[1].firstChild.nodeValue);
        // 3.firstChild获取main中的第一个子节点
        console.log(document.querySelector(&#39;main&#39;).firstChild);
        // 4.lastChild获取main中的最后一个子节点
        console.log(document.querySelector(&#39;main&#39;).lastChild);
        // 5.nextSibling获取相邻下一个兄弟元素
        console.log(document.querySelector(&#39;#li4&#39;).nextSibling.nextSibling);
        // 6.previousSibling获取相邻上一个兄弟元素
        console.log(document.querySelector(&#39;#li4&#39;).previousSibling.previousSibling);
        // 总结：除parentNode外，其他方法谨慎选择，一旦代码格式有变，就会出现错误
        // 通过nodeName获取节点名称
        //通过nodeValue获取节点值
        // 通过nodeType返回节点类型
    </script>
</body>
 
</html>

로그인 후 복사

가져오기 (2) 요소 노드 가져오기

1.parentElement: 상위 요소 노드를 가져옵니다

2.children: 하위 요소 노드를 가져오고, 인덱스 값을 통해 각 하위 요소 노드를 가져옵니다

3.firstElementChild: 상위 요소의 첫 번째 하위 요소 노드를 가져옵니다

4. lastElementChild: 상위의 마지막 하위 요소 노드를 가져옵니다

5.nextElementSibling: 인접한 다음 형제 요소 노드를 가져옵니다

6.previousElementSibling: 인접한 이전 형제 요소 노드를 가져옵니다

<!DOCTYPE html>
<html>
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>获取子元素节点</title>
</head>
 
<body>
    <div>
        <p>123</p>
        <p>456</p>
        <p>789</p>
    </div>
    <script>
        //p标签总体算一个节点，内部的“123”不算
        console.log(document.querySelector(&#39;div&#39;).childNodes);
        console.log(document.querySelector(&#39;div&#39;).childNodes.length);
        // 获取子元素节点
        console.log(document.querySelector(&#39;div&#39;).children);
        console.log(document.querySelector(&#39;div&#39;).children[1]);
        console.log(document.querySelector(&#39;div&#39;).firstElementChild);
        console.log(document.querySelector(&#39;div&#39;).firstElementChild.nextElementSibling);
        console.log(document.querySelector(&#39;div&#39;).lastElementChild);
        console.log(document.querySelector(&#39;div&#39;).lastElementChild.previousElementSibling);
        console.log(document.querySelector(&#39;div&#39;).children[1].parentElement);
    </script>
</body>
 
</html>

로그인 후 복사

관련 권장 사항: [JavaScript 비디오 튜토리얼]

위 내용은 JavaScript의 DOM 노드 탐색에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!