API的概念

• API是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，无需访问源码，或理解内部工作机制

DOM获取页面元素

根据Id获取元素

• 方法：调用document对象的getElementById方法
• 参数：字符串类型的id的属性值
• 返回值：对应id名的元素对象

    var para = doucment.getElementById("para");
    para.style.background = "pink";
  

代码书写顺序：js中获取元素时，必须保证元素已经在浏览器中渲染成功

根据标签名获取元素

• 方法：调用document对象的getElementsByTagName方法
• 参数：字符串类型的标签名
• 返回值：同名的元素对象组成的数组

  var ps = document.getElementsByTagName("p");
      for (var i = 0 ; i < ps.length ; i++){
        console.log(ps[i]);
      }
      ps[0].style.background = "pink";
  

getElementsByTagName方法内部获取的元素是动态增加的，操作数据时需要按照操作数组的方法进行

元素内部获取标签元素

• 通过js打点调用获取多层标签的元素，类似于css中后代选择器

  var box1 = document.getElementById('box1');
  var ps1 = box1.getElementsByTagName("p");
  

根据name属性获取元素方法

• 返回一个节点列表集合，选中的元素也是动态变化的

  var ages = document.getElementsByName('age');
  console.log(ages);
  

根据类名获取元素

• 调用document对象的getElementsByClassName方法
• 参数：字符串类型的class属性值
• 返回值：class属性值相同的元素对象组成的数组

  var paras = document.getElementsByClassName("para");
  console.log(paras);
  

根据选择器获取元素

• 方法1：调用document对象的querySelector方法，通过css中的选择器去选取第一个符合条件的标签元素
• 方法2: 调用document对象的querySelectorAll方法，通过css中的选择器去选取所有符合条件的标签元素

  var para = document.querySelector("#box1 .para");
  console.log(para);
  var paras = document.querySelectorAll("#box1 .para");
  console.log(paras);
  

DOM事件

• 绑定事件三要素: 事件源，事件类型，事件函数

鼠标事件类型

非表单元素的属性操作

• 调用方式：obj.href
• 属性赋值：给元素属性赋值，等号右侧赋值的都是字符串格式

获取标签内部内容的属性

• 获取标签内部内容的属性有两个：innerHTML和innerText
• innerHTML属性，在获取标签内部内容时，如果包含标签，获取的内容会包含标签，获取的内容包括空白换行
• innerText属性，在获取标签内部内容时，如果包含标签，获取内容会过滤标签，获取内容会去掉换行和缩进

  // 获取元素
  var box = document.getElementById("box");
  // 打印 box 对象
  console.dir(box);
  // 调用标签内部内容
  console.log(box.innerHTML);
  console.log(box.innerText);
  // 设置标签内部的内容
  // box.innerHTML = "<h2>hello JS</h2>";
  box.innerText = "<h2>hello JS</h2>";
  

表单元素属性

• 获取焦点：onfocus
• 失去焦点：onblur

自定义属性操作

• getAttribute(name) 获取标签行内属性
• setAttribute(name,value) 设置标签行内属性
• removeAttribute(name) 移除标签行内属性
• 上述三个方法用于获取任意的行内属性，包括自定义属性

box.setAttribute("name","dxa");
console.log(box.getAttribute("name"));
box.removeAttribute("name") ;

style样式属性操作

• 使用style属性方式设置的样式显示在标签行内
• element.style 属性的值，是所有行内样式组成的一个样式对象，只能获取行内样式
• 类似background-color这种复合属性的单一属性写法要用驼峰命名的书写方式backgroundColor
• 通过样式属性设置宽高、位置的属性类型是字符串，需要加上px等单位

className 类名属性操作

• 修改元素的className属性相当于直接修改标签的类名
• 如果需要修改多条css样式，可以提前将修改的样式设置到一个类选择器中，后续通过修改类名的方式，批量修改css样式

DOM节点操作

// 生成一个新的元素对象
var newNode = document.createElement("div");
newNode.innerHTML = "新的 div";
// 给 body 添加一个新的节点子元素
document.body.appendChild(newNode);
// 移除一些元素
var box = document.getElementById("box");
var demo = document.getElementById("demo");
document.body.removeChild(box);

// 获取节点内部的子元素节点
var child1 = demo.children;
console.log(child1);

节点属性

• nodeType 节点类型，属性值为数字，表示不同的节点类型
• nodeName 节点的名称
• nodeValue 节点值

父子节点常用属性

• childNodes 只读属性，获取一个节点所有子节点的实时集合，集合是动态变化的
• children 只读属性，返回一个节点所有子元素节点集合
• firstChild 只读属性，返回该节点的第一个子节点，如果没有则返回null
• firstElementChild 获取所有元素类型的第一个子节点
• lastChild 只读属性，返回该节点的最后一个子节点，如果没有则返回null
• parentNode 返回一个当前节点的父节点，如果没有则返回null
• parentElement 返回当前节点的父元素节点，如果没有则返回null

兄弟节点常用属性

• nextSibling 只读属性，返回该节点同级的下一个节点，如果没有则返回null
• previousSibling 只读属性，返回该节点同级的上一个节点，如果没有则返回null
• nextElementSibling 只读属性，返回该节点同级的下一个元素节点，如果没有则返回null
• previousElementSibling 只读属性，返回该节点同级的上一个元素节点，如果没有则返回null

创建新节点的方法

• document.createElement("div") 创建元素节点
• document.createAttribute("id") 创建属性节点
• document.createTextNode("hello") 创建文本节点

节点常用操作方法

• parentNode.appendChild(child) 将一个节点添加到指定父节点的子节点列表末尾

  var oDiv = document.createElement("div")
  oDiv.id = "div1";
  oDiv.style.width = "100px";
  oDiv.style.height = "100px";
  oDiv.style.border = "2px solid red";
  document.body.appendChild(oDiv);
  

• parentNode.replaceChild(newChild,oldChild) 用指定的节点替换当前节点的一个子节点，并返回被替换掉的节点
• parentNode.insertBefore(newNode,referenceNode) 在参考节点之前插入一个拥有指定父节点的
  子节点，referenceNode必须设置，如果referenceElement为null则newNode将被插入到子节点的末尾

  var oP = document.createElement("p");
  oP.id = "p1";
  oP.style.width = "100px";
  oP.style.height = "100px";
  oP.style.border = "2px solid green";
  //添加到body并在oDiv之前
  document。body.insertBefore(oP,oDiv);
  

• parentNode.removerChild(child) 移除当前节点的一个子节点，这个子节点必须存在当前节点中

  // 替换节点
  box.replaceChild(div,p2);
  // 在某个指定子节点之前添加一个新的子节点
  box.insertBefore(div,p2);
  box.insertBefore(div,null);
  // 移除删除节点
  box.removeChild(p2);
  

• Node.cloneNode() 克隆一个节点，并选择是否克隆这个节点下所有内容。false为浅克隆，true为深度克隆

  // 克隆元素 box
  // 浅度克隆：默认值，只克隆当前元素
  var newBox = box.cloneNode(false);
  // 深度克隆：把元素里的子元素都克隆
  var newBox = box.cloneNode(true);
  newBox.id = "newBox";
  document.body.appendChild(newBox);
  

• Node.hasChildNodes() 没有参数，返回一个Boolean，来表示是否包含有子节点
• Node.contains(child) 返回一个Boolean，来表示传入节点是否为该节点的后代节点

判断当前节点是否有子节点

• node.firstChild !== null
• node.childNodes.length > 0
• node.hasChildNodess()

注册事件的其他方法

• element.addEventListener()方法
  • 同一个元素可以多次绑定事件监听，同一个事件类型可以注册多个事件函数
  • 多次绑定相同的事件类型，事件会根据书写的顺序进行一个事件排队
• element.attachEvent()方法
  • 只支持IE10及以下浏览器
• 兼容写法

  function addEvent(ele,type,fn) {
    // IE 9 及以上的浏览器和其他浏览器，使用 addEventListener 方法
    // IE 9 以下的浏览器，使用 attachEvent 方法
    // 浏览器能力检测
    if (ele.addEventListener) {
      ele.addEventListener(type,fn);
    } else if (ele.attachEvent) {
      ele.attachEvent("on" + type,fn);
    }
  }
  

解除事件绑定方法

• element.removeEventListener()
  • 没有办法移除一个匿名函数，所以在注册事件时需要单独声明一个有函数名的事件函数
• element.detachEvent()
  • 只支持IE10及以下浏览器

DOM事件流

事件流的三个阶段

• 事件捕获
• 事件执行过程
• 事件冒泡
• addEventListener()第三个参数为false时，事件冒泡
• addEventListener()第三个参数为true时，事件捕获
• onclick类型：只能进行事件冒泡过程，没有捕获阶段
• attachEvent(): 只能进行事件冒泡过程，没有捕获阶段

事件委托

• 利用事件冒泡，讲子级的事件委托给父级加载
• 利用事件函数的一个e参数，内部存储的是事件对象

事件对象

• 只有触发事件，就会有一个对象，内部存储了与事件相关的数据
• e.eventPhase 查看事件触发时所处的阶段
• e.target 用于获取触发事件的元素
• e.srcElement 用于获取触发事件的元素，低版本浏览器使用
• e.currentTarget 用于获取绑定事件的事件源元素
• e.type 获取事件类型
• e.clientX/e.clientY 所有浏览器都支持，鼠标距离浏览器窗口左上角距离
• e.pageX/e.pageY 鼠标距离整个HTML页面左上顶点的距离

取消默认行为和阻止事件传播的方式

• e.preventDefault() 取消默认行为
• e.returnValue 取消默认行为，低版本浏览器使用
• e.stopPropagation() 阻止冒泡
• e.cancelBubble = true 阻止冒泡，IE低版本

DOM特性

偏移量属性

• offsetParent 偏移参考父级，距离自己最近的有定位的父级，如果都没有定位参考body(html)
• offsetLeft/offsetTop 偏移位置
• offsetWidth/offsetHeight 偏移大小

client 客户端大小

• client 系列没有参考父级元素
• clientLeft/clientTop 边框区域尺寸，不常用
• clientWidth/clientHeight 边框内部大小

滚动偏移属性

• scrollLeft/scrollTop 盒子内部滚动出去的尺寸
• scrollWidth/scrollHeight 盒子内容的宽度和高度

下一篇文章 DOM:https://www.jianshu.com/p/2ce02168113f