javascript基础 BOM&DOM 第40天


BOM浏览器对象模型



Brower object Model

由地址栏

  状态栏

色彩深度

宽高

一系列的东西来组成了浏览器,浏览器就是由这一个一个小的部份来组成的。

在机算机里面,这当中一个一个小的部份我们把它叫做对象,于是乎组成了,浏览器对象模型。

DOM 文档对象模型

DOMBOM的一个子部份。也就是说BOM包含 DOM

由于网页文件当中的一个一个标签,来组成了我们看到的真实网页效果。

<html>

<head>

</head>

<body>

<div></div>

<div></div>

</body>

</htmL>

DOM是其中最重要的一个部份。因为其中的很多效果,都是在页面展示中表出出来的。

DOM里面才有元素,

元素就是一个一个的标签。

在未来,我们将元素转为对象后【你可以把元素找到,到JS里面当成对象来看待】,我们也可以按照元素的顺序来在JS里面找到上一个元素,下一个元素,同辈元素,子元素等等。



对象的话就有两个东西:成员属性和成员方法。

innerText在火狐下不兼容但在IE兼容。

我们通常用innerHTML来解决火狐下innerText不兼容的问题。

但是innerHTMLinnerText有不同,代码在解析的时候不一样。innerText不会解析html标签,而innerHTML会把标签解析出来。

注意:js严格区分大小写。

DOM程序或者BOM程序的核心为:

1,在哪个事情源上面发生了什么事件执行什么事件处理程序。

找到对象,改变属性。

<div  onclick="show(this)">test</div>  在当前元素的事件下面,调用程序的时候,传进了this,这个this就指代当前的整个元素。放到JS里面就把当前的元素转为了对象。

常用属性:

innerHTML

innerText

target

href

confirm()  弹出一个对话确有两个选择,一个是确定,一个是取消,取消就返回false 确定就返回true


1.html

<html> 

    <form action="abc.php" method="post" name="fr"> 

        <input type="text" name="username"> 

        <input type="button" value="提交" onclick="show()"> 

    </form> 

    <script>
        function show(){ 

            alert(fr.username.value);
        } 

    </script> 

</html>

a.html

<html>
    <button onclick="show()" onmouseover="b()">测试</button>
    <script>
        function show(){
            alert('aaaaaaaaaaa');
        }
        function b(){ 

            alert('bbbbbbbbbbbbbbbb');
        }
    </script>
</html>

alert.html

<script>
    alert('aaaa'); 

</script>

b.html

<html>
    <head>
    </head>
    <body>
        <div  onclick="show(this)">test</div>
        <script>
        //对象,改变它的属性
            function show(obj){
                obj.innerHTML='php-JS的思路'; 

            }
        </script>
    </body>
</html>

close.html

<html>
    <body>
        <div onclick="window.close();">关闭</div>
        <script>
            function abc(){ 

                close();
            }
        </script>
    </body>
</html>

contextmenu.html

<html>
    <head> 

    </head>
    <body oncontextmenu="return show()">
        <script>
            function show(){
                alert('请不要查看源代码');
                return false;
            }
        </script>
    </body>
</html>

delete.html

<a href="http://www.xlxz.org" onclick="return confirm('是否删除这条新闻?')">删除</a>

on.html

<div onclick="this.innerHTML='aaaa';this.style.background='pink'">bbb</div>

onload.html

<html>
    <head>
    </head>
    <body onload="alert('欢迎光临')" onunload="alert('欢迎下次再来')">
    </body>
</html>

onselectstart.html

<html>
    <head> 

    </head> 

    <body onselectstart="return show()">
        <script>
            function show(){
                return false;
            }
        </script>
    </body>
</html>

qh.html

<html> 

    <style>
        .one,.two{background:pink;width:100px;height:50px;border:1px solid #ccc;float:left} 

        .ys{width:100px;height:50px;border:1px solid #ccc;float:left;background:#ccc} 

        .tt{width:100px;height:50px;border:1px solid #ccc;float:left;background:red} 

    </style> 

    <script> 

        function show(obj){
            obj.className='tt'; 

        } 

        function t(obj){ 

            obj.className='ys';
        } 

        //在哪个事件源上面,产生了什么事件,调用哪一个事件处理程序。 

        //事件:onmouseover  onmouseout 

        //整个元素就是事件源: 

        //<div class="one" onmouseover="show(this)" onmouseout="t(this)">军事</div> 

        //<div class="two" onmouseover="show(this)" onmouseout="t(this)">科技</div> 

        //事件处理程序: 

        // show()   t(); 

    </script> 

    <div class="one" onmouseover="show(this)" onmouseout="t(this)">军事</div> 

    <div class="two" onmouseover="show(this)" onmouseout="t(this)">科技</div> 

</html>

sq.html

<html>
    <head> 

    </head> 

    <body>
        <input type="text" name="username" onfocus="t()"> 

        <input type="text" name="a"  > 

        <script>
            function show(){ 

                alert('ok php');
            } 

            function t(){ 

                alert('this is php.xlxz.org ....');
            }
        </script>
    </body>
</html>

st.html

<html>
    <head> 

    </head> 

    <body>
        <button onclick="show()">请猛点</button>
        <a href="http://www.xlxz.org" id="one">心灵</a> 

        <script> 

            function show(){ 

            var d=document.getElementById('one'); 

            d.innerHTML='php.xlxz.org is no.1';
            d.href='http://php.xlxz.org'; 

            d.target='_blank';
        }
        </script>
    </body>
</html>

shree.html

<html>
    <head> 

    </head>
    <body> 

        <script for="st" event="onclick">
            this.innerHTML='ok php'; 

        </script> 

        <div id="st">php.xlxz.org</div>
    </body>
</html>

two.html

<html> 

    <div id="h">php,寂寞不自信</div>
    <script>
        var s=document.getElementById('h');
        s.onclick=function(){
            this.innerHTML='php.xlxz.org。';
        }
    </script>
</html>

weibo.html

<html> 

    <head> 

    </head> 

    <body> 

        <button onclick="show()">点一下</button> 

        <div id="one">php</div> 

        <script>
            function show(){ 

                var dada=document.getElementById('one');
                dada.innerHTML='<font color="red">php寂寞</font>'; 

            }
        </script>
    </body>
</html>

yd.html

<html> 

    <body> 

        <div onclick="show()">移动</div> 

        <script>
            function show(){
                //moveBy(100,100);
                moveTo(500,500);
            }
        </script>
    </body>
</html>

zobject.html

<html>
    <head>
    </head>
    <body>
        <div id="r" style="background:pink;width:300px;height:300px" onclick="show(this)"></div>
        <script>
            function show(obj){
                obj.style.background='red';
            }
        </script>
    </body>
</html>