[JS DOM&BOM]DOM核心重点

Posted 2021-09-20 鱼竿钓鱼干

[JS DOM&BOM]DOM核心重点

DOM是文档对象模型（Document Object Model)
对于JS,为了使JS能够操作html，JS创建了一套自己的DOM变成接口
对于HTML，DOM使得HTML形成一颗DOM树包含文档，元素，节点
通过DOM获取过来的是一个 对象
DOM主要对元素进行操作，创建，增，删，改，查，属性操作，事件操作

创建

1. document.write
2. innerHTML
3. createElement

增

1. appendChild
2. insertBefore

删除

1. removeChild

改

1. 修改元素属性：src,href,title
2. 修改普通元素内容：innerHTML,innerText
3. 修改表单元素：value,type,disable等
4. 修改元素样式：style,className

查

1. DOM提供的API方法：getElementById,getElementsByTagName 古老用法不推荐
2. H5提供的新方法：querySelector,querySelectorAll 提倡
3. 利用节点操作获取元素： 父(parentNode),子（children）,兄(previousElementSibling、nextElementSibling) 提倡

属性操作

主要针对自定义属性

1. setAttribute 设置DOM的属性值
2. getAttribute 得到DOM的属性值
3. removeAttribute 移除属性

事件操作

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

1. οnclick=javascript；鼠标单击某个对象。
2. οndblclick=JavaScript；鼠标双击某个对象。
3. οnmοusedοwn=JavaScript；某个鼠标键被按下。
4. οnmοuseup=JavaScript；某个鼠标键松开。
5. οnmοusemοve=JavaScript；鼠标被移动。
6. οnmοuseοut=JavaScript；鼠标从某元素移开。
7. οnmοuseοver=JavaScript；鼠标被移到某个元素之上。
8. οnfοcus=JavaScript；元素获得焦点。
9. οnblur=JavaScript；元素失去焦点。