JS HTML DOM记录1
JS HTML DOM:
Document Object Model 文件对象模型
1、 JavaScript HTML DOM 文档:
(1) 查找HTML元素:
方法 | 描述 |
document.getElementById(id) | 通过元素 id 来查找元素 |
document.getElementsByTagName(name) | 通过标签名来查找元素 |
document.getElementsByClassName(name) | 通过类名来查找元素 |
(2)改变HTML元素
方法 | 描述 |
element.innerHTML = new html content | 改变元素的 inner HTML |
element.attribute = new value | 改变 HTML 元素的属性值 |
element.setAttribute(attribute, value) | 改变 HTML 元素的属性值 |
element.style.property = new style | 改变 HTML 元素的样式 |
(3)添加和删除元素
方法 | 描述 | |
document.createElement(element) | 创建 HTML 元素 | |
document.removeChild(element) | 删除 HTML 元素 | |
document.appendChild(element) | 添加 HTML 元素 | |
document.replaceChild(element) | 替换 HTML 元素 | |
document.write(text) | 写入 HTML 输出流 |
(4)添加事件处理程序
方法 | 描述 |
document.getElementById(id).onclick = function(){code} | 向 onclick 事件添加事件处理程序 |
(5)查找HTML对象
……
https://www.w3school.com.cn/js/js_htmldom_document.asp JavaScript HTML DOM文档
2、 JavaScript HTML DOM 改变CSS
document.getElementById(id).style.property = new style
3、 JavaScript HTML DOM事件
4、 JavaScript HTML DOM事件监听器
addEventListener() 方法
当用户点击按钮时触发事件监听器: document.getElementById("myBtn").addEventListener("click", displayDate);
5、 Javascript HTML DOM 导航
6、 节点
添加、删除、替换节点