26 JavaScript HTML DOM简介&方法&文档

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>