JavaScript能够改变页面中所有HTML元素、属性、CSS样式,能对页面中的所有事件做出反应。
DOM可以操作HTML,也可以操作CSS。
DOM操作HTML
通过id找到HTML元素:document.getElementById(" ");
通过标签找到HTML元素:document.getElementByTagName(" ");如果有很多个同样的标签,那么找到的标签是相同标签下的第一个。
改变属性则是innerHTML之前用过document.write(""),但是值得注意的是,一旦使用了这个语句,则会覆盖之前的所有文档。
如下:
<body>
<p>点击按钮前正常显示的一段文字</p>
<p>家里煤气泄露了,忽然想起老师说的面对危险首先要让自己冷静,于是我做了几次深呼吸,结果煤气中毒了。</p>
<p>你遇过最糟糕的追求方式是什么</p>
<p>早上6点在宿舍楼下放1000响鞭炮</p>
<button οnclick="demo01()">确定</button>
<script>
function demo01(){
document.write("点击之后,覆盖之前的所有内容");
}
</script>
输出如下:点击之前
点击之后。。。。
全部被覆盖。。啥都没了
平时最常看见的是以下效果:
<img id="03" src="4.5.2JavascriptDOM操作HTMLtupian01.jpg" />
<button οnclick="demo03()">下一张</button>
<script>
function demo03(){
document.getElementById("03").src="4.5.2JavascriptDOM操作HTMLtupian02.jpg"
}
</script>
输出如下:
DOM操作CSS:
document.getElementById(id).style.property = new style
<body>
<div id="01" class="color">
测试:改变背景颜色
</div>
<button οnclick="demo()">确定</button>
<script>
function demo(){
document.getElementById("01").style.background="green";
}
</script>
</body>
输出如下:
→→
DOM EventListener
添加监听:addEventListener(): 移除监听:removeEventListener():