当前位置：首页 > news >正文

Web API之DOM

news 2026/2/9 5:16:07

DOM

一.认识DOM
二.获取元素
三.事件基础
四.操作元素
- - (1).改变元素内容
  - (2).修改元素属性(str、herf、id、alt、title）
  - (3).修改表单属性
  - (4).修改样式属性操作
  - (5).小结
五.一些思想
- (1).排他思想
- (2).自定义属性的操作
六.节点操作
- 1.认识
- 2.节点层级关系
- 3.创建和添加、删除、复制节点
七.DOM重点核心

一.认识DOM

API是接口，Web APIs是浏览器接口，web APIs包括DOM和BOM,是js独有的部分
在这里插入图片描述
DOM树

二.获取元素

通过id
document.getElementById()
在这里插入图片描述
通过标签名
document.getElemnetByTagName()

HTML5新增方法
通过类名
document.getElementByClassName()
通过指定选择器的第一个元素对象
document.querySelector()//注意.box #nav
全部
document.querySelectorAll()

特殊元素
document.body
document.documentElement
在这里插入图片描述

三.事件基础

事件三要素：事件源、事件类型、事件处理程序
在这里插入图片描述
事件类型

执行事件步骤

例子，显示当前系统时间

四.操作元素

(1).改变元素内容

innerText
innerHTML
在这里插入图片描述

(2).修改元素属性(str、herf、id、alt、title）

在这里插入图片描述
例子、不同时间段显示不同图片和不同问候语

(3).修改表单属性

在这里插入图片描述
例子、

(4).修改样式属性操作

1.通过element.style.属性（驼峰）
行内多
在这里插入图片描述
例子、淘宝二维码广告关闭

例子、循环精灵图

例子、显示隐藏文本框内容
在这里插入图片描述

2.通过修改类名更改样式内容

例子、改变提示信息
在这里插入图片描述

(5).小结

在这里插入图片描述

五.一些思想

(1).排他思想

在这里插入图片描述

例子、表格隔行变色

例子、百度换肤

例子、表单全选和取消全选

(2).自定义属性的操作

1.获取属性值
element.属性
element.getAttribute()
在这里插入图片描述
2.设置属性值
element.属性=值
element.setAttribute(属性，值）
3.移除属性
element.removeAttribute()

例子、tab栏切换

H5自定义属性
date-开头
dateset是一个存放所有date开头的自定义属性
获取时驼峰

六.节点操作

why
DOM获取元素复杂
节点层级关系
可修改创建删除

1.认识

在这里插入图片描述

2.节点层级关系

父节点parentNode
在这里插入图片描述
子节点
全部子节点childNodes
元素子元素节点childRen

第一个子节点firstChild
第一个子元素节点firdtElementChild
最后一个子元素节点lastElementChild

解决兼容性问题

兄弟节点
下一个兄弟节点nextSibling
下一个兄弟元素节点nextElementSibling

在这里插入图片描述

3.创建和添加、删除、复制节点

创建 document.creatElement（）（创建的一定是孩子）
末尾添加document.appendChild()
添加指定元素前document.insert Before(child,指定元素）
在这里插入图片描述
例子、简单版发布留言案例

删除节点
node.removeChild()

删除留言案例

复制节点
node.cloneNode()

三种动态创建元素区别