Web APIs—— DOM

---

前言

文档对象模型（Document Object Model，简称DOM），是 W3C组织推荐的处理[可扩展标记语言]（html或者xhtml）的标准编程接口。

---

一、DOM

DOM用来操作元素和节点的

文档：一个页面就是一个文档；document
元素：页面中所有的标签；emlment
节点：网页中所有的内容都是节点；node

二、操作元素

第一步：获取元素，获取元素方法？

根据ID获取

语法：

document.getElementById(id)；

作用：根据ID获取元素对象
参数：id值，区分大小写的字符串
返回值：元素对象 或 null
console.dir 打印我们返回的元素对象 更好的查看里面的属性和方法

根据标签名获取元素

语法：

//获取到是动态集合，即：当页面增加了标签，这个集合中也就增加了元素
document.getElementsByTagName('标签名') 
element.getElementsByTagName('标签名')

作用：根据标签名获取元素对象
参数：标签名
返回值：元素对象集合（伪数组，数组元素是元素对象）

//我们想要依次打印里面的元素对象我们可以采取遍历的方式
for (var i = 0; i < lis.length; i++) {
  console.log(lis[i]);
  }

H5新增获取元素方式

getElementsByClassName() //根据类名获得某些元素集合

querySelector() //返回指定选择器的第一个元素对象  切记 里面的选择器需要加符号 .box  #nav

querySelectorAll()//返回指定选择器的所有元素对象集合

获取特殊元素（body，html）

var bodyEle = document.body;
var htmlEle = document.documentElement;

第二步：事件（事件源，事件类型，事件处理程序）

事件源（谁）：触发事件的元素

事件类型（什么事件）： 例如 click 点击事件

传统方式
利用on开头的事件onclick
注册事件的唯一性；同一个元素同一个事件只能设置一个处理函数，最后注册的处理函数将会覆盖前面注册的处理函数

方法监听注册方式
addEventListener事件监听方式

eventTarget.attachEvent(type,listener[,useCapture])

type 事件类型字符串listener事件处理函数useCapture可选参数，是一个布尔值，默认false
里面的事件类型是字符串 必定加引号 而且不带on

同一个元素 同一个事件可以添加多个侦听器（事件处理程序）

事件处理程序（做啥）：事件触发后要执行的代码(函数形式)，事件处理函数

a.onclick = function() {
    // 事件处理程序
    alert("1111");
}

三、操作元素内容

var text = a.innerText; //只会获取到文字
var text1 = a.innerHTML; //文字代码，空格，其他符号都能获取到

四、元素属性操作

4.1.设置属性

a.style.color = 'red';
//添加class属性
a.className = 'h';
a.setAttribute("width", "100");
a.setAttribute("width", "200");

4.2.移除属性

a.removeAttribute("color");

四、节点(元素)操作

一般地，节点至少拥有nodeType（节点类型）、nodeName（节点名称）和nodeValue（节点值）这三个基本属性。

1.通过元素查找节点(元素)

利用 DOM 树可以把节点划分为不同的层级关系，常见的是父子兄层级关系。

var b = a.parentNode; //查,关系查找
var c = a.previousSibling;

2.创造节点（元素，标签）

var u = document.createElement("ul"); //增
document.write("<a>内容</a>");
a.innerHTML = "<div>11111</div>";

3.添加节点

a.appendChild(u);
a.insertBefore(ul);

4.移除

a.removeChild(div); //删

---

总结

• 对元素操作（创建元素，添加元素，删除元素）
• 对元素内容操作（获取元素内容，修改元素内容）
• 对元素属性操作（添加属性，删除属性，修改属性）
• 事件，有哪些事件？
  事件高级
  事件绑定方法
  事件委派