HTML DOM: Document Object Model 文档对象模型。是HTML的标准对象模型和编程接口。(JavaScript只是可以操作HTML DOM的语言之一)
- 定义了HTML元素对象和元素属性
- 定义了访问元素的方法
- 定义了HTML元素的事件
通过此模型,JavaScript获得创建动态HTML的所有力量:
- JavaScript能够对页面中的HTML元素和属性进行增删改查
- JavaScript能够改变页面的CSS样式
- JavaScript能创建新的HTML事件并对已有的HTML事件做出反应
JavaScript DOM 方法:
<script> //查找 //getElementById是方法,innerHTML是属性 document.getElementById("demo").innerHTML = "JavaScript DOM"; document.getElementsByTagName("p")[0].innerHTML = "JavaScript DOM2"; document.getElementsByClassName("pClass")[0].innerHTML = "JavaScript DOM3"; //改变 document.getElementsByTagName("input")[0].setAttribute("type", "button"); document.getElementsByTagName("p")[0].style.backgroundColor = "red"; //创建HTML元素 var p1 = document.createElement("p"); var t = document.createTextNode("i am a p"); var t2 = document.createTextNode("i am a 2p"); p1.appendChild(t); document.body.appendChild(p1); //删除HTML元素结点 p1.removeChild(t);// p1.removeChild(p1.childNodes[0]); //添加HTML元素结点 p1.appendChild(t); //替换HTML元素结点 p1.replaceChild(t2,t);//cur,pre //document.write输出流 document.write("Output Stream"); //添加事件处理程序 document.getElementsByTagName("input")[0].onclick = function(){alert(document.URL)} </script>