JavaScript DOM对象

HTML DOM


当页面被加载时,浏览器会创建文档对象模型(Document Obiect Model)

JavaScript DOM对象_第1张图片
HTMLDOM
JavaScript DOM对象_第2张图片
Js与DOM

JsDOM操作HTML

JavaScript DOM对象_第3张图片
dom操作HTML
JavaScript DOM对象_第4张图片
点击按钮后文本被覆盖
JavaScript DOM对象_第5张图片
image.png
JavaScript DOM对象_第6张图片
image.png

如果有很多内容还是会被覆盖掉!

JavaScript DOM对象_第7张图片
inner

通过标签名寻找HTML元素

JavaScript DOM对象_第8张图片
通过标签名寻找元素

改变HTML的属性


使用属性attribute
中文翻译:属性

JavaScript DOM对象_第9张图片
image.png
JavaScript DOM对象_第10张图片
image.png

通过DOM对象改变CSS


语法:

document.getElementById(id).style.property=new style
JavaScript DOM对象_第11张图片
css

DOM EventListener


DOM EventListener给元素添加一个事件句柄
中文翻译:事件侦听器

addEventListener()
添加一个事件句柄
removerEventListener()
删除一个事件句柄
JavaScript DOM对象_第12张图片
one
JavaScript DOM对象_第13张图片
多句柄不会被覆盖掉
JavaScript DOM对象_第14张图片
remover

你可能感兴趣的:(JavaScript DOM对象)