DOM

DOM   Document  Object  Model

文档对象模型

操作HTML的节点（HTML标签）

DOM发展史

DOM0

DOM1 1998年 w3c推荐版本

DOM2 2000年 (主讲)

DOM3 2004年（主讲）

DOM4 2015年

 

1. 节点Node

   ?                             NodeName节点名字    NodeType节点类型    NodeValue节点值

   元素节点:ElementNode              标签名                 1                 null

   文本节点:TextNode                 #text                  3                 文本内容

   属性节点:attributeNode            属性名                 2                 属性值            

 

2. 快速查找节点

   document

   get获取

   Element元素

   ById通过ID

  

   （1）通过ID值获取元素节点（ID唯一）

   格式： document.getElementById(ID值); 参数必须是字符串

   let divEle = document.getElementById("F66");

   console.log(divEle);//<div>

  

   （2）通过元素名称（标签名）获取元素节点  0到多个

   格式： document.getElementsByTagName(标签名称);

   let sectionEle = document.getElementsByTagName("section");

   console.log(sectionEle[1]);//[section]

  

   (3）通过name值获取元素节点  0到多个

   格式： document.getElementsByName(name值);

   let asideEle = document.getElementsByName("F66");

   console.log(asideEle[0]);//

  

   （4）通过class值获取元素节点  0到多个

   格式： document.getElementsClassName(class值);

   let footerEle = document.getElementsByClassName("F67");

   console.log(footerEle);

   console.log(footerEle[0]);

   console.log(footerEle[1]);

  

   （5）可以通过CSS选择器来获取第1个满足条件的元素节点

   格式： document.querySelector(css选择器);

   let navEle = document.querySelector("header>nav");

   console.log(navEle);

  

   （6）可以通过CSS选择器来获取所有满足条件的元素节点

   格式： document.querySelectorALL(css选择器);

   let navEle1 = document.querySelectorAll("header>nav");

   console.log(navEle1);

   console.log(navEle1[0]);

   console.log(navEle1[1]);

  

###### DOM 节点增、删、改、查

1. 查找

   关系层次查找节点

   let spanEle1 = document.querySelector("article>.F01>p:nth-child(1)>span")

   console.log(spanEle1);

  

   查找父节点  格式：当前节点.parentNode

   console.log(`我是元素1的父节点：`,spanEle1.parentNode);

  

   查找兄弟节点

   let spanEle2 = document.querySelector("article>.F01>p:nth-child(1)>span:nth-child(2)")

   console.log(spanEle2);//元素2

  

   向前查找兄弟节点

   console.log(`我是前一个兄弟节点：`,spanEle2.previousSibling);//#text

   console.log(`我是前一个兄弟节点：`,spanEle2.previousSibling.previousSibling);//元素1

  

   向后查找兄弟节点

   console.log(`我是前一个兄弟节点：`,spanEle2.nextSibling);//#text

   console.log(`我是前一个兄弟节点：`,spanEle2.nextSibling.nextSibling);//元素3

  

   [扩展]

   let ele =spanEle2.previousSibling.nextSibling.nextSibling.previousSibling.nextSibling.nextSibling;

   console.log(ele);

  

   查找子节点

   let pEle = document.querySelector("article>.F01>p:nth-child(1)");

   console.log(pEle.firstChild);//#text

   查找最后一个子节点

   console.log(pEle.lastChild);//#text

   console.log( pEle.children);

   console.log( pEle.children[0]);

   console.log( pEle.children[1]);

   console.log( pEle.children[2]);

  

   查找第一个子元素节点

   console.log(pEle.firstElementChild);//元素1

   查找最后一个子元素节点

   console.log(pEle.lastElementChild);//元素3

  

   查找兄弟元素节点

   let spanEle2 = document.querySelector("article>.F01>p:nth-child(1)>span:nth-child(2)");

   向前查找兄弟元素节点

   console.log(`我是前一个兄弟元素节点：`,spanEle2.previousElementSibling);//元素1

  

   向后查找兄弟元素节点

   console.log(`我是后一个兄弟元素节点：`,spanEle2.nextElementSibling);//元素3

  

3. ##### 新增节点

   - 实现步骤

     ###### 1.创建元素节点

      书写格式：document.createElement(‘元素‘);

     ###### 2.创建元素内容（文本节点）

      书写格式：document.createTextNode(‘元素内容‘);

     ###### 3.新节点的存放位置

      书写格式：元素节点.appendChild(文本节点);

     插入

     书写格式：父元素.insertBefore(参1,参2);//参数1是新元素，参数2是已有元素

     删除

     书写格式：父元素.removeChild(当前元素节点);

     修改元素

     书写格式：父元素.replaceChild(参1,参2);//参1：新元素；参2：旧元素

     快速替换元素内容

     方式一：书写格式：父元素.innerText = "元素内容";//写什么就在页面显示什么

     方式二：书写格式：父元素.innerHTML = "元素内容";//能够识别HTML代码

     克隆节点

     1. 深克隆 包含复制节点的子节点

        书写格式：let 新节点 = 克隆节点.cloneNode(true);

     2. 浅克隆 只复制元素节点，其子节点不复制

        书写格式：let 新节点 = 克隆节点.cloneNode(false);

     * 属性节点

     1.查找存在的属性

     ```
  书写格式：当前节点.getAttribute("属性名");//属性值
     ```

     2.查找不存在的属性

     ```
  书写格式：当前节点.getAttribute("属性名");//null
     ```

     3.修改属性节点的值

     ```
  书写格式：当前节点.setAttribute("参1","参2");//参1：属性名  参2：新的属性值
     ```

     4.新增

     ```
  书写格式：当前节点.setAttribute("参1","参2");//参1：新的属性名  参2：新的属性值
     ```

     5.删除

     ```
  书写格式：当前节点.removeAttribute("属性名");
     ```

     6.设置属性由于class在js中是关键字，无法使用

        为了能够修改class属性，特地提供className进行设置

     ```
  书写格式：当前节点.className = "新属性值";
     ```
  
     7.设置属性由于label在js中是关键字，无法使用
  
        为了能够修改label属性，特地提供htmlFor进行设置
  
     ```
     书写格式：当前节点.htmlFor = "新属性值";
     ```
  
     8.自定义属性 以date-开头
  
     ```
     示例：
     ```
  
     ```
     //html部分
     <nav class="F67" id="F88" data-lovo="456">我是兄弟
         <p><span>1</span></p>
         <p><span>2</span></p>
         <p><span>3</span></p>
     </nav>
    
     //js部分
     let navEle = document.querySelector(".F67");
     navEle.dataset.lovo ="123";
    
     //最终<nav>中的data-lovo="123"
     ```