一, 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 页面, Windows 表示 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