DOM节点的查找方式和查看设置属性节点

一.什么是DOM

文档对象模型 (DOM) 是HTML和XML文档的编程接口。它提供了对文档的结构化的表述，并定义了一种方式可以使从程序中对该结构进行访问，从而改变文档的结构，样式和内容。
DOM 将文档解析为一个由节点和对象（包含属性和方法的对象）组成的结构集合。简言之，它会将web页面和脚本或程序语言连接起来。

二.什么是DOM节点

DOM节点分为三大类: 元素节点(标签节点)、属性节点和文本节点。
属性节点和文本节点都属于元素节点的子节点。 因此操作时，需先选中元素节点，再修改属性和文本。

怎样查看元素节点

1.1通过getElermentBy找分以下四种

1.通过ID来查看元素属性

<div id="box"></div>
var o = document.getElementById("box");  //取到的就是固定的节点对象id为box的<div>

2.通过类名来查看元素属性

  <div>
       <div class="a"></div>
       <div class="a"></div>
       <div class="a">
           <p class="a"></p>
       </div>
     </div>
     <script>
        var a=document.getElementsByClassName("a")
        console.log(a)//注意通过类名找元素是一个集合想操作要取对应的索引
     </script>

运行结果

3通过名字来查看元素属性

 <div>
       <div name="a"></div>
       <div name="a"></div>
       <div name="a">
           <p name="a"></p>
       </div>
     </div>
     <script>
        var a=document.getElementsByName("a")
        console.log(a)//与类查找方式相识返回的也是一个集合
     </script>

4通过标签名来查看元素属性

<div>
       <div name="a"></div>
       <div name="a"></div>
       <div name="a">
           <p name="a"></p>
       </div>
     </div>
     <script>
        var a=document.getElementsByTagName("div")
        console.log(a)
     </script>//返回的是页面所有div节点

1.2通过querySelector系列方法

querySelector找直接输入要找的标签，#id,.class名

 <div class="box">
    <ul id="ul1">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
   </div>
     <script>
        var box=document.querySelector(".box")；//如果有类名重复只取第一个
        var ul1=document.querySelector("#ul1")；
        var lip=document.querySelector("li")；//如果有标签名重复只取第一个
        console.log(box,ul1,lip);
     </script>

运行结果如下

document.querySelectorAll找所有

<div class="box">
   <ul id="ul1">
       <li></li>
       <li></li>
       <li></li>
       <li></li>
       <li></li>
   </ul>
   <div class="box"></div>
   <div class="box"></div>
   <div class="box"></div>
  </div>
    <script>
       var box=document.querySelectorAll(".box")//注意找到的是所有类名为box的集合
       var ul1=document.querySelectorAll("#ul1") 虽然只有一个也是一个集合
       var lip=document.querySelectorAll("li") 找到所有li的标签
       console.log(box,ul1,lip);
    </script>

运行结果如下 在控制台分别输出三个集合

2.查看\设置属性节点

2.1查看属性节点：.getAttribute(“属性名”);

 <div id="box"  style="width: 300px;height: 400px;background: red;">
  </div>
     <script>
         var o=document.querySelector("#box");
       var   s=  o.getAttribute("style")
         console.log(s)

运行如下

2.2设置属性节点：.setAttribute(“属性名”,“属性值”);

//使用setAttribute设置class和style。
document.getElementById("box").setAttribute("class","class1");
document.getElementById("box").setAttribute("style","color:red;");
//使用.className添加一个class选择器。
document.getElementById("box").className = "class1";
// 使用.style.样式 直接修改单个样式。 注意样式名必须使用驼峰命名法。
document.getElementById("box").style.fontSize = "18px";
// 使用.style 或 .style.cssText 添加一串行级样式：
// IE不兼容
document.getElementById("box").style = "color:red;"; 
//所有浏览器兼容
document.getElementById("box").style.cssText = "color:red;";

三、层次节点操作

childNodes： 获取当前节点的所有子节点（包括元素节点和文本节点）。
children： 获取当前节点的所有元素子节点（不包含文本节点）。
parentNode: 获取当前节点的父节点。
firstChild： 获取第一个子节点，包括回车等文本节点；
firstElementChild： 获取第一个元素节点。 (不含文本节点)；
lastChild： 获取最后一个子节点，包括回车等文本节点；
lastElementChild： 获取最后一个子节点，不含文本节点；
previousSibling： 获取当前节点的前一个兄弟节点，(包括文本节点)；
previousElementSibling： 获取当前节点的前一个元素兄弟节点；
nextSibling：获取当前节点的后一个兄弟节点，(包括文本节点)；
nextElementSibling：获取当前节点的后一个元素兄弟节点；
attributes: 获取当前节点的所有属性节点。 返回数组格式