js知识整理(四)----Dom对象获取节点的方法

最新推荐文章于 2023-06-13 19:53:02 发布

原创最新推荐文章于 2023-06-13 19:53:02 发布 · 536 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

js 专栏收录该内容

9 篇文章

订阅专栏

本文介绍了JavaScript中的DOM对象及其操作，包括DOM对象的概念、节点类型与属性，如nodeName、nodeType和nodeValue。详细讲解了如何获取元素节点对象，如通过getElementById、getElementsByTagName、getElementsByClassName以及通过父节点、子节点和兄弟节点的关系来间接获取元素。

1.什么是DOM对象

全称是：Document Object Model, 即：文档对象模型，它定义了操作文档对象的接口

2.DOM节点分类node

(1)结点的概念

在DOM模型中，整个文档就是由层次不同的多个节点组成，可以说结点代表了全部内容

(2)结点的类型

元素结点、文本结点和属性结点

<font id=“font1” color=“red”>hello DOM!</font> 
//font:元素结点
//id,color:属性结点
//hello DOM! :文本节点

文本节点和属性结点都看作元素结点的子结点
我们一般所说的结点指的就是元素结点。

(3)节点的基本属性:(注意结点类型不同,返回值不一样)

nodeName:

元素结点返回结点类型(即，标记名称)
属性结点返回undefined
文本节点返回"#text"

nodeType

元素节点返回1，属性节点返回2，文本节点返回3

nodeValue

元素节点返回null, 属性节点返回undefined, 文本结点返回文本值

3.DOM操作的内容

   <p id="p1"> 百日依山尽 </p>
    <p class="p2">黄河入海流 </p>
    <p class="p2"> 欲穷千里目 </p>
    <p> 更上一层楼 </p>

A、获得元素节点对象

1.直接引用结点

(1).使用document.getElementById()引用指定id的结点

<button onclick="getNodeById()">通过id获取节点 </button>
  function getNodeById(){
          // 拿到节点 
          var pNode = document.getElementById("p1");
          console.log(pNode);
          console.log(pNode.nodeName) // p
      }

(2).使用document.getElementsByTagName(“a”)，将所有元素结点放到一个数组中返回。

 <button onclick="getNodeByTag()">通过name属性获取节点 </button><br>
 
        function getNodeByTag(){

            // 可以获取所有的 TAG 的节点 
            // 返回值是数组 
            var pNodes = document.getElementsByTagName("p");

            for(var i = 0 ; i < pNodes.length;i++){
                var pNode = pNodes[i];
                console.log(pNode);
                console.log(pNode.nodeName) // p
            }
        }

(3).使用document.getElementsByName(“abc”)，将所有name属性为”abc”的元素结点放到一个数组中返回

     name:<input type="text"  name="name"><br>
   性别 <input type="radio" value="男" name="sex">男<br>
   <input type="radio" value="女" name="sex">女<br>
   <input type="radio" value="不详" name="sex">不详<br>

    <button onclick="getNodeByName()">通过name获取节点 </button><br>
     function getNodeByName(){
            
            // 可以获取name 属性值 节点 
            // 返回值是数组 
            var radios = document.getElementsByName('sex');
            for(var i = 0 ; i < radios.length;i++){
                var radio = radios[i];
                console.log(radio);
                console.log(radio.nodeName) // input
            }
        }

(4).使用document.getElementsByClassName(“abc”)将所有class属性为”abc”的元素结点放到一个数组中返回。

 <button onclick="getNodeByClassname()">通过class名称获取节点 </button><br>
 
        function getNodeByClassname(){

            // 可以获取所有的 class="p2"的节点 
            // 返回值是数组 
            var pNodes = document.getElementsByClassName("p2");

            for(var i = 0 ; i < pNodes.length;i++){
                var pNode = pNodes[i];
                console.log(pNode);
                console.log(pNode.nodeName) // p
            }
        }

2.DOM间接获得元素对象

 
    <div id="parent">
        <p id="p1"> 百日依山尽 </p>
        <p id="p2">黄河入海流 </p>
        <p class="p2"> 欲穷千里目 </p>
        <p> 更上一层楼 </p>
    </div>

(1).引用子结点

 <button onclick="getNodeBySon()"> 通过子节点获取父节点 </button>
 // 通过子节点 获取父节点 
        function getNodeBySon(){
            // 拿到子节点 
            var p1Node = document.getElementById("p1");

            // parentNode 获取父节点 
           var parentNode = p1Node.parentNode;
           console.log(parentNode);
        }

(2).引用父节点

父节点有对应的方法可以获取不同位置的子节点
firstChild 拿到第一个孩子会包含空格
lastChild 拿到最后一个孩子会包含空格

firstElementChild; 拿到第一个元素不会包含空格
lastElementChild 拿到最后一个元素不会包含空格

children 所有的孩子不包含空节点
childNodes 返回会是所有子节点是数组 (包含空格)
代码示例:

 <button onclick="getNodeByParent()"> 通过父节点获取子节点 </button>
 function getNodeByParent(){

            // 拿到父节点 
            var divNode = document.getElementById("parent");

            // 通过div拿到子节点 
            var pNodes = divNode.childNodes; // 返回会是所有子节点是数组 (包含空格)

            for(var i = 0 ; i <  pNodes.length; i ++){
                // 拿到节点 打印 
                var pNode = pNodes[i];
                console.log(pNode.nodeName);
            }
  }

(3). 引用兄弟结点
注意:nextElementSibling 只有元素,不包含空格
nextSibling 如果有空格会包含空格

<button onclick="getNodeByBrohter()"> 通过节点获取兄弟节点 </button>
 function getNodeByBrohter(){

            // 拿到节点 p2
            var p2Node = document.getElementById("p2");

            // 下一个兄弟节点 (只有元素 不包含 空格 )
            var p2Next = p2Node.nextElementSibling;
            console.log(p2Next);
            // 下一个兄弟节点 (如果有空格 会包含空格)
            var p2Next2 = p2Node.nextSibling;
            console.log(p2Next2);

            // p2Node.previousSibling 获取上一个兄弟节点 
        }