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"
     ```