HTML DOM - 文档对象模型
当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model)。
1. 通过可编程的对象模型,JavaScript获得了足够的能力来创建动态的HTML。
JavaScript 能够改变页面中的所有HTML 元素
JavaScript 能够改变页面中的所有HTML属性
JavaScript 能够改变页面中的所有CSS样式
JavaScript 能够对页面中的所有事件作出反应
2. 查找HTML元素,有三种方法:
a. 通过id找到HTML元素 getElementById
b. 通过标签名找到HTML元素 getElementsByTagName
c. 通过类名找到HTML元素 在IE5,6,7,8中无效 不推荐
3. 改变HTML内容 innerHTML
改变HTML属性 document.getElementById(id).attribute=new value
改变HTML元素的样式 document.getElementById(id).style.property=new value
<body> <p id="d1">第一段落</p> <p id="d2">第二段落</p> <div>第三段落</div> <div>第四段落</div> <img id="image" src="img/lightoff.jpg" />" <button type="button" onclick="document.getElementById('d2').style.color='yellow'">点击这里</button> <script> var x = document.getElementById("d1"); //通过id找到HTML元素 x.innerHTML="id是d1的段落"; //改变HTML元素内容,用innerHTML var y = document.getElementsByTagName("div"); //通过签名找到HTML元素 y[1].innerHTML = "通过标签名找到对应HTML元素"; var z = document.getElementById("image"); z.src = "img/lighton.jpg"; //改变HTML元素的属性 //改变HTML元素的样式 document.getElementById("d2").style.color = "Blue"; document.getElementById("d2").style.fontFamily = "Arial"; document.getElementById("d2").style.fontSize = "larger"; </script> </body>