一、DOM对象
DOM（Document Object Model文档对象模型）：将HTML的各种元素映射为JS可访问的对象。
HTML文档中的所有内容都是节点，这些东西在HTML中我们称为元素。
- 整个文档是一个文档节点
- 每个HTML元素是元素节点
- HTML元素的文本是文本节点
- 每个HTML属性时属性节点
- 注释是注释节点
DOM时间监听
类似于python中的while循环机制
|
事件 |
描述 |
| onclick | 用户点击HTML元素 |
| onmouseover | 用户在一个HTML元素上移动鼠标 |
| onmouseout | 用户从一个HTML元素开移动鼠标 |
| onkeydown | 用户按下键盘按键 |
| onload | 浏览器已完成页面的加载 |
| onchange | HTML元素改变 |
二、页面元素的操作
document表示整个HTML页面，window表示HTML页面上面的整个部分（窗口部门）。
1、元素查找
- e = document.getElementById（“kw”）
- e = document.getElementsByClassName
- document.getElementsByName
- document.getElementsByTagName
说明：e是一个对象
获取文本e.textContent
e.outerhtml 对应HTML的双引号的字符串，可以修改HTML
通过ByID查找获取的是单个元素，后三者获取的值是列表（获取元素用e[0]方式获取），因为ID是唯一的，其他的是有可能不唯一的。
CSS查找：
- document.querySelector（“#kw”）#表示ID 获取的是单个元素
- document.querySelectorAll（“#kw”） 获取的也是一个列表
2、元素获取
- document.title
- document.URL
- e = document.getElementById（“kw”）
- e.herf
- e.maxLength
- e.getAttribute("maxLength")
3、元素修改
- a = document.getElementByTagName(‘html‘)
- b = a[0]
- b.innerHTML = ‘hello‘ 改变整个页面
- c = document.getElementById（“kw”）
- c.id = ‘qqq‘
- c.setAttribute(‘id‘, ‘hello‘)
修改中用的做多的是修改disable，readonly和input里的value值
原文地址：https://www.cnblogs.com/qyh0902/p/11184964.html
时间： 2024-10-01 19:20:10