JS(四)DOM模型之属性样式_dom模型操作样式-CSDN博客

本文链接：https://blog.csdn.net/Z18789231876/article/details/43792501

一、DOM模型

1.简介

DOM模型：文档对象模型，Document Object Model。

DOM何时创建：当网页被加载的时候，浏览器就会创建页面的文档对象模型。

2.作用

通过DOM模型，用户可以修改HTML元素属性和样式，增减HTML元素，响应HTML元素的事件。

二、常用JS DOM功能

1.输出流：document.write(),动态创建页面输出内容。

2.改变标签内容：document.getElementById("id").innerHTML="";

3.改变属性:document.getElementById("id").src|href|title|..|="";

4.改变CSS样式:document.getElementById("id").style.width|height|color|backgoundColor="";

5.常见事件

1)点击事件:onclick()

2)页面加载事件：onload()和onunload()

3)内容改变事件：change()

4)聚焦事件：onfocus()

5)鼠标事件：onmouseover()、onmouseout()、onmousedown()、onmouseup()

6)其它事件：......

其实这种事件有很多，可以参考w3c提供的js dom事件表，上面只是常用的一部分事件。

三、修改属性和样式示例

<html>
<head>
<meta charset="utf-8" />
</head>
<body>
    <div id="div1">这个是div1</div>
    <img src="./header.jpg"/>
    <img src="./header.jpg"/>
</body>
<script>
//修改属性
var ele_img = document.getElementsByTagName("img");//返回的是一个元素集合
var x =0;
for(;x < ele_img.length;x++){   //xx.length,返回数组的长度
	ele_img[x].src="./header1.jpg";
}

//修改CSS样式
var ele_div1 = document.getElementById("div1");//id是唯一的，范湖的是具体的元素
ele_div1.innerHTML="这个是替换div1的内容";
//css样式名：遵循驼峰命名法
ele_div1.style.color="#ffffff";
ele_div1.style.width="300px";
ele_div1.style.height="300px";
ele_div1.style.backgroundColor="#ff0000";
ele_div1.style.fontSize="24px";
ele_div1.align="center";
ele_div1.style.marginTop="30px";
ele_div1.style.paddingTop="100px";
ele_div1.style.visibility="visible";//visible|hidden
</script>
</html>