javascript基础 DOM 第43天

DOM对象

1, 如果把document.write写在方法里面再调用的时候,可以重新打开一个document对象,在新的document对象里面载入新的文本。可以后退和前进看到历史内容。


2, 如果直接在document对象里面write写入文本的时候,不会重新开一个document对象,在里面直接加上内容。


整个文档载入顺序是从上到下载入


在函数里面可以document.close()然后再document.write(),是关闭原有的文档,再向新的文档里面再写入内容


注意参考:2.html页面和1.html页面


我们在找的时候,可以通过


document.all

document.links

document.images

document.forms

document.metas


但是这样找起来麻烦,因此我们推出了:


getElementsBy

getElementBy


每次都要写: document.getElementById('content') 太啰嗦,太复杂,太悲情了


function $(id){

return document.getElementById(id);

}

getElementsByTagName()

getElementsByName();

查找class的方法,用自己写js的方式将其写出来:

function $(id){
    var arr=new Array();
    var str=id.substr(0,1);
    var classname=id.substr(1);
        if(str=='#'){
            return document.getElementById(id);
        }else if(str=='.'){
            var d=document.all;
            var j=0;
                for(i=0;i<d.length;i++){
                    if(d[i].className==classname){
                    arr[j]=d[i];
                    j++;
                   }
                }
            return arr;
       }else{
            return document.getElementsByTagName(id);
        }
}

Form下面的方法:

Submit();

我可以让button也实现提交效果就通过submit()方法去实现

focus()方法 让焦点回到神马地方去

1.html

<html>
    <head>
    </head>
    <body>
        welcome?<br>

        记事本 OF PHP <br />
        <button onclick="show()">奇迹</button>
        <script>
            function show(){
                document.write('www.xlxz.org');
                document.close();
                document.write('php.xlxz.org。');
            }
        </script>
    </body>
</html>

2.html

<html>
    <head>
    </head>
    <body>
        <button onclick="demo()">点击</button>
        <script>
        function demo(){
            var d=document.getElementById('content');
            d.innerHTML='hello';
        }
        </script>
        <div id="content">xlxz.org</div>
    </body>
</html>

a.html

<html>
    <head>
    </head>
    <body>
        <script>
            for(a in document){
                document.write(a+' '+document[a]+'<br>');
            }
        </script>
    </body>
</html>

all.html

<html>
    <head>
    </head>
    <body>
            <img src="youfuqi.jpg" name="a"/>
            <a href="http://php.xlxz.org">xlxz</a>
            <div>this is haha</div>
            <script>
                var d=document.all[4];
                alert(d.tagName);
            </script>
    </body>
</html>

cls.html

<html>
    <head>

    </head>

    <body>
        <button  onclick="show()">php.xlxz.org</button>

        <div id="cls"></div>

        <script>
            function show(){
                var img=document.createElement('img');
                //img.setAttribute('src','cls.jpg');
                img.src='cls.jpg';
                img.alt='php.jpg';
                img.setAttribute('width',300);
                var a=document.createElement('a');
                a.href='http://www.xlxz.org';
                a.setAttribute('target','_blank');
                a.appendChild(img);
                var cls=document.getElementById('cls');
                cls.appendChild(a);
                //cls.removeChild(a);
            }
        </script>
    </body>
</html>

getId.html

<html>
    <head>
    </head>
    <body>
        <div id="content">apc</div>
        <div id="ss">php,postgresql</div>
        <script>
            var d=$('content');
            d.innerHTML='apache,nginx';
            var s=$('ss');
            s.innerHTML='php.mysql.linux.freebsd';
            function $(id){
                return document.getElementById(id);
            }
        </script>
    </body>
</html>

getName.html

<html>
    <head>

    </head>

    <body>

        <div class="a">k</div>
        <div class="b">五</div>
        <div class="a">水</div>

        <div>我</div>

        <img src="1.jpg" name="a"/>

        <img src="2.jpg" name="a"/>

        <script>

            //var d=document.getElementsByTagName('div');

            //alert(d[2].innerHTML);

            //var d=document.getElementsByName('a');

            //alert(d[1].src);

            /*

            function $(id){

                var str=id.substr(0,1);

                if(str=='#'){
                    return document.getElementById(id);
                }else{
                    return document.getElementsByTagName(id);
                }

            }
            */

            var t=$('.a');

            t[0].innerHTML='xlxz';
            function $(id){

                var arr=new Array();

                var str=id.substr(0,1);

                var classname=id.substr(1);

                if(str=='#'){
                    return document.getElementById(id);
                }else if(str=='.'){
                    var d=document.all;
                    var j=0;
                    for(i=0;i<d.length;i++){
                        if(d[i].className==classname){
                            arr[j]=d[i];
                            j++;
                        }
                    }
                    return arr;
                }else{
                    return document.getElementsByTagName(id);
                }
            }
        </script>
    </body>
</html>

images.html

<html>
    <head>
    </head>
    <body>
        <img src="1.jpg" name="a"/>
        <img src="2.jpg" />
        <img src="3.jpg" />
        <img src="4.jpg" />
        <script>
            document.title='实力啊';
            document.images['a'].src='youfuqi.jpg';
        </script>
    </body>
</html>

links.html

<html>
    <head>
    </head>
    <body>
        <a href="http://www.xlxz.org" name="who">ok</a>
        <a href="http://php.xlxz.org">this is </a>
        <script>
            window.document.links.item('who').innerHTML='桂欢爱谁?';
        </script>
    </body>
</html>

node.html

<html>

    <head>

    </head>

    <body>

        <div>
            <div>
                <div>声</div>
                <div>原</div>
            </div>

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

                <div>我想说</div>

            </div>
        </div>

            <script>
                var d=document.getElementById('one');
            /*
                var s=d.parentNode.parentNode.firstChild.lastChild;
                alert(s.innerHTML);
                var s=d.parentNode.previousSibling.childNodes;
                alert(s[1].innerHTML);
            var s=d.parentNode.previousSibling.lastChild;
            alert(s.innerHTML);
            */
            </script>
    </body>
</html>

pop.html

<html>
    <head>
        <style>
            .dis{position:absolute;top:30%;left:30%;border:10px solid #ccc;z-index:100}
            .tm{

            background:rgba(200, 200, 200, 0.8) none repeat scroll 0 0 !important;/*实现FF背景透明,文字不透明*/
            filter:Alpha(opacity=80); background:#ccc;width:100%;height:100%;
            position:absolute;
            top:0px;
            left:0px;
            z-index:88;
            }

        </style>

    </head>

    <body>
        <img src="cls.jpg" width="300" height="421" onclick="zk(this)"/>

        <script>
            function zk(obj){

                var div=document.createElement('div');
                var img=document.createElement('img');

                var di=document.createElement('div');

                di.className='tm';
                di.id='di';

                img.src=obj.src;

                div.style.width=obj.width+10+'px';
                div.style.height=obj.height+10+'px';

                div.onclick=function(){
                    var di=document.getElementById('di');
                    var dis=document.getElementById('dis');                 document.body.removeChild(di);
document.body.removeChild(dis);
                }
                div.className='dis';
                div.id='dis';
                div.appendChild(img);
                document.body.appendChild(di);
                document.body.appendChild(div);
            }
        </script>
    </body>
</html>

qx.html

<html>

    <head>

    </head>

    <body>
        <input type="checkbox" name="a[]">测试啊测试<br />
        <input type="checkbox" name="a[]">测试啊测试<br />
        <input type="checkbox" name="a[]">测试啊测试<br />
        <input type="checkbox" name="a[]">测试啊测试<br />
        <input type="checkbox" name="a[]">测试啊测试<br />
        <input type="checkbox" name="a[]">测试啊测试<br />
        <input type="checkbox" name="a[]">测试啊测试<br />
        <input type="checkbox" name="a[]">测试啊测试<br />
        <input type="checkbox" name="a[]">测试啊测试<br />
        <input type="checkbox" name="a[]">测试啊测试<br />
        <input type="checkbox" name="a[]">测试啊测试<br />
        <input type="checkbox" name="a[]">测试啊测试<br />
        <input type="checkbox" name="a[]">测试啊测试<br />
        <input type="checkbox" name="a[]">测试啊测试<br />
        <input type="checkbox" name="a[]">测试啊测试<br />
        <input type="checkbox" name="a[]">测试啊测试<br />
        <input type="checkbox" name="a[]">测试啊测试<br />
        <input type="checkbox" name="a[]">测试啊测试<br />
        <input type="checkbox" name="a[]">测试啊测试<br />
        <input type="checkbox" name="a[]">测试啊测试<br />
        <input type="checkbox" name="a[]">测试啊测试<br />
        <input type="checkbox" name="a[]">测试啊测试<br />

        <button onclick="qx()">全选</button><button onclick="qbx()">全不选</button><button onclick="fx()">反选</button>

        <script>
            function qx(){
                var d=document.getElementsByName('a[]');
                for(i=0;i<d.length;i++){

                    d[i].checked=true;

                }

            }
            function qbx(){
                var d=document.getElementsByName('a[]');

                for(i=0;i<d.length;i++){

                    d[i].checked=false;
                }

            }

            function fx(){
                var d=document.getElementsByName('a[]');

                for(i=0;i<d.length;i++){
            /*      if(d[i].checked){

                        d[i].checked=false;
                    }else{
                        d[i].checked=true;

                    }

                    */
                    d[i].checked    = !d[i].checked;
                }

            }

        </script>

    </body>

</html>

scroll.html

<html>
    <head>

    </head>

    <body onscroll="show()">

        <script>
            function show(){
                alert(document.body.scrollTop);

            }
        </script>

        <p>xlxz.org</p>
        <p>xlxz.org</p>
        <p>xlxz.org</p>
        <p>xlxz.org</p>
        <p>xlxz.org</p>
        <p>xlxz.org</p>
        <p>xlxz.org</p>
        <p>xlxz.org</p>
        <p>xlxz.org</p>
        <p>xlxz.org</p>
        <p>xlxz.org</p>
        <p>xlxz.org</p>
        <p>xlxz.org</p>
        <p>xlxz.org</p>
        <p>xlxz.org</p>
        <p>xlxz.org</p>
        <p>xlxz.org</p>
        <p>xlxz.org</p>
        <p>xlxz.org</p>
        <p>xlxz.org</p>
        <p>xlxz.org</p>
        <p>xlxz.org</p>
        <p>xlxz.org</p>
        <p>xlxz.org</p>
        <p>xlxz.org</p>
        <p>xlxz.org</p>
        <p>xlxz.org</p>
        <p>xlxz.org</p>
        <p>xlxz.org</p>
        <p>xlxz.org</p>
        <p>xlxz.org</p>
        <p>xlxz.org</p>
        <p>xlxz.org</p>
        <p>xlxz.org</p>
        <p>xlxz.org</p>
        <p>xlxz.org</p>
        <p>xlxz.org</p>
        <p>xlxz.org</p>
        <p>xlxz.org</p>
        <p>xlxz.org</p>
    </body>
</html>

upload.html

<html>
    <head>

    </head>

    <body>

        <button  onclick="show()">增加一个</button>

        <button onclick="del()">删除</button>
        <div id="upload">

            <input type="file" name="a[]" />

        </div>

        <script>
            var i=1;
            function show(){

                var d=document.createElement('input');

                d.type='file';

                d.name='a[]';

                d.id='t'+i;

                var a=document.createElement('a');

                a.href="javascript:delet("+i+")";

                a.innerHTML='删除';

                var up=document.getElementById('upload');
                up.appendChild(d);
                up.appendChild(a);
                i++;
            }
            function delet(num){
                var up=document.getElementById('upload');

                var id=document.getElementById('t'+num);
                up.removeChild(id);
            }
            function del(){
                var d=document.getElementsByTagName('input');
                var up=document.getElementById('upload');
                var len=d.length-1;
                up.removeChild(d[len]);
            }
        </script>
    </body>
</html>

xxk.html

<html>
    <head>
        <style>
            .xxk{width:200px;height:200px;background:pink}

            .xxk .nav{width:200px;height:50px;}

            .xxk .nav li{float:left;background:#ccc;display:block;width:65px;height:50px}

            .xxk .nav .color{background:#ff00ff}

            .content div{background:orange;width:200px;height:140px;display:none}

            .content .dis{display:block}

        </style>

    </head>

    <body>
        <script>
            function show(num,obj){
                var nav=obj.parentNode;

                var navChild=nav.childNodes;
                var coChild=nav.nextSibling.childNodes;

                for(i=0;i<navChild.length;i++){

                    if(i==num){     navChild[i].className='color';          coChild[i].className='dis';
                    }else{
                        navChild[i].className='';
                        coChild[i].className='';
                    }
                }
            }
        </script>
        <div class="xxk">
            <div class="nav">
                <li class="color" onmouseover="show(0,this)">nginx</li>
                <li onmouseover="show(1,this)">mysql</li>
                <li onmouseover="show(2,this)">php</li>
            </div>
            <div class="content">
                <div class="dis">
                    nginx
                </div>
                <div>
                    mysql
                </div>
                <div>
                    php
                </div>
            </div>
        </div>
    </body>
</html>