常见DOM操作

---

概述

文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展置标语言的标准编程接口。它是一种与平台和语言无关的应用程序接口(API),对于任何一个html网页都可以将页面中所有内容当做一颗倒置的文档树理解，可以通过js的dom操作对树中任意节点进行访问（添加，删除，修改，检索）

---

DOM常用操作

1. 获取文档中的所有元素

  var all = document.all; // 返回一个包含了文档中所有节点的数组对象

2. 根据标签获取元素

  //获取页面中的所有h1元素 (返回数组对象)
  let titles = document.getElementsByTagName("h1");
  console.log(titles);

3. 根据元素的class名称获取元素（存在兼容性问题，慎用）

  //返回所有class名称为row的元素(返回数组对象)
  let rows = document.getElementsByClassName("row");
  console.log(rows);

4. 根据元素的name属性获取元素集合（一般只有表单元素才有name属性）

  let langs = document.getElementsByName("lang"); //返回数组

5. 根据元素的id获取元素(因为id在页面中具备唯一性，因此以下代码只能获取一个元素)

  let selectAll = document.getElementById("selectAll");//返回单个元素对象

以上都是一些比较常规的获取dom的方式，另外javascript还提供了两种更为全面的获取dom对象的方式：

1. document.querySelector()：根据css的选择器获取匹配的单个元素

2. document.querySelectAll()：根据提供的css选择器获取匹配的多个元素

  //根据css的选择器获取指定选择器选中的单个元素
  var h2 = document.querySelector("h2");
  console.log(h2);
  
  var tds = document.querySelectorAll("td");
  console.log(tds);
  
  //获取所有class="row" h1 h2元素？
  var elements = document.querySelectorAll(".row,h1,h2");
  console.log(elements);

元素上的属性

元素上的属性，比如id,value 可以通过 . 直接访问
如果是自定义属性，那么可以通过如下两种方式来获取
getAttribute("test")
attributes["test"].nodeValue

样式

一个元素节点的style属性即对应的css
通过给元素的style.backgroundColor 赋值，修改样式
style.backgroundColor 这里的backgroundColor和css中的背景色background-color 是有所不同的

事件

焦点事件

   焦点相关的事件，分别有获取焦点和失去焦点 
   当组件获取焦点的时候，会触发onfocus事件 
   当组件失去焦点的时候，会触发onblur事件
   <input type="text" onfocus="函数名()" onblur="函数名()" id="input1" placeHolder="输入框" >

鼠标事件

   鼠标事件，由鼠标按下，鼠标弹起，鼠标经过，鼠标进入，鼠标退出几个事件组成
   当在组件上鼠标按下的时候，会触发onmousedown事件
   当在组件上鼠标弹起的时候，会触发onmouseup事件
   当在组件上鼠标经过的时候，会触发onmousemove事件
   当在组件上鼠标进入的时候，会触发onmouseover事件
   当在组件上鼠标退出的时候，会触发onmouseout事件
   注: 当鼠标进入一个组件的时候，onmousemove和onmouseover都会被触发，
   区别在于无论鼠标在组件上如何移动，
   onmouseover只会触发一次，onmousemove每次移动都会触发

键盘事件

   键盘事件，由键盘按下keydown，键盘按下keypress,键盘弹起几个事件组成
   当在组件上键盘按下的时候，会触发onkeydown事件
   当在组件上键盘按下的时候，也会触发onkeypress事件
   当在组件上键盘弹起的时候，会触发onkeyup事件
   注:
   都是用于表示键盘按下，onkeydown和onkeypress的区别在什么呢？
   onkeydown
   可以获取所有键，除了打印键Prts
   可以获取用户是否点击了修饰键 (ctrl,shift,alt)
   不能判断输入的是大写还是小写
   onkeypress
   只能获取字符键
   不能获取用户是否点击了修饰键 (ctrl,shift,alt)
   可以判断输入的是大写还是小写

点击事件

点击事件，由单击，双击按两个事件组成
当在组件上单击的时候，会触发onclick事件
当在组件上双击的时候，会触发ondblclick事件

变化事件

当组件的值发生变化的时候，会触发onchange事件 
注：对于输入框而言，只有在失去焦点的时候，才会触发onchange
<input type="text" id="t1" onchange="change()"   >

提交事件

可以在form元素上，监听提交事件
当form元素提交的时候，会触发onsubmit事件
<form action="路径" onsubmit="login()"></form>

this的用法

   this表示触发事件的组件，可以在调用函数的时候，作为参数传进去
   <input type="button" onclick="singleClick(this)" value="">
   
   function singleClick(button){
   //这个this就是 button本身
   }

父节点关系

   parentNode

同胞节点关系

   分别通过 previousSibling和nextSibling属性获取前一个，以及后一个同胞节点
   注意：不是紧挨着情况 标签之间有任何字符、空白、换行都会产生文本元素。 所以获取到的节点是#text.

子节点关系

  子节点关系有: 
  firstChild 第一个子节点 
  lastChild 最后一个子节点 
  childNodes 所有子节点 
  注:firstChild 如果父节点的
开始标签和第一个元素的开始标签之间有文本、空格、换行，
那么firstChild第一个子节点将会是文本节点，
不会是第一个元素节点 

childNodes和children的区别

   childNodes和children都可以获取一个元素节点的子节点。 
   childNodes 会包含文本节点 
   children 会排除文本节点 

创建节点

创建元素节点

   通过createElement 创建一个新的元素节点 
   接着把该元素节点，通过appendChild加入到另一个元素节点div中
   var hr=document.createElement("hr");
   var d1 = document.querySelector("#d1");
   d1.appendChild(hr);

创建文本节点

   首先创建一个元素节点p段落标签
   接着通过createTextNode创建一个内容节点text
   把text加入到p
   再把p加入到div
 var p=document.createElement("p");
 var text = document.createTextNode("这是通过DOM创建出来的<p>");
 p.appendChild(text);
 var d1 = document.querySelector("#d1");
 d1.appendChild(p);

创建属性节点

   首先创建一个元素节点a 
   接着创建一个内容节点content 
   把content加入到a 
   然后通过createAttribute创建一个属性节点 href 
   设置href的值为http://www.baidu.com
   通过setAttributeNode把该属性设置到元素节点a上 
   最后把a加入到div
 var a=document.createElement("a");
 var content = document.createTextNode("百度");
 a.appendChild(content);
 var href = document.createAttribute("href");
 href.nodeValue="http://www.baidu.com";
 a.setAttributeNode(href);
 var d1 = document.querySelector("#d1");
 d1.appendChild(a);

删除节点

删除元素节点

   要删除某个元素节点有两步 
   第一：先获取该元素的父节点 
   第二：通过父节点，调用removeChild 删除该节点
 var parentDiv = document.querySelector("#parentDiv");
 var delElement= document.querySelector("#要删除的元素ID");
 parentDiv.removeChild(delElement);

删除属性节点

  要删除某个属性节点有两步 
  第一：先获取该元素节点 
  第二：元素节点，调用removeAttribute删除指定属性节点
var tag= document.querySelector("#id");
tag.removeAttribute("属性名");

删除文本节点

   var tag= document.querySelector("#id");
   tag.innerHTML="";

替换节点

与删除节点一样，替换节点也需要先获取父节点，然后通过父节点替换子节点。 
   1. 获取父节点 
   2. 创建子节点 
   3. 获取被替换子节点 
   4. 通过replaceChild进行替换 

   注: replaceChild 第一个参数是保留的节点，第二个参数是被替换的节点
   
   var newDiv=  document.createElement("div");
   var text = document.createTextNode("替换后的文本");
   newDiv.appendChild(text);
   var replaceElement= document.querySelector("#被替换的元素的ID");
   var parentDiv = document.querySelector("#parentDiv");
   parentDiv.replaceChild(newDiv,replaceElement);

innerHTML和innerText区别？

- innerHTML可获取或设置指定元素标签内的html内容，从该元素标签的起始位置到终止位置的全部内容（包含html标签）。
- document.getElementById('box').innerHTML='<h1>hello</h1>';
- innerText可获取或设置指定元素标签内的文本值，从该元素标签的起始位置到终止位置的全部文本内容（不包含html标签）
- document.getElementById('box').innerText='<h1>hello</h1>';

以上两种情况结果分别为：
innerHTML：innerText：

追加节点

通过appendChild追加节点。 追加节点一定是把新的节点插在最后面 
   1. 创建新节点 
   2. 获取父节点 
   3. 通过appendChild追加

在前方插入

有时候，需要在指定位置插入节点，而不是只是追加在后面。 
   这个时候就需要用到insertBefore 
   1. 创建新节点 
   2. 获取父节点 
   3. 获取需要加入的子节点 
   4. 通过insertBefore插入 
   注: insertBefore的第一个参数是新元素，第二个参数是插入位置
 parentDiv.insertBefore(新元素,插入位置);