JavaScript——DOM重点核心

简介: 我们获取过来的DOM元素是一个对象(object),所以称为文档对象模型。关于DOM操作,我们主要针对元素的操作有创建、增、删、改、查、属性操作、事件操作。创建document.writeinnerHTMLcreateElement增appendChildinsertBefore删removeChild改主要修改dom的元素属性,dom元素的内容、属性、表单的值等。修改元素属性:src、href、title等修改普通元素内容:innerHTML、innerText修改表单元素:value、type、disabled等修改元素样式:style、classN

我们获取过来的DOM元素是一个对象(object),所以称为文档对象模型。

关于DOM操作,我们主要针对元素的操作有创建、增、删、改、查、属性操作、事件操作。

创建

  1. document.write
  2. innerHTML
  3. createElement

  1. appendChild
  2. insertBefore

removeChild

主要修改dom的元素属性,dom元素的内容、属性、表单的值等。

  1. 修改元素属性:srchreftitle
  2. 修改普通元素内容:innerHTMLinnerText
  3. 修改表单元素:valuetypedisabled
  4. 修改元素样式:styleclassName

主要获取查询DOM的元素

  1. DOM提供的方法:getElementByIdgetElementsByTagName 较老,不推荐
  2. H5提供的新方法:querySelectorquerySelectorAll 提倡使用
  3. 利用节点操作获取元素:父(parentNode)、子(children)、兄(previousElementSiblingnextElementSibling) 提倡使用

属性操作

主要针对于自定义属性

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

事件操作

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

鼠标事件 触发条件
onclick 鼠标点击左键触发
onmouseover 鼠标经过触发
onmouseout 鼠标离开触发
onfocus 获得鼠标焦点触发
onblur 失去鼠标焦点触发
onmousemove 鼠标移动触发
onmouseup 鼠标弹起触发
onmousedown 鼠标按下触发
相关文章
|
12天前
|
缓存 JavaScript 前端开发
【JavaScript 技术专栏】DOM 操作全攻略:从基础到进阶
【4月更文挑战第30天】本文深入讲解JavaScript与DOM交互,涵盖DOM基础、获取/修改元素、创建/删除元素、事件处理结合及性能优化。通过学习,开发者能掌握动态改变网页内容、结构和样式的技能,实现更丰富的交互体验。文中还讨论了DOM操作在实际案例、与其他前端技术结合的应用,助你提升前端开发能力。
|
1天前
|
JavaScript 前端开发
JavaScript 提供了多种方法来操作 DOM(文档对象模型)
【5月更文挑战第11天】JavaScript 用于DOM操作的方法包括获取元素(getElementById, getElementsByClassName等)、修改内容(innerHTML, innerText, textContent)、改变属性、添加/删除元素(appendChild, removeChild)和调整样式。此外,addEventListener用于监听事件。注意要考虑兼容性和性能当使用这些技术。
6 2
|
6天前
|
JavaScript 前端开发 安全
javascript操作DOM的方法
javascript操作DOM的方法
11 0
|
6天前
|
JavaScript 前端开发 容器
js操作dom元素
js操作dom元素
13 0
|
13天前
|
前端开发 JavaScript 数据安全/隐私保护
前端javascript的DOM对象操作技巧,全场景解析(二)
前端javascript的DOM对象操作技巧,全场景解析(二)
|
13天前
|
移动开发 缓存 JavaScript
前端javascript的DOM对象操作技巧,全场景解析(一)
前端javascript的DOM对象操作技巧,全场景解析(一)
|
13天前
|
JavaScript 前端开发
JavaScript DOM 文档对象模型(获取、改变html元素)
JavaScript DOM 文档对象模型(获取、改变html元素)
|
17天前
|
JavaScript
js_操作dom(委托和冒泡事件)
js_操作dom(委托和冒泡事件)
16 0
|
17天前
|
移动开发 JavaScript 前端开发
webgl学习笔记3_javascript的HTML DOM
webgl学习笔记3_javascript的HTML DOM
19 0
webgl学习笔记3_javascript的HTML DOM
|
20天前
|
JavaScript 前端开发 UED
深入解析JavaScript原生操作DOM技术
【4月更文挑战第22天】本文深入探讨JavaScript原生DOM操作技术,包括使用`getElement*`方法和CSS选择器获取元素,借助`createElement`与`appendChild`动态创建及插入元素,修改元素内容、属性和样式,以及删除元素。通过掌握这些技术,开发者能实现页面动态交互,但应注意避免过度操作DOM以优化性能和用户体验。