DOM操作（基础版）

DOM是document Object Model的缩写，简称文档对象模型。只要记住这是操作文档的就行了。

DOM基础选择器

1、getElementById(id); //获取指定的id元素

2、getElementsByClassName(class); //通过class获取元素，返回值是数组

3、getElementsByTagName(p); //获取相同标签的节点列表，返回值是数组

4、getElementsByName(name); //获取相同元素的节点列表，返回数组

⚠️注：不是所有的标签都有name值。

⚠️注：空格和换行键是文本标签

强大的selector

document.querySelectorAll();

var oD = document.querySelector(); oD.childNode //获取当前元素节点的所有子节点，返回一个数组

oD.parentNode //获取当前元素节点的父元素，返回一个元素

class选择器返回的是数组对象，如果要使用其中的元素，通过索引解析出来

selector会选择第一个符合规则的元素，selectorAll返回一个数组

节点选择器

（节点）关系选择器：都是属性，而不是方法 父选子

 omsg.children             //返回一个数组

子选父

 omsg.parentNode

第一个子

 omsg.firstElementChild

最后一个子

 omsg.lastElementChild

上一个兄弟

 omsg.previousElementSibling

下一个兄弟

 omsg.nextElementSibling

元素属性节点的操作分类

属性的操作：

1、作为属性操作：

可见的操作：

• 内置：系统提供，按照对象的操作方法进行操作

  可获取，可设置 对属性进行操作

   console.log(obox.title);
   obox.title = "123321";
   console.log(obox.className);        //只能通过className,而不能通过class，因为class是个关键字

• 非内置：自定义，不可以通过对象的方法进行操作，通过专属方法

  get/set/romove-Attribute(); 对自定义的属性进行操作

  获得、设置、溢出

  以上三种方法也可以操作内置对象，如果通过这三种方法操作class，直接写class就可以，因为class在此时，是一个字符串

   obox.getAttribute("class");

  不可见的操作：

  内置： 对内部内置属性进行操作

  innerHTML

  nodeName

  nodeValue

  nodeType 

  obox.innerHTML;       //会返回标签及内容
   obox.innerText;       //只返回文本的内容
   obox.tagName;         //只能返回，不能操作

  非内置：对象的操作，直接写入对象内 对新增自定义的属性进行操作

   obox.abc = "123456";
   console.log(obox.abc);
   ​

  可以只分为内置属性和非内置属性。除了已经定义在标签内部的非内置属性，其他的都按点调用。而标签内部的非内置属性使用get/set/romove-Attribute();调用。

2、作为属性节点：（专用方法，与其他节点的方法不互通）

attributes 会返回一个数组

 <div class="box" a="10" b=20></div>
 var obox = document.querySeloector(".box");
 console.log(obox.attributes);
 //获取属性节点的节点的属性和属性值
 console.log(obox.attributes[0].nodeName);
 console.log(obox.attributes[0].nodeValue);
 ​

obox本身也就是元素节点

 obox.nodeName;        //节点名称--文本是#text，
 obox.nodeValue;       //节点值--文本是值
 obox.nodeType;        //节点类型--属性节点为2，元素节点为1，文本是3？？？
 ​

只要是节点，就是对象

 nodeName;     //名称
 nodeValue;    //值
 nodeType;     //类型
 ​

节点属性

伪数组：假数组

可以使用索引和长度遍历，但是不能使用数组的方法 ​ arguments也是伪数组 ​ DOM选择器返回的数组也是伪数组

真数组：

可以使用索引和长度遍历，但是可以使用数组的方法

操作style

批量操作.cssText

DOM属性基本操作（增/删/改/查）

DOM元素的增加

创建：

 createElement();        //需要配合下面这个函数使用
 appendChild();          //将创建好的元素插入某个标签内的最后

⚠️注：是插入到某个标签内的最后

使用方法：

 <div class="box" a="10" b=20 id="box" title="divTitle">
       <p>这是一个测试文本...</p>
       <span>ssss</span>
       <span>aaaa</span>
 </div>
 var obox = document.getElementById("box");
 var e = document.createElement("input");
 e.value = "name";
 obox.appendChild(e);

删除：

 obox.removeChild(e);            //删除obox内的e元素
 obox.remover();                 //直接删除当前元素

修改：

var a = obox.lastElementChild;
 a.outerHTML = "<p>" + a.innerHTML + "</p>";

非行内样式的操作

 getcomputedStyle(obox,false)            //获取样式，只能获取不能设置
 getcomputedStyle(obox,false).background;

获取非行内样式（兼容问题）   

 function getStyle(obj,attr){             //获取非行间样式，obj是对象，attr是值
         if(obj.currentStyle){                //针对ie获取非行间样式
             return obj.currentStyle[attr];
         }else{
             return getComputedStyle(obj,false)[attr];   //针对非ie
         };
     };

获取元素尺寸类样式

事件

<div class="box"> 
 </div>
 var obox = document.querySelector(".box");
 ​
 obox.onclick = function(){
   console.log(1);
 }

事件源：obox，触发事件的源头

 e.target

事件类型：onclick，通过什么行为触发

事件处理函数：function，触发这个行为时，要做的事情

事件的分类：

onmouseleave和onmouseenter不支持事件冒泡

表单事件分类：

页面事件分类

事件对象：类似于一个秘书，在本次实践过程中，记录事件发生的所有信息

默认不显示，需要手动获取

只在事件中存在，开始前及结束后，都不存在

获取事件对象

event获取方法

 window.event;         //IE中
 eve                   //直接获取

兼容方法

 function fn(eve){
   var e = eve || window.event;
 }

⚠️注：event需要逐层传递，不要漏掉外部的function

event的使用

 e.button;               //返回按下鼠标按键的返回值，左0，中1，右2
 e.clientX;
 e.clientY;              //检测相对于浏览器的位置
 e.pageX;
 e.pageY;                //检测相对于文档的位置
 e.screenX;
 e.screenY;              //检测相对于屏幕的位置
 e.offsetX;
 e.offsetY;              //检测相对于元素左上角的位置

冒泡事件：会依次向上触发所有父级的相同事件，如果中间没有父级，则继续向上触发

### 键盘事件

事件源：document

事件对象

获得事件对象：event

获得事件对象兼容

 var e = eve || window.event;

获得keycode

 var keyC = eve.keyCode || eve.which

事件流

三个阶段：

• 冒泡阶段：从里向外

• 目标（当前事件）阶段

• 捕获阶段：从外向内

只有事件监听才可以进入捕获，目标状态不区分捕获和冒泡

浏览器默认冒泡

obox.addEventListener("click",function(){},flase);

第三个值默认为false

事件委托

将多个相同元素的相同事件，添加到页面上现存的共同的父元素，利用事件冒泡，配合事件源，找到真正点击的元素

 oul.onclick = function(eve){
              var e = eve || window.event;
              var target = e.target || e.srcElement;
              if(target.nodeName == "LI"){
                  console.log(target.innerHTML);
              }
          }

优势

1. 节省性能

2. 可一个页面上暂时不存在的元素绑定事件

缺点

1. this不够精准

事件委托的封装，可以使用this

var oul = document.querySelector("ul");
     var oli = document.getElementsByTagName("li");
     oul.onclick = fn(oli,function(){
       console.log(this);
       console.log(this.innerHTML)
     })
     function fn(child,callback){
       return function(eve){
         var e = eve || window.event;
         var target = e.target || e.srcElement;
         for(var i = 0;i<child.length;i++){
           if(target == child[i]){
             callback.bind(target)();
           }
         }
       }
     }