JavaScript的BOM和DOM

DOM：
通过 HTML DOM,使用 JavaScript访问 HTML 文档的所有元素。
当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model

BOM：
ECMAScript是JavaScript的核心，但如果要在web中使用JavaScript，那么BOM则无疑才是真正的核心。因为BOM提供了很多对象可以让JavaScript去操作浏览器。
浏览器对象模型（BOM）使javaScript有能力与浏览器对话
浏览对象模型（BOM）：尚无正式标准
由于浏览器几乎已经实现了javaScript交互性方面的相同方法和属性，因此常被认为是BOM的方法和属性

案例1：

赠汪伦

李白乘舟将欲行

忽闻岸上踏歌声

桃花潭水深千尺

不及汪伦送我情

    <input type="button" value="获取修改CSSY样式" onclick="click1()"/>

    <script type="text/javascript">
        function click1(){
            var p1=document.getElementsById("p1");
            p1.style.color="red";
            p1.style.fontSize="30px";
            p1.style.backgroundColor="skyblue";

            console.log(p1.style.color);
            console.log(p1.style.fontSize);
            console.log(p1.style.backgroundColor);
        }
    </script>
</body>

案例二：

hello 创建和删除DOM元素

    <input type="button" value="创建元素" onclick="click1()"/>
    <input type="button" value="删除元素" onclick="click2()"/>
    <script type="text/javascript">
        function click1(){
            //1创建元素Img
            var img1=document.createElement("img");
            //2给元素属性赋值
            img1.src="img/05.jpg";
            img1.alt="图片";
            img1.style.width="100px";
            //3把元素加入dom中
            var span1=document.getElementById("span1");
            document.getElementById("box").insertBefore(img1,span1);
        }

        function click2(){
            var span1=document.getElementById("span1");
            //2直接删除
            span1.remove();
        }
    </script>
</body>

案例三：

案例：动态事件显示事件

案例：window对象

XXXXXX

来源：CSDN

作者：独孤自在

链接：https://blog.csdn.net/u013208478/article/details/104730767