js的DOM編程基礎(chǔ)

發(fā)布時(shí)間：2020-07-26 05:20:27 來(lái)源：網(wǎng)絡(luò) 閱讀：375 作者：匯天下豪杰欄目：開(kāi)發(fā)技術(shù)

1、DOM編程

是文件對(duì)象模型，是可擴(kuò)展的編程語(yǔ)言的接口，是專門(mén)為修改標(biāo)簽服務(wù)的；

思路：先找要修改的標(biāo)簽，對(duì)其進(jìn)行增加/修改，可以修改某一個(gè)屬性/樣式，從而讓標(biāo)簽動(dòng)起來(lái)；

DOM是和js結(jié)合來(lái)使頁(yè)面動(dòng)起來(lái)的；

2、DOM選擇器

(1)、找標(biāo)簽的：(document是一個(gè)對(duì)象)

document.getElementById('id'); //id是唯一的

document.getElementsByName('name'); //名字可以相同

document.getElementsByTagName('tagname'); //通過(guò)標(biāo)簽查找(a、p、div、)

(2)、創(chuàng)建標(biāo)簽

document.createElement('a');

(3)、獲取/修改樣式

obj.className

(4)、獲取/設(shè)置屬性

setattribute(key, val); getattribute(key);

(5)、獲取/修改樣式中的屬性

obj.style.屬性

注意：js中的屬性名稱可能和CSS中的名稱不一致：

以上方法的示例如下：

<!DOCTYPE html>

<html>
    <head>
        <meta http-equiv="content-type" content="text/html;charset=utf-8">
        <title>js1</title>
        <style>
            .show{
                
            }
            .hide{
                display:none
            }
        </style>
    </head>
    
    <body>
        <div id = 't1'>abc</div>
        <div id = 't2'>d<span>e</span>f</div>
        <hr/>
        
        
        <!--
        <script type='text/javascript'>    
            var id1 = document.getElementById('t1'); //文檔對(duì)象
            console.log(id1.innerText);  //獲得標(biāo)簽內(nèi)容
            id1.innerText = '123';  //對(duì)標(biāo)簽內(nèi)容進(jìn)行修改
            console.log(id1.innerText);
            var id2 = document.getElementById('t2'); //文檔對(duì)象
            console.log(id2.innerHTML); //innerText和innerHTML等價(jià)
        </script>-->
<!--
            <div id = '123'>abcdefghijkl</div>
            <hr/>
            <div name = 't1'>jkl</div>
            <hr/>
            <div name = 't1'>uio</div>
            <hr/>
            <script type = 'text/javascript'>
                var s = document.getElementById('123');
                s.innerText = 'hao';
                var names = document.getElementsByName('t1');
                //names[0].innerText = 'de';
                //names[1].innerText = 'hen';
                for(var items in names){
                    names[items].innerText = 'zaima?';
                }
                var all = document.getElementsByTagName('div');
                for(var items in all){
                all[items].innerText = 'xing';
            }
-->
<!--
        <div id = 't1' class = 'show' name = 'alex'>內(nèi)容</div>    
        <div id = 't2' style = 'width:500px;height:200px;border:2px solid #333;'></div>
-->        
        <!--
        <form id = ‘F1’ action = 'https://www.sogou.com/web?' method = 'GET'>
            <input type = 'text' name = 'query'/>   
            <input type = 'submit' value = '提交' />
            <input type = 'button' value = '偽提交' onclick = 'Foo();' />
                //點(diǎn)擊執(zhí)行Foo()函數(shù)，是一個(gè)事件
        </form>
        
        <script type = 'text/javascript'>
        /*創(chuàng)建標(biāo)簽方法1、
            var tag = document.createElement('a');
            tag.href = 'http://www.baidu.com.cn'
            tag.innerText = '點(diǎn)我啊';
            var id1 = document.getElementById('t1');  //尋找父容器
            id1.appendChild(tag);
        */
        /*
        創(chuàng)建標(biāo)簽方法2、
        var tag = "<a href = 'http://www.baidu.com.cn'>走你</a>";
        var id1 = document.getElementById('t1');
        id1.innerHTML = tag;
        */            
        /*
        var id1 = document.getElementById('t1');
        id1.className = 'hide';   //修改className
        */
        /*
        var id1 = document.getElementById('t1');
        console.log(id1.getAttribute('name')); //獲取屬性
        id1.setAttribute('name', 'oldboy');
        console.log(id1.getAttribute('name'));
        
        var id1 = document.getElementById('t2');
        console.log(id1.style.width);
        */
        提交表單
        function Foo(){
            var id1 = document.getElementById('F1');
            id1.submit();
        }
        </script>  -->
    </body>
</html>

3、常用事件

當(dāng)設(shè)置事件時(shí)，相應(yīng)的執(zhí)行操作會(huì)執(zhí)行其所對(duì)應(yīng)的函數(shù)。

onclick：點(diǎn)擊事件

onfocus：元素獲得焦點(diǎn)

onblur：元素失去焦點(diǎn)

一個(gè)應(yīng)用(搜索框)：

<!DOCTYPE html>

<html>
    <head>
        <meta http-equiv="content-type" content="text/html;charset=utf-8">
        <title>頁(yè)面一</title>
        <style>
            .gray{
                color:gray;
            }
            .black{
                color:black;
            }
        </style>
    </head>
    
    <body>
        <input type = 'text' class = 'gray' id = 'tip' value = '請(qǐng)輸入關(guān)鍵字' 
        onfocus = 'Enter();' onblur = 'Leave();'/>
        
        <script type = 'text/javascript'>
            function Enter(){
                var id = document.getElementById('tip');
                id.className = 'black';
                
                if(id.value == '請(qǐng)輸入關(guān)鍵字' || id.value.trim() == ''){
                    id.value = '';
                }
            }
            function Leave(){
                var id = document.getElementById('tip');
                var val = id.value;
                
                if(val.length == 0 || id.value.trim() == ''){
                    id.className = 'gray';
                    id.value = '請(qǐng)輸入關(guān)鍵字';
                }else{
                    id.className = 'black';
                }
            }
        </script>
    </body>
</html>

運(yùn)行結(jié)果

js的DOM編程基礎(chǔ)

撤走之后，沒(méi)有內(nèi)容又會(huì)恢復(fù)原樣?。?！

向AI問(wèn)一下細(xì)節(jié)

js的DOM編程基礎(chǔ)

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽