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/