JavaScript-05 DOM编程 全网最最 详细最全面最易懂的

一.DOM基本介绍

1.1 什么是DOM  

文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标记语言

（HTML或XML）的标准编程接口。

W3C已经定义了一系列的DOM接口，通过这些DOM接口可以改变网页的内容、结构和样式。

1.2 DOM树（家族谱）

当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model），HTML DOM 模型

被结构化为对象树：

HTML DOM是HTML的标准对象模型和编程接口。其定义了：

• 作为对象的HTML元素
• 所有HTML元素的属性
• 访问所有的HTML元素的方法
• 所有HTML元素的事件

文档：一个页面就是一个文档，DOM中使用document表示

元素：页面中所有的标签都是元素，DOM中使用 element 表示

节点：网页中所有的内容都是节点（标签，属性，文本，注释等），DOM中用 node 表示

注意：DOM把以上内容都看作为对象

二.基本属性与方法

2.1  属性

• nodeName：   返回节点的名称，依据其类型。
• nodeType：    返回节点的类型。
• attributes：     返回元素的属性。
• childNodes：   返回元素的子节点的 NodeList。
• firstChild：      返回元素的首个子节点。
• lastChild：      返回元素的最后一个子节点。
• parentNode： 返回元素的父节点。
• nextSibling：  返回元素之后紧跟的节点。
• previousSibling：返回元素之前紧随的节点。
• textContent：   设置或返回元素及其后代的文本内容。
• innerTest：       设置或返回元素后代的文本内容。
• innerHTML：    设置或返回元素后代的内容。

2.2 方法

• hasAttribute(name)：返回元素是否拥有指定的属性。
• hasAttributes()：返回元素是否拥有属性。
• hasChildNodes()：返回元素是否拥有子节点。
• createAttribute(node)：创建属性节点。
• createElement(node)：创建元素节点。
• createTextNode(node)：创建文本节点。
• appendChild(node)：向节点的子节点列表末尾添加新的子节点。
• cloneNode(include_all:true,false)：克隆节点。
• removeAttribute(name)：删除指定的属性。
• removeChild(node)：删除子节点。
• replaceNode(newNode)：替换节点。[仅IE]
• replaceChild(newNode, oldNode)：替换子节点。
• getElementById(id)：找到具有指定id的子孙元素。[HTML DOM]
• getElementsByName(name)：找到具有指定name的子孙元素。[HTML DOM]
• getElementsByTagName(name)：找到具有指定标签名的子孙元素。
• getAttribute(name)：返回属性的值。
• setAttribute()：添加新属性。

三.查找HTML DOM元素

HTML DOM能够通过JavaScript进行访问（也可以通过其他编程语言）。在DOM 中，所有HTML元素都被定义为对象。我们可以通过JavaScript 对这些对象操作，改变HTML元素的内容。

2.1 getElementById(）

使用getElementByID（）方法可以获得带ID的元素对象

<div id="oDiv">今天你真棒！</div>
<script type="text/javascript">
var oDiv = document.getElementById('oDiv');
console.log(oDiv)
</script>

2.2. getElementsByTagName()

使用getElementsByTagName()方法可以返回带有指定标签名的对象集合。

document.getElementsByTagName('标签名')

注意事项：

• 因为得到的是一个对象的集合，所以想要操作里面的元素 就需要遍历
• 得到元素对象是动态

还可以获取某个元素（父元素）内部的所有指定标签的子元素。

element.getElementsByTagName('标签名');

注意：父元素必须是单个对象（必须指明是哪一个元素的对象）。获取的时候不包括父元素自己。

2.3  getElementsByClassName()

getElementsByName() 方法可返回带有指定名称的对象的集合。

该方法与 getElementById() 方法相似，但是它查询元素的 name 属性，而不是 id 属性。

另外，因为一个文档中的 name 属性可能不唯一（如 HTML 表单中的单选按钮通常具有相同的 name 属

性），所有 getElementsByName() 方法返回的是元素的数组，而不是一个元素。

演示示例：

function s_input(){
  var aInput=document.getElementsByName("season");
  var sStr="";
  for(var i=0;i<aInput.length;i++){
  sStr+=aInput[i].value+"<br />";
  }
document.getElementById("s").innerHTML=sStr;
}

  四 .改变HTML元素（内容）

五. DOM节点操作介绍

5.1 节点概述

• 网页中的所有内容都是节点（标签、属性、文本、注释等等），在DOM中，节点使用Node来表示。
  
• HTML DOM树中的所有节点均可通过JavaScript进行访问，所有HTML元素（节点）均可被修改，也可以创建或删除。
  

一般的，节点至少拥有nodeType(节点类型)、nodeName（节点名称）和nodeValue（节点值）这三个基本属性

• 元素节点 nodeType为1
  
• 属性节点nodeType为2
  
• 文本节点nodeType为3（文本节点包含文字、空格、换行等）
  

【总结】我们在实际开发中，节点操作主要操作的是"元素节点"。

5.2节点的作用

获取页面元素。

• 利用DOM提供的方法获取元素

• document.getElementById()
  
• document.getElementsByTagName()
  
• document.querSelector等
  
• 逻辑性不强、繁琐
  

• 利用节点层级关系获取元素

• 利用父子兄弟节点关系获取元素
  
• 逻辑性强，但兼容性差
  

5.3 节点层级

5.3.1 父级节点 【node.parentNode】

利用DOM树可以把节点划分为不同的层级关系，常见的是父子兄层级关系

• parentNode属性可返回某节点的父节点，注意是最近的一个父节点
  
• 如果指定的节点没有父节点则返回null
  

5.3.2 子节点【parentNode.childNodes （标准）】

parentNode.childNodes返回包括指定节点的子节点的集合，该集合为即时更新的集合

注意：返回值里面包括了所有的子节点，包括元素节点，文本节点等。

如果想到获得里面的元素节点，则需要专门处理，所以我们一般不提倡使用childNodes

var ul = document.querySelector('ul');
for(var i = 0; i < ul.childNodes.lenth; i++) {
    if(ul.childNodes[i].nodeType == 1) {
    //ul.childNodes[i] 是元素节点
    console.log(ul.childNodes[i]);
    }
  }

5.3.3  兄弟节点

node.nextSibling

nextSibling返回当前元素的下一个兄弟节点，找不到则返回null，同样，也是包括所有节点

node.previousSibling

previousSiblin返回当前元素的上一个兄弟节点，找不到则返回null，同样，也是包括所有节点

特指元素节点

node.nextElementSibling

nextElementSibling返回当前元素下一个兄弟元素节点，找不到则返回null

node.previousElementSibling

previousElementSibling返回当前元素上一个兄弟节点找不到就返回null

5.4 节点操作

5.4.1 创建节点

document.createElement(‘tagName’)

document.createElement()方法创建由tagName指定的HTML元素。因为这些元素原先不存在是根据我们的需求动态生成的，所有我们也称为动态创建元素节点

5.4.2 添加节点

node.appendChild(child)

node.appendChild() 方法将一个节点添加到指定父节点的子节点列表末尾。类似于css里面的after伪元素

// 2.添加节点 node.appendChild(child)  node 父级  child子级
// 后面追加元素，类似数组中的push
var ul = document.querySelector('ul');
ul.appendChild(li);
// 3.添加节点  node.insertBefore(child,指定元素);
var lili = document.createElement('li');
ul.insertBefore(lili,ul.children[0]);

5.4.3 删除节点

node.removeCjild(child)

node.removeChild() 方法从DOM中删除一个子节点，返回删除的节点

// 1.获取元素
var ul = document.querySelector('ul');
// 2.删除元素  node.removeChild(child);
ul.removeChild(ul.children[0]);

5.4.4 复制节点（克隆节点）

node.cloneNode()

node.cloneNode() 方法返回调用该方法的节点的一个副本。也称为克隆节点/拷贝节点

注意：

• 如果括号参数为空或者为false，则是浅拷贝，即只是克隆复制节点本身，不克隆里面的子节点
  
• 如果括号参数为true，则是深度拷贝，会复制节点本身以及里面所有的子节点
  

node.cloneNode(); //浅拷贝，不复制内容，只复制标签
node.cloneNode(true); //深拷贝，复制内容、复制标签

六.案例

图片切换

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>图片切换</title>
    <script type="text/javascript">
      //数组的方式定义  保存所有的图片的名称
      var images = [
        "img/1.jpg",
        "img/2.jpg",
        "img/3.jpg",
        "img/4.jpg",
        "img/5.jpg"];
      var index = 0;
      //声明一个变量保存定时器
      var timer = null;
      //加载函数
      window.onload = function(){
        //获取图片标签   调用src重新赋值
        var oImg = document.querySelector("img");
        //封装一个函数 保存下一张的代码
        function next(){
          index++;
          if(index >= images.length){
            index = 0;//归0
          }
          oImg.src = images[index];//0 1 2 3 4
          console.log(index);
        }
        //手动点击下一张  进行切换
        var nextBtn = document.getElementById("nextBtn");
        //设置点击事件
        nextBtn.onclick = function(){
          next();
        };
        //手动点击上一张  进行切换
        var backBtn = document.getElementById("backBtn");
        //设置点击事件
        backBtn.onclick = function(){
          index--;
          if(index < 0){
            index = images.length-1;//归0
          }
          oImg.src = images[index];//0 1 2 3 4
          console.log(index);
        };
        //自动切换的按钮
        var autoBtn = document.getElementById("autoBtn");
        autoBtn.onclick = function(){
          window.clearInterval(timer);
          //设置定时器
          timer = window.setInterval(function(){
            next();
          },2000);
        };
        var closeBtn = document.getElementById("closeBtn");
        closeBtn.onclick = function(){
          window.clearInterval(timer);
        }
      };
    </script>
  </head>
  <body>
    <!-- 调用src属性   对象.属性 -->
    <img src="img/1.jpg" alt="" width="300" height="300">
    <hr>
    <button id = "backBtn">上一张</button>
    <button id="nextBtn">下一张</button>
    <button id="autoBtn">自动切换图片</button>
    <button id="closeBtn">关闭切换图片</button>
  </body>
</html>