javascript学习笔记——Web APIs，DOM

一、Web APIs

Web APIs包含DOM(页面文档对象模型)，BOM(浏览器对象模型)。
JS基础学习ECMAScript 基础语法为后面做铺垫，Web APIs是JS的应用，大量使用JS基础语法做交互效果。
API 和 Web API
- API 是给程序员提供的一种工具，以便能更轻松的实现想要完成的功能。
- Web API 是浏览器提供的一套操作浏览器功能和页面元素的API（BOM和DOM）;

二、DOM

DOM(文本对象流模型)，是W3C组织推荐的处理可扩展标记语言（HTML或XML）的标准编程接口。
DOM树
- 文档：一个页面就是一个文档，DOM中使用document表示
- 元素：页面中所有标签都是元素，DOM中使用element表示
- 节点：网页中所有内容都是节点（标签、属性、文本、注释等），DOM中使用node表示

获取元素

获取页面中元素可以使用以下方法
- 根据ID获取
- 根据标签名获取
- 通过HTML5新增的方法获取
- 特殊元素获取
通过ID获取
- 使用getElementById()方法可以获取带有ID的元素对象
- 因为文档页面从上往下加载，所以先得有标签，script写在标签的下面
- 返回一个匹配到ID的Element对象，若在当前document中没有找到则返回null
- console.dir() 打印我们返回的元素对象，更好的查看里面的属性和方法

根据标签名获取元素

document.getElementByTagName(),返回的是获取过来元素对象的集合以伪数组的形式存储的。
想要依次打印里面的元素对象可以采用遍历的形式。
如果页面中没有这个元素，则返回的是空的伪数组

还可以获取某个元素（父元素）内部所有指定标签名的子元素。注：父元素必须是单个对象。

    	<ol id="ol">
 <li></li>
 <li></li>
 <li></li>
 <li></li>
</ol>
<script type="text/javascript">
 var ol=document.getElementsByTagName('ol');
 console.log(ol[0].getElementsByTagName('li'));

          //或者
          //var ol=document.getElementById('ol');
          //console.log(ol.getElementByTagName('li'));
</script>

通过HTML5新增方法获取

document.getElementByClassName('类名'); //根据类名返回元素对象集合

document.querySelector('选择器'); //根据指定选择器返回第一个元素对象

          <div class="box">第一个盒子</div>
    <div class="box">第二个盒子</div>
    <div id="nav">
     <li></li>
     <li></li>
    </div>
<script type="text/javascript">
 var box=document.querySelector('.box');  //返回第一个盒子
 var nav=document.querySelector('#nav');  //
</script>

document.querySelectorAll('选择器'); //根据指定选择器返回所有对象

获取特殊元素body ,html

获取body元素
1
var bodyEle=document.body;
获取html元素
1
var htmlEle=document.documentElement;

事件基础

事件：触发响应的机制，网页中每个元素都可以触发JavaScript的事件，例如用户在点击某个按钮时产生的事件。然后去执行操作
事件是有三部分组成：事件源，事件类型，事件处理程序。
- 事件源：事件被触发的对象
- 事件类型：如何触发，什么事件。比如鼠标点击触发，鼠标经过触发等。
- 事件处理程序：通过一个函数赋值的方式完成

执行事件的步骤

获取事件源

1	var num=document.getElementById('box');

绑定事件（注册事件）
1
num.onclick

添加事件处理程序

1
2
3

num.onclick=function(){
    alert("点击此事件");
}

常见的鼠标事件

表格

鼠标事件	触发条件
onclick	鼠标点击左键触发
onmouseover	鼠标经过触发
onmouseout	鼠标离开触发
onfocus	获取鼠标焦点触发
onblur	失去鼠标焦点触发
onmousemove	鼠标移动触发
onmouseup	鼠标弹起触发
onmousedown	鼠标按下触发

操作元素

改变元素内容
1
2
element.innerText; //不识别html标签
element.innerHTML; //识别html标签
- 这两个属性可以读写，可以获得元素里面的内容
- innerText 获取元素内容 ,去除空格和换行
- innerHTML 获取元素内容，保留空格和换行
常用元素的属性操作
- innerText , innerHTML 改变元素内容
- src , href
- id , alt , title
表单元素的属性操作
- 利用DOM可以操作如下表单属性：type, value, checked, selected, disabled
样式属性操作
- 可以通过js修改元素的大小，颜色，位置等样式
- element.style 行内样式操作
- element.className 类名样式操作
- 注：JS修改style样式操作，产生的是行内样式，CSS权重比较高
element.className 类名样式操作
- 如果修改样式过多可以采用操作类名的方式更改元素样式
- class因为是保留字，因此使用className来操作元素类名属性
- className 会直接更改元素类名，会覆盖原先的类名
  1
  2
  3
  4
  5
  var box=document.querySelector('.box');
  box.onclick=function(){
  this.innerHTML="已经改变了盒子"
  this.className="change"
  }
- 如果想要保留原想的类名，可以直接采用以下方式
  1
  this.className="原先的类名新增的类名"
排他思想
- 如果有同一组元素，我们想要某一个元素实现某种样式，需要用到循环排他的思想
- 先把所有元素全部清除样式
- 再给当前元素设置样式

复选框的全选与取消全选

     var all = document.getElementById('dd');  //全选按钮
var list = document.getElementById('box').querySelectorAll('input');  //单选按钮
//点击全选
all.onclick = function() {
	for (var i = 0; i < list.length; i++) {
		list[i].checked = this.checked;
	}
}
//点击单选满足后全选
for (var i = 0; i < list.length; i++) {
	list[i].onclick = function() {
		var flag = true;  //引入变量
		for (var j = 0; j < list.length; j++) {
			if (!list[j].checked) {
				flag = false;
				break;
			}
		}
		all.checked = flag;  //设置全选按钮是否选中
	}
}

获取属性值的方法
- element.属性 获取内置属性（元素自身的属性）
- element.getAttribute('属性'); 主要获取自定义的属性（标准）我们自定义的属性
  1
  2
  3
  4
  <div id="id" index="122">
  <script>
  console.log("获取到的属性值："+document.getElementById('id').getAttribute('index')); //输出的结果为 112
  </script>
设置属性值
- element.属性='值'; 设置内置属性值
- element.setAttribute('属性','值'); 主要针对于自定义属性
移除属性
- element.removeAttribute('属性') 用于移除元素属性
H5自定义属性
- 自定义属性的目的：为了保存并使用数据。有些数据可以保存到页面中而不用保存到数据库中。
- H5规定自定义属性data-开头作为属性名并赋值。
获取H5自定义属性
- 兼容性获取 element.getAttribute(‘data-index’);
- H5新增 element.dataset.index 或者 element.dataset['index']
- 如果自定义属性里面有多个以’-‘连接的单词，获取的时候采取驼峰命名法
  1
  2
  3
  4
  // <div id="box" data-list-name="1"></div>
  var box=document.getElementById('box')
  console.log(box.getAttribute('data-list-name'));
  console.log(box.dataset['listName']); //均是输出1

节点操作

利用节点的层次关系获取元素
- 利用父子兄弟关系来获取元素
- 逻辑性强，但兼容性差
节点概述：一般的，节点至少拥有nnodeType（节点类型）、nodeName（节点名称）、nodeValue（节点值）这三个基本属性。
- 元素节点nodeType为1
- 属性节点nodeType为2
- 文本节点nodeType为3（文本节点包含文字、空格、换行等）
节点层次：利用DOM树把节点划分为不同的层级关系，常见的有父子兄弟层级关系
- 利用parentNode获得离元素最近的父亲节点。如果找不到父节点则返回null。
- 子节点parentNode.childNodes返回包含指定节点子节点的集合，该集合为实时更新的集合。获得的所有子节点包含：元素节点，文本节点等。可以通过nodeType进行区分。
- parentNode.children是一个只读属性，返回所有子元素节点。其他子节点不反回。
- parentNode.firstChild返回第一个子节点，不管是文本节点还是元素节点
- parentNode.lastChild 返回最后一个子节点，不管是文本节点还是元素节点
- parentNode.firstElementChild 获取第一个子元素节点。（IE9以上支持）
- parentNode.lastElementChild 获取最后一个子元素节点。（IE9以上支持）
- 实际开发若需要兼容性好则采用parentNode.children数组来获取第一个和最后一个子元素。
- node.nextSibling 返回当前元素的下一个兄弟节点，找不到则返回null,包含所有节点。
- node.previousSibling 返回当前元素的上一个兄弟节点，找不到则返回null,包含所有节点。
- node.nextElementSibling 返回当前元素的下一个兄弟元素节点，找不到则返回null,包含所有节点。（IE9以上支持）
- node.previousElementSibling 返回当前元素的下一个兄弟元素节点，找不到则返回null,包含所有节点。（IE9以上支持）

创建节点

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

添加节点

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

node.insertBefore(child,指定元素) 将一个节点添加到父节点的指定子节点前面。类似于CSS里面的before伪元素。

    <div class="box">
    <textarea id="txt"></textarea>
   	<button>提交</button>
    <ul></ul>
 </div>
<script type="text/javascript">
     var btn=document.querySelector('button');
     var ul=document.querySelector('ul');
           var inputValue=document.getElementById('txt');
     btn.onclick=function(){
   if(inputValue.value!=null)
   {
     var res=document.createElement('li');  //创建节点
     res.innerHTML=inputValue.value;  // 节点赋值
     ul.insertBefore(res,ul.children[0]);  //向前插入元素
     inputValue.value="";   //输入框清空
   }
  else{
    alert("输入内容不能为空");  //提示
     }
    }
  </script>

删除节点
- node.removechild(child) 从DOM中删除一个子节点，返回删除节点。
复制节点
- node.cloneNode() 返回调用该方法节点的一个副本。也称为克隆节点，拷贝节点
- 括号为空或者是里面为false 浅拷贝只复制标签不复制里面的内容。
- 括号中为true则为深拷贝，既复制标签，也要复制里面的内容。
三种动态创建元素
- document.write(); 直接将内容写入页面的内容流，当文档流执行完毕，则会导致页面全部重绘。
- element.innerHTML(); 将内容写入某个DOM节点，不会导致页面全部重绘,创建多个元素效率更高（不要采用字符串拼接的方式，采用数组转换为字符串的方式），结构稍微复杂。
  1
  2
  var create=document.querySelector('.create');
  create.innerHTML='a';
- document.createElement(); 创建多个元素效率会低一些，但结构简单清晰。
  1
  2
  3
  var create=document.querySelector('.create');
  var a=document.createElement('a');
  create.appendChild(a);
  总结：

DOM：文档对象模型，处理可扩展标记语言的标准编程接口。通过接口可以改变网页的内容、结构、样式。
创建
- document.write
- innerHTML
- createElement
增加元素
- appendChild
- insertBefore
删除元素
- removeChild
改：主要修改dom元素的属性
- 修改元素属性：src， href, title等
- 修改普通元素内容：innerHTML, innerText
- 修改表单元素：value, tupe, disabled等
- 修改元素样式：style, className
查找DOM元素
- DOM提供的API方法：getElementById(), getElementByTagsName()等比较古老的方法
- H5提供的新方法：querySelector(), querySelectorAll()
- 利用节点操作获取元素：父（parentNode）, 子（children），兄弟（previousElementSibling、 nextElementSibling）
属性操作
- setAttribute():设置DOM的属性值
- getAttribute():得到DOM的属性值
- removeAttribute():移除属性值
事件操作