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

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”)，将所有元素结点放到一个数组中返回。

 <butt