JS HTML DOM记录1

Posted 2021-03-22 dong973711

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、  节点

添加、删除、替换节点