API---DOM

API

Web API 是浏览器提供的一套操作 浏览器功能 和 页面元素的 API（BOM 和 DOM）

那从这里开始讲DOM了哈

DOM

DOM 文档对象模型 Document Object Model
是W3C组织推荐的处理可拓展标记语言 的标准程序接口
（以W3C为标准）

DOM树

DOM将 页面中的任何一个元素都看作对象

DOM 获取元素

获取过来的都是object属性
获取过来的都是一个对象

以下讲解 获取元素的几种方法
首先 给几个标签 作为被获取的元素

<div class="father" id = "div">
 <div class ="son" >
   <ul class ="ul">
     <li class ="li1"> </li>
      <li class ="li2"> </li>
   </ul>
   <ul class = "ull">
   <li class ="lili1">
   </li>
   <li class ="lili2">
   </li>
   </ul>
 </div>
</div>

（1）通过Id 名 获取唯一的元素
格式： getElementById(’ ');
只能得到唯一对象 ，thus 这里的element 是 element（单数）

addEventListener('load',function () {
var div = document.getElementById('div');
})

（2）通过标签名获取元素集合
不管得到的是 一个 还是多个 得到的对象 都是以伪数组的形式存储
如 得到一个 那么 该元素表示为 ul[0]

下面一代码形式呈现

addEventListener('load',function() {
var ull = documen.getElementsByTagName('ull');
若要只想要得到ull中的li
var lis = ull[0].getELementsByTagName('li');
console.log(lis);
})

(3)其他常用方法（最推荐的写法）
document.querySelector（‘’） ‘’中间需要加符号# / .
返回的是 选中标签的第一个

var ul = document.querySelecor('ul');
//或者
var ul = document.querySelector('.ul');
//或者
var fatherdiv =documen.querySelector('#div');
//querySelector 也可以用element.queryselector 的写法
//如下
var lis = ul.querySelector('li');

document.querySelectorAll 返回的是 选中的所有标签

var lis = document.querySelectorAll('li');
var lili =document.querySelector('li');
//这里的 lis就是所有的li标签集合 以伪数组形式存储
//这里的lili 则是第一个li标签

（4）特殊获取标签
对于 body， html 。获取这两个元素有特定的写法
如下展示

//获取body元素
var body = document.body;
//获取html元素
var html =document.documentElement;

事件

事件三要素

事件源 + 事件类型 + 事件处理程序

事件源： 事件被触发的对象
事件类型：通过什么触发
事件处理程序： 通过一个函数赋值的方式

执行事件过程

ps：关于鼠标触发事件类型

关于键盘触发事件类型

操作元素

（1）修改元素内容

element.innerText

从起始位置到终止位置的内容，但会将HTML标签去除 同时 空格和换行也会去掉

element.innerHTML

从起始位置到终止位置的全部内容 包括HTML标签（会读取标签） 同时保留空格和换行

innerHTML 和innerText 的区别

(2)修改元素属性

e.g.

var levi = document.getElementById('levi');
var lexi = document.querySelector('lexi');
levi.addEventListener('click',function() {
img.src = 'lexi.jpeg';
})
lwxi.addEventListener('mouseover',function() 
{
img.src ='levi.jpeg';
})

(3)修改表单元素

（4）修改元素样式

var btn = document.querySelector('btn');
btn.addEventListener('mouseout',function() {
btn.style.color='purple';
this.style.backgroundColor ='black';
})

(5) 使用className修改样式属性

btn.onclick = function () {
this.className =" ";
// this.getAttribute('class','pink');
}

Ps：若想保留原先的类名 可采用 多类名选择器
e.g.

关于属性值

获得属性值的两种方法

element.key;
element.getAttribute('class');

设置属性值

a.style.color = 'black';
a.className ="right";
a.setAttribute('index',5);

<div >
</div>
<div data-listName ="2" id ="id">
</div>

var div = document.querySelector('div');
div.setAttribute('data-index',"1");
console.log(div.dataset.index);
console.log(div.data['index']);
var divv = document.querySelector('#div');
console.log(div.dataset.listName);
console.log(div.dataset['listName']);

节点

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

要解释以下内容，还是以上面的例子为背景

<div class="father" id = "div">
 <div class ="son" >
   <ul class ="ul">
     <li class ="li1"> </li>
      <li class ="li2"> </li>
   </ul>
   <ul class = "ull">
   <li class ="lili1">
   </li>
   <li class ="lili2">
   </li>
   </ul>
 </div>
</div>

（1）父级节点 ParentNode

var son = document.querySelector('.son.);
console.log(son.parentNode);
//将会输出 class=“father”的标签

（2）子节点childNodes（会将所有子节点都包含）
会将所有子节点都包含 解释：换行 空格这些都是文本节点 这些节点也属于childNodes 会被一起输出

console.log(ul.childNodes);

为解决该问题：

子节点 分得很细 还有 第一子节点 倒一子节点
（都说了是子节点 空格节点换行节点 是被一同包含进去的）

console.log(ul.firstChild);
//这个返回的就是换行节点
console.log(ul.lastChild);

若只是想要元素节点，则：

console.log(ul.firstElementNode);
console.log(ul.lastElementNode);

conclusion：这里讲了
1.子节点 parentNode.childNodes（包含所有节点）
2.子元素节点 parentNode.children(所有元素节点）
3.第一/倒一子节点 parentNode.firstChildNode/parentNode.lastChildNode
4.第一/倒一元素子节点 parentNode.firstElementChild /parentNode.lastElementChild
(最后这个元素这里 我老是把child打成Node ，所以记得这是子节点 child/children选一不能少）

（3）兄弟节点

log(ul.previousSibling)
log(ul.nextSibling)
log(ul.previousElementSibling)
log(ul.nextElementSibling)

（4）创建节点&添加节点

var li  = document.querySelector('li');
var lili = document.createElement('li');
var ul = document.getElementsByTagName('ul');
ul[0].appendChild(lili);
ul[0].insetBefore(lili,li); //insert 对应要插入的那个元素，before对应指定元素前面

哪个标签.appendChild(哪个元素)
（5）删除节点

ul[0].removeChild(ul.children[0]);

（6）复制节点

ul.appendChild(ul.children[0].cloneNode(true));

conclusion 下这些节点操作：

1. 创建节点：
   采用 document.createElement(‘li’);//创建哪个标签
2. 添加节点
   ul.appendChild(变量）;
3. 删除节点
   ul.removeChild(children[0]); 括号里跟的是要删除的节点
4. 复制节点
   要被复制的节点.cloneNode(true)/()
5. 插入节点
   在后面插入 appendChild（）
   在制定元素前面插入insertBefore（ , );

DOM核心

创建

innerHTML
createElement

增

appendChild()
insertBefore()

删

removeChild

改

主要系修改dom的元素属性 dom元素的内容，属性，表单的值etc
1.修改元素属性：src，href，title ，etc
2.修改普通元素内容：innerHTML，innerText
3.修改表单元素：value，type，disabled，etc
4，修改元素样式：style ，className

属性操作

主要针对于自定义属性
1.setAttribute（‘key’,value) 设置dom的属性值
2.getAttribute(‘属性值’) 得到dom的属性值
3.remover Attribute（‘属性值’）移除属性

查

事件操作

给元素注册事件 采取 事件源.事件类型 = 事件处理程序

注册事件（绑定事件）

给元素添加事件 称为 注册事件/绑定事件
注册事件有两种方式：传统方式 和 方法监听注册方式

anyway 之后就用addEvent Listener这个就好

DOM事件流

事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程 即DOM事件流

事件对象

我觉得 这个事件对象 可以理解为 触发这个事件的对象的一系列状态 ，状态！！！ 是状态！

(1)Target & this

div.addEventListener('click',function(e) {
console.log(e.target); //e.target 返回的是触发事件的对象（元素）
console.log(this);//this返回的是 绑定事件的对象 （元素）
})

e.target 和 this 的区别：
e.target点击了哪个元素 就返回哪个元素
this是 哪个元素绑定了这个事件，就返回哪个元素

(2)事件对象的常见属性和方法

（3）事件委托
原理：给父节点添加侦听器，利用事件冒泡影响每一个子节点

鼠标事件对象

键盘事件对象