JavaScript稳扎记——DOM重点核心

一、文档对象模型(document object model)

简称DOM 是W3c组织推荐的处理可拓展标记语言，(HTML或者XML)的标准 编程接口
W3C已经定义了一系列的DOM接口，通过这些DOM接口可以改变网页的内容、结构和样式

二、为什么称作文档对象模型？

• 通过DOM获取的元素返回的都是object 所以称为文档对象模型

1.对于JavaScript来说 ， 为了能使用JavaScript操控html， 则形成了JavaScript自身的一套Dom编程接口
2.对于HTML来说， DOM使html形成一颗DOM树包括：文档(整个一个页面就是一个文档)、元素(页面里的标签叫做元素)、节点(页面的内容就是节点 【文档、元素、属性都是节点】）、属性

三、关于DOM操作

• 主要是对于元素的操作；主要有增、删、查、改、属性操作、事件操作。

1.创建

• (1).document.write
• (2).innerHTML
• (3).creatElement

2.增

• (1).appendChlid
• (2).insertBefore

3.删

• (1).removeCild

4.改

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

5.查

主要查找dom元素
(1).DOM提供的API方法：
getElementById、
getElementByTagName(古老方法)
(2).H5新增方法：
querySelector
querySelectorAll //提倡
(3).利用节点的操作获取元素：
父(parentsNode)、
子(Children、i9新增：firstElementChildren、lastElementChildren)、
兄(previousElementSibling、nextElementSibling) //提倡

6.属性操作

• 主要对于自定义属性

(1).setAttribute: 设置dom的属性值
(2).getAttribute：得到 dom属性值
(3).removeAttribute移除属性

7.事件操作

• （1）.采取 ：

  事件源.事件类型 = 事件处理程序 
  例如：  btn.onclick = fuction{}
  

• （2）.采取

  事件监听
   addEventListener('click', function () {}
  

事件类型	事件功能
onclick	鼠标单击
ondblclick	鼠标双击
onkeyup	按下并释放键盘上的一个键时触发
onchange	文本内容或下拉菜单中的选项发生改变
onfocus	获得焦点, 表示文本框等获得鼠标光标
onblur	失去焦点, 表示文本框等失去鼠标光标
onmouseover	鼠标悬停, 即鼠标停留在图片等的上方
onmouseout	鼠标移出, 即离开图片等所在的区域
onfocus	获得焦点, 表示文本框等获得鼠标光标
onblur	失去焦点, 表示文本框等失去鼠标光标
onmouseover	鼠标悬停, 即鼠标停留在图片等的上方
onmouseout	鼠标移出, 即离开图片等所在的区域
onload	网页文档加载事件
onunload	关闭网页时
onsubmit	表单提交事件
onreset	重置表单时.