【DOM】JavaScript DOM-事件基础-节点操作-属性操作-创建元素-增删改查

1. DOM

1.1 DOM简介

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

W3C 已经定义了一系列的 DOM 接口，通过这些 DOM 接口可以改变网页的内容、结构和样式。

1.2 DOM树

• 文档：一个页面就是一个文档，DOM 中使用 document 表示
• 元素：页面中的所有标签都是元素，DOM 中使用 element 表示
• 节点：网页中的所有内容都是节点（标签、属性、文本、注释等），DOM 中使用 node 表示

DOM 把以上内容都看做是对象

2. 获取元素

2.1 经典

2.1.1 getElementById

document.getElementById('id');

2.1.2 getElementsByTagName

 document.getElementsByTagName('标签名');

• 因为得到的是一个对象的集合，所以我们想要操作里面的元素就需要遍历。
• 得到元素对象是动态的
• 如果获取不到元素,则返回为空的伪数组(因为获取不到对象)

2.2 HTML5新增

2.2.1 getElementsByClassName

document.getElementsByClassName(‘类名’); // 根据类名返回元素对象集合

2.2.2 querySelector

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

2.2.3 querySelectorAll

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

2.3 body&html

2.3.1 document.body

document.body;  // 返回 body元素对象

2.3.2 document.documentElement

document.documentElement; // 返回 html元素对象

3. 事件基础

3.1 事件三要素

1. 事件源————事件被触发的对象
2. 事件类型————如何触发 什么事件（鼠标点击、经过、键盘按下）
3. 事件处理程序————通过函数赋值完成

3.2 执行事件步骤

1. 获取事件源
2. 注册事件（绑定事件）
3. 添加事件处理程序

var btn = document.getElementById('btn');
btn.onclick = function() {
   
  alert('你好吗');  
};

3.3 常见鼠标事件

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

4. 操作元素

4.1 改变元素内容

1. 从起始到终止位置，但它去除html标签，同时空格和换行也去掉

element.innerText

2. 从起始到终止位置，包括html标签，同时保留空格和换行

element.innerHTML

4.2 改变元素属性

• innerText、innerHTML 改变元素内容
• src、href
• id、alt、title

4.3 表单元素的属性操作

• type、value、checked、selected、disabled

4.4 样式属性操作

4.4.1 element.style

element.style  // 行内样式操作

4.4.2 element.className

element.className // 类名样式操作