这篇博客介绍了JavaScript基础中的DOM（文档对象模型），它是一个通过JS控制HTML的标准API。示例代码展示了如何使用getElementById方法获取并操作HTML元素，如改变图片源和div的背景颜色。此外，还演示了如何动态修改CSS样式，例如改变div的背景颜色。通过这些实例，阐述了JavaScript在网页交互中的实用性和趣味性。
javascript基础值DOM文档对象模型是什么？
DOM文档对象就是 通过JS控制HTML的一个API接口
document缩写就是DOM
其实这种说法，我看到的时候也很蒙圈，直到看了代码 才明白了一些。
所以我们上代码吧
<!Doctype html>
<html>
<head>
<meta charset="UTF-8" />
</head>
<body>
<img id='img1' src="图片地址" />
<div id="div1">div1</div>
<script type="text/javascript">
var div1=document.getElementById('div1');
//getElementById 返回指定ID的元素
alert(div1);//这里输出div1 我们会发现document.getElementById是一个对象。[object HTMLDivElement]
alert(div1.id);//获取html div1中id的值。
var img1=document.getElementById('img1');//获取HTML img1标签中的元素
setTimeout("img1.src='图片地址',2000")//修改HTML img1标签中的SRC属性。
</script>
</body>
</html>
js真的很好玩，很快就能 实现一些好玩的功能。
下面再来看看如何通过 document（DOM）来修改CSS的样式。
<!Doctype html>
<html>
<head>
<meta charset="UTF-8" />
<style type="text/css">
.auto{
width:100px;
height:100px;
margin:0 auto;
background:pink;
}
.co1{
color:red;
}
</style>
<!--这里我们是div1的CSS属性 我们先设置好，然后下面我们尝试用JS修改div1的这些属性-->
</head>
<body>
<div id="div1" class="auto">div1</div>
<script type="text/javascript">
var div1=document.getElementById('div1');
div1.style.background='#91CA49';//这里对 div1的背景颜色进行了修改。
</script>
</body>
</html>
转载请标明出处：https://www.dir321.com/
1785
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
