JavaScript ? day2

JavaScript基礎(chǔ)學(xué)習(xí)筆記之JavaScript提升
了解時(shí)間
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>了解時(shí)間</title>
</head>
<body>
    <script type="text/javascript">
        /**
         * 格林尼治時(shí)間(GTM):是英國(guó)郊區(qū)皇家格林尼治天文臺(tái)的時(shí)間,因?yàn)榈厍蜃赞D(zhuǎn)的原因,不同經(jīng)度上的時(shí)間是不相同的,格林尼治天文臺(tái)是經(jīng)度為0的地方。世界上發(fā)生的重大時(shí)間都是以格林尼治時(shí)間時(shí)間為標(biāo)準(zhǔn)的。
         *
         *
         * 世界協(xié)調(diào)時(shí)間(UTC):世界時(shí)間。1970年1月1日0點(diǎn)。
         */
    </script>
</body>
</html>
Date
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Date</title>
</head>
<body>
    <script type="text/javascript">
        //ECMAScript中的Date類型是在早期Java中的java.util.Date類的基礎(chǔ)上構(gòu)建的。為此Date類型使用自UTC1970年1月1日午夜(零時(shí))開(kāi)始經(jīng)過(guò)的毫秒數(shù)保存時(shí)間的。該Date類型保存的日期能夠精確到1970年1月1日之前和之后的285616年
        

        //創(chuàng)建
        
        //1、直接用Date()函數(shù)
        //返回當(dāng)前時(shí)間
        //注意:不論Date()是否帶參數(shù),返回的都是當(dāng)前時(shí)間
        var date1 = Date("2016-09-18");
        console.log(typeof date1);//String類型
        console.log(date1);


        //2、構(gòu)造函數(shù)法--不傳參數(shù)
        //返回當(dāng)前時(shí)間
        var date2 = new Date();
        console.log(typeof date2);//Object類型
        console.log(date2);


        //3、構(gòu)造函數(shù)法--參數(shù)是一個(gè)表示時(shí)間的字符串
        //3.1 格式:month day, year hours:minutes:seconds
        //December 24, 2008 12:04:13
        //注意:如果省略了小時(shí)、分鐘、秒數(shù),這些會(huì)被設(shè)置為0
        //3.2 2016-09-18 18:32:32    2016-9-18 18:32:32
        //3.3 2016/09/18 18:32:32
        var date3 = new Date("2016/09/18");
        console.log(date3);


        //4、
        var date4 = new Date("2016-09-08");
        console.log(date4);
        //5、
        var date5 = new Date("2016-9-8");
        console.log(date5);



        //6、構(gòu)造函數(shù)法--參數(shù)是(年,月,日,時(shí),分,秒,毫秒)
        //注意:年和月必須寫,且月從0開(kāi)始,日期從1開(kāi)始
        var date6 = new Date(2016,09,9,10,10,10,1000);
        console.log(date6);


        //7、構(gòu)造函數(shù)法--參數(shù)是毫秒數(shù)
        //返回中國(guó)標(biāo)準(zhǔn)時(shí)間
        var date7 = new Date(1000);
        console.log(date7);

    </script>
</body>
</html>
Date對(duì)象的方法
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Data對(duì)象的方法</title>
</head>
<body>
    <script type="text/javascript">
        var date = new Date();


        //獲取年份
        console.log(date.getFullYear());

        //獲取月份,注意0表示1月,依次類推
        console.log(date.getMonth());

        //獲取日期
        console.log(date.getDate());

        //獲取星期
        console.log(date.getDay());

        //獲取小時(shí)
        console.log(date.getHours());

        //獲取分鐘
        console.log(date.getMinutes());

        //獲取秒數(shù)
        console.log(date.getSeconds());

        //獲取毫秒數(shù)
        console.log(date.getMilliseconds());

        //獲取日期對(duì)象所表示的日期距離1970-01-01的毫秒數(shù)
        console.log(date.getTime());



        //設(shè)置年份
        date.setFullYear(2015);

        //設(shè)置月份
        //注意:傳入的月份大于11,則年份增加
        date.setMonth(8);

        //設(shè)置日期
        //注意:如果傳入的日期超過(guò)了該月應(yīng)有的天數(shù)則會(huì)增加月份
        date.setDate(29);

        //注意:星期一般不用設(shè)置
        
        //設(shè)置小時(shí)
        //注意:如果傳入的值超過(guò)23則增加日期
        date.setHours(13);

        //設(shè)置分鐘
        //注意:如果傳入的值超過(guò)了59則增加小時(shí)數(shù)
        date.setMinutes(56);

        //設(shè)置秒數(shù)
        //注意:傳入的值超過(guò)59會(huì)增加分鐘數(shù)
        date.setSeconds(10);

        //設(shè)置毫秒數(shù)
        //注意:傳入的值超過(guò)999會(huì)增加秒數(shù)
        date.setMilliseconds(888);

        //設(shè)置距離1970-01-01的毫秒數(shù)
        date.setTime(1308484904898);

        console.log(date);


        //轉(zhuǎn)換成字符串
        //包含年月日時(shí)分秒
        console.log(date.toLocaleString());
        //包含年月日
        console.log(date.toLocaleDateString());
        //包含時(shí)分秒
        console.log(date.toLocaleTimeString());



        //Date.parse(dateString)
        //參數(shù):日期字符串  格式:2016-05-08  2015/05/08 12:00:00
        //返回該日期距離1970年1月1日0點(diǎn)的毫秒數(shù)
        console.log(Date.parse("2016-10-10"));




    </script>
</body>
</html>
Date對(duì)象間的運(yùn)算
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Date對(duì)象間的運(yùn)算</title>
</head>
<body>
    <script type="text/javascript">
        var date1 = new Date("2016-10-10 10:10:10");
        var date2 = new Date("2016-10-10 10:10:12");

        //兩個(gè)日期對(duì)象之間相差的毫秒數(shù)
        console.log(date2 - date1);

        //返回兩個(gè)日期字符串拼接后的字符串
        console.log(date2 + date1);
        console.log(typeof (date2 + date1));

    </script>
</body>
</html>
BOM簡(jiǎn)介
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>BOM簡(jiǎn)介</title>
</head>
<body style="background-color: red">
    <input type="text" name="abc">
    <button onclick="func()">跳轉(zhuǎn)到綠頁(yè)面</button>
    <button onclick="refresh()">刷新紅頁(yè)面</button>
    <button onclick="ass()">加載綠頁(yè)面</button>

    <button onclick="backPage()">上一頁(yè)</button>
    <button onclick="forwardPage()">下一頁(yè)</button>

    <button onclick="goPage()">go到黃界面</button>


    <script type="text/javascript">
        //BOM:瀏覽器對(duì)象模型(Browser Object Model),是一個(gè)用于訪問(wèn)瀏覽器和計(jì)算機(jī)屏幕的對(duì)象集合。我們可以通過(guò)全局對(duì)象window來(lái)訪問(wèn)這些對(duì)象。
        

        console.log(window.document);
        console.log(window.frames);
        console.log(window.navigator);
        console.log(window.screen);
        console.log(window.location);
        console.log(window.history);
        
        
        


        //window.document
        //是一個(gè)BOM對(duì)象,表示的是當(dāng)前所載入的文檔(即頁(yè)面),但它的方法和屬性同時(shí)也屬于DOM對(duì)象所涵蓋的范圍。
        


        //window.frames
        //是當(dāng)前頁(yè)面中所有框架的集合



        //window.navigator
        //用于反應(yīng)瀏覽器及其功能信息的對(duì)象



        //window.screen
        //提供瀏覽器以外的環(huán)境信息



        //window.location
        //href屬性        控制瀏覽器地址欄的內(nèi)容
        //reload()       刷新頁(yè)面 
        //reload(true)   刷新頁(yè)面,不帶緩存
        //assign()       加載新的頁(yè)面
        //replace()      加載新的頁(yè)面(注意:不會(huì)再瀏覽器的歷史記錄表中留下記錄)
        function func() {
            //alert("點(diǎn)我干啥?");
            window.location.href = "greenWindow.html";
        }
        function refresh() {
            window.location.reload();
        }
        function ass() {
            window.location.assign("greenWindow.html");
            //window.location.replase("greenWindow.html");
        }





        //window.history
        //window.history.length獲取歷史記錄的長(zhǎng)度
        //back()     上一頁(yè)
        //forward()  下一頁(yè)
        //go(num)    //num<0時(shí),跳轉(zhuǎn)到自己后方的第num個(gè)記錄。num>0時(shí),跳轉(zhuǎn)自己前方的第num個(gè)記錄

        console.log("window.history.length = " + window.history.length);
        //上一頁(yè)
        function backPage() {
            window.history.back();
        }

        //下一頁(yè)
        function forwardPage() {
            window.history.forward();
        }
        //
        function goPage() {
            window.history.go(2);
        }


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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>BOM簡(jiǎn)介</title>
</head>
<body style="background-color: green">
    <button onclick="func()">跳轉(zhuǎn)到黃頁(yè)面</button>

    <button onclick="backPage()">上一頁(yè)</button>
    <button onclick="forwardPage()">下一頁(yè)</button>

    <script type="text/javascript">
        function func() {
            window.location.href = "yellowWindow.html";
        }

        function backPage() {
            window.history.back();
        }

        function forwardPage() {
            window.history.forward();
        }
    </script>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>BOM簡(jiǎn)介</title>
</head>
<body style="background-color: yellow">
    <button onclick="func()">回到紅頁(yè)面</button>
    <script type="text/javascript">
        function func() {
            window.history.go(-2);
        }
    </script>
</body>
</html>
window中常用的方法
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>window中常用的方法</title>
</head>
<body>
    <button onclick="openNewWindow()">打開(kāi)新窗口</button>
    <button onclick="closeWindow()">關(guān)閉窗口</button>

    <script type="text/javascript">

        function openNewWindow() {
            //open(url,target,"特性的字符串")
            window.open("yellowWindow.html", "blank", "width=200px, height=400px, top=0px, left=0px");
        }

        function closeWindow() {
            window.close();

            //火狐
            //about:config
            //我會(huì)保證小心
            //allow_src
            //true
        }
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>BOM簡(jiǎn)介</title>
</head>
<body style="background-color: yellow">
</body>
</html>
window常用方法open特性
window中常用的事件-onload加載事件和onunload卸載事件
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>window中常用的事件-onload加載事件和onunload卸載事件</title>
</head>
<body>
    <button onclick="func()">跳轉(zhuǎn)</button>
    <script type="text/javascript">

        //onunload事件
        //當(dāng)頁(yè)面完全卸載再觸發(fā),只有IE支持
        window.onunload = function() {
            alert("確定關(guān)閉");
        };
        function func() {
            window.location.href = "red.html";
        }



        //load事件
        //當(dāng)頁(yè)面加載完成的時(shí)候會(huì)觸發(fā)該事件  
        window.onload = function() {
            alert("我在界面加載完后才顯示");
        };

        alert("頁(yè)面加載中");



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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>red</title>
</head>
<body style="background-color: red">
    
</body>
</html>
window中常用的事件-onscroll滾動(dòng)事件
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>window中常用的事件-onscroll滾動(dòng)事件</title>
</head>
<body style="height:3000px">
    <h1>我是頂部</h1>
    <button onclick="goOn()" style="position: fixed;right: 50px;bottom: 50px">返回頂部</button>

    
    <script type="text/javascript">
        //當(dāng)窗口發(fā)生滾動(dòng)會(huì)觸發(fā)該事件
        window.onscroll = function() {
            console.log("滾動(dòng)");

            //打印滾動(dòng)高度
            var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;
            console.log(scrollTop);
        };

        //返回頂部
        function goOn() {
            document.documentElement.scrollTop = 0;
            document.body.scrollTop = 0;
        }
    </script>
</body>
</html>
window中常用的事件-onresize窗口變化事件
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>window中常用的事件-onresize窗口變化事件</title>
</head>
<body>
    <script type="text/javascript">
        //當(dāng)瀏覽器發(fā)生縮放的時(shí)候就會(huì)反復(fù)觸發(fā)resize事件     
        window.onresize = function() {
            var w = document.documentElement.clientWidth || document.body.clientWidth || window.innerWidth;

            var h = document.documentElement.clientHeight || document.body.clientHeight || window.innerHeight;

            console.log(document.documentElement.clientWidth, document.body.clientWidth, window.innerWidth, w);

            console.log(document.documentElement.clientHeight, document.body.clientHeight, window.innerHeight, h);
        };
    </script>
</body>
</html>
定時(shí)器-間歇性定時(shí)器
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>定時(shí)器-間歇性定時(shí)器</title>
</head>
<body>
    <button onclick="closeIntervar()">關(guān)閉定時(shí)器</button>
    <script type="text/javascript">
        //setInterval(函數(shù)名,時(shí)間)
        // 功能:創(chuàng)建一個(gè)間歇性定時(shí)器,每間隔參數(shù)二時(shí)間執(zhí)行一次參數(shù)一函數(shù)
        // 返回值:定時(shí)器的id,可以通過(guò)該id關(guān)閉定時(shí)器
        
        var timer = window.setInterval(func, 2000);

        function func() {
            console.log("sunck is a good man");
        }

        function closeIntervar() {
            //停止定時(shí)器
            ////注:js中沒(méi)有恢復(fù)定時(shí)器一說(shuō),當(dāng)你停止定時(shí)器之后,定時(shí)器就會(huì)被刪掉,想要繼續(xù)的話,直接新建一個(gè)定時(shí)器。

            window.clearInterval(timer);
        }


    </script>
</body>
</html>
定時(shí)器-延時(shí)定時(shí)器
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>定時(shí)器-延時(shí)定時(shí)器</title>
</head>
<body>
    <button onclick="closeTimer()">關(guān)閉定時(shí)器</button>
    <script type="text/javascript">
        //setTimeout(函數(shù)名,時(shí)間)
        //功能:參數(shù)2時(shí)間以后再執(zhí)行參數(shù)1函數(shù)
        //返回值:定時(shí)器的id
        

        alert("創(chuàng)建定時(shí)器,5秒后執(zhí)行名為func的函數(shù)");
        var timer = window.setTimeout(func, 5000);

        function func() {
            console.log("sunck is a good man");
        }

        //關(guān)閉定時(shí)器
        function closeTimer() {
            window.clearTimeout(timer);
        }
        
    </script>
</body>
</html>
認(rèn)識(shí)DOM
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>認(rèn)識(shí)DOM</title>
</head>
<body>
    <script type="text/javascript">

        /**了解DOM
         * DOM:文檔對(duì)象模型(Document Object Model)
         * DOM是訪問(wèn)HTML和操作HTML的標(biāo)準(zhǔn)。
         *
         * Core DOM – 核心DOM 針對(duì)任何結(jié)構(gòu)化文檔的標(biāo)準(zhǔn)模型
         * XML DOM  - 針對(duì) XML 文檔的標(biāo)準(zhǔn)模型
         * HTML DOM - 針對(duì) HTML 文檔的標(biāo)準(zhǔn)模型
         */
        

        /**DOM節(jié)點(diǎn)的分類
         * 1、文檔節(jié)點(diǎn)
         * 2、標(biāo)簽(元素)節(jié)點(diǎn)
         * 3、屬性節(jié)點(diǎn)
         * 4、文本節(jié)點(diǎn)
         * 5、注釋節(jié)點(diǎn)
         */
        

        /**DOM節(jié)點(diǎn)層級(jí)關(guān)系(DOM樹(shù))
         * 1、父節(jié)點(diǎn)(parent node):父節(jié)點(diǎn)擁有任意數(shù)量的子節(jié)點(diǎn)
         * 2、子節(jié)點(diǎn)(child node):子節(jié)點(diǎn)只能擁有一個(gè)父節(jié)點(diǎn)
         * 3、兄弟節(jié)點(diǎn)(sibling node):擁有相同父節(jié)點(diǎn)的同級(jí)節(jié)點(diǎn)
         * 4、根節(jié)點(diǎn)(root node):一個(gè)HTML文檔一般只有一個(gè)根節(jié)點(diǎn),根節(jié)點(diǎn)沒(méi)有父親節(jié)點(diǎn),是最上層的節(jié)點(diǎn)。
         *
         *
         *
         * 祖先節(jié)點(diǎn):包含子節(jié)點(diǎn)的節(jié)點(diǎn)都可以叫做祖先節(jié)點(diǎn),其中包括了父節(jié)點(diǎn)。
         * 后代節(jié)點(diǎn):一個(gè)節(jié)點(diǎn)內(nèi)包含的所有節(jié)點(diǎn),叫做后代節(jié)點(diǎn),其中包括了子節(jié)點(diǎn)。
         */
        


        /**JS跟頁(yè)面中這些標(biāo)簽進(jìn)行交互
         * 1、獲取標(biāo)簽(元素)節(jié)點(diǎn)
         *      修改標(biāo)簽CSS樣式
         *      修改標(biāo)簽屬性
         * 2、創(chuàng)建標(biāo)簽
         * 3、刪除標(biāo)簽
         * 4、復(fù)制標(biāo)簽
         */
        

        
    </script>
</body>
</html>
css

DOM節(jié)點(diǎn)分類

DOM節(jié)點(diǎn)關(guān)系
獲取標(biāo)簽(元素)節(jié)點(diǎn)
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>獲取標(biāo)簽(元素)節(jié)點(diǎn)</title>
</head>
<body>
    <div id="idDiv"></div>

    <div class="classDiv"></div>
    <div class="classDiv"></div>
    <div class="classDiv"></div>
    <div class="classDiv"></div>

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

    <script type="text/javascript">

        console.log("**getElementById**");
        //1、getElementById(str)
        //根據(jù)元素id獲取元素節(jié)點(diǎn)
        var jsDiv = document.getElementById("idDiv");
        console.log(jsDiv);
        console.log(typeof jsDiv);
        alert(jsDiv);




        console.log("**getElementsByClassName**");
        //2、getElementsByClassName()
        //獲取相同class屬性的元素節(jié)點(diǎn)列表
        //注意:此方法不支持IE8以下
        var jsDivsClass = document.getElementsByClassName("classDiv");
        for (var i = 0; i < jsDivsClass.length; i++) {
            console.log(jsDivsClass[i]);
        }
        



        console.log("**getElementsByTagName**");
        //3、getElementsByTagName()
        //根據(jù)標(biāo)簽名來(lái)獲取元素節(jié)點(diǎn)的集合
        var jsDivsTagName = document.getElementsByTagName("div");
        for (var i = 0; i < jsDivsTagName.length; i++) {
            console.log(jsDivsTagName[i]);
        }




        console.log("**getElementsByName**");
        //4、getElementsByName()
        //根據(jù)name屬性值來(lái)獲取元素節(jié)點(diǎn)的集合
        var jsDivsName = document.getElementsByName("inputText");
        for (var i = 0; i < jsDivsName.length; i++) {
            console.log(jsDivsName[i]);
        }

    </script>
</body>
</html>
獲取屬性節(jié)點(diǎn)
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>獲取屬性節(jié)點(diǎn)</title>
</head>
<body>
    <input type="text"  id="in" placeholder="請(qǐng)留下你的大名!" my="我的">

    <script type="text/javascript">
        var jsInput = document.getElementById("in");
        console.log(jsInput);



        //方法一:  
        //獲取官方定義的屬性直接使用 元素節(jié)點(diǎn).屬性名        
        //得到元素對(duì)應(yīng)屬性的屬性值
        var typeNode = jsInput.type;
        console.log(typeNode);
        var placeholderNode = jsInput.placeholder;
        console.log(placeholderNode);


        //alert("注意!我要變身了");
        //修改元素對(duì)應(yīng)屬性的屬性值
        //元素節(jié)點(diǎn).屬性名 = 新的屬性值
        jsInput.placeholder = "傻不傻";


        //方法二:
        //元素節(jié)點(diǎn).getAttribute("屬性名")
        //得到元素對(duì)應(yīng)屬性的屬性值
        //注意:該方法還可以獲取自定義屬性
        var idNode = jsInput.getAttribute("my");
        console.log(idNode);

        //修改元素對(duì)應(yīng)屬性的屬性值
        //元素節(jié)點(diǎn).setAttribute("屬性名", "新的屬性值");
        jsInput.setAttribute("my", "sunck");
        console.log(jsInput);


        //移除元素節(jié)點(diǎn)中的某個(gè)屬性節(jié)點(diǎn),某些低版本瀏覽器不支持
        //元素節(jié)點(diǎn).removeAttribute("屬性名");
        jsInput.removeAttribute("my");
        console.log(jsInput);
        
    </script>
</body>
</html>

####### 獲取屬性節(jié)點(diǎn)

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>獲取屬性節(jié)點(diǎn)</title>
    </head>
    <body>
        <input type="text"  id="in" placeholder="請(qǐng)留下你的大名!" my="我的">

        <script type="text/javascript">
            var jsInput = document.getElementById("in");
            console.log(jsInput);



            //方法一:  
            //獲取官方定義的屬性直接使用 元素節(jié)點(diǎn).屬性名        
            //得到元素對(duì)應(yīng)屬性的屬性值
            var typeNode = jsInput.type;
            console.log(typeNode);
            var placeholderNode = jsInput.placeholder;
            console.log(placeholderNode);


            //alert("注意!我要變身了");
            //修改元素對(duì)應(yīng)屬性的屬性值
            //元素節(jié)點(diǎn).屬性名 = 新的屬性值
            jsInput.placeholder = "傻不傻";


            //方法二:
            //元素節(jié)點(diǎn).getAttribute("屬性名")
            //得到元素對(duì)應(yīng)屬性的屬性值
            //注意:該方法還可以獲取自定義屬性
            var idNode = jsInput.getAttribute("my");
            console.log(idNode);

            //修改元素對(duì)應(yīng)屬性的屬性值
            //元素節(jié)點(diǎn).setAttribute("屬性名", "新的屬性值");
            jsInput.setAttribute("my", "sunck");
            console.log(jsInput);


            //移除元素節(jié)點(diǎn)中的某個(gè)屬性節(jié)點(diǎn),某些低版本瀏覽器不支持
            //元素節(jié)點(diǎn).removeAttribute("屬性名");
            jsInput.removeAttribute("my");
            console.log(jsInput);
            
        </script>
    </body>
    </html>
獲取文本節(jié)點(diǎn)
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>獲取文本節(jié)點(diǎn)</title>
</head>
<body>
    <div id="box">
        我是個(gè)盒子
    </div>
    <script type="text/javascript">
        var jsDiv = document.getElementById("box");

        //1、元素節(jié)點(diǎn).innerHTML
        //從對(duì)象的開(kāi)始標(biāo)簽到結(jié)束標(biāo)簽的全部?jī)?nèi)容,不包括本身Html標(biāo)簽
        var inner = jsDiv.innerHTML;
        console.log(inner);
        console.log(typeof inner);

        //2、元素節(jié)點(diǎn).outerHTML
        //除了包含innerHTML的全部?jī)?nèi)容外, 還包含對(duì)象標(biāo)簽本身
        var outer = jsDiv.outerHTML;
        console.log(outer);
        console.log(typeof outer);
        
        //3、元素節(jié)點(diǎn).innerText
        //從對(duì)象的開(kāi)始標(biāo)簽到結(jié)束標(biāo)簽的全部的文本內(nèi)容
        var text = jsDiv.innerText;
        console.log(text);
        console.log(typeof text);



        //修改
        jsDiv.innerHTML = "<p>我才是</p>";
        console.log(jsDiv);
    </script>
</body>
</html>
行間樣式表的讀寫
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>行間樣式表的讀寫</title>
</head>
<body>
    <div id="box" style="width:100px;height:200px;background-color:red"></div>
    <button onclick="changeColor()">換顏色</button>

    <script type="text/javascript">
        //獲取元素節(jié)點(diǎn)
        var jsDiv = document.getElementById("box");

        //獲取style屬性節(jié)點(diǎn)
        var jsDivStyle = jsDiv.style;
        //console.log(jsDivStyle);
        

        //獲取樣式表中樣式屬性的屬性值  
        //style屬性節(jié)點(diǎn).樣式屬性名  
        //元素節(jié)點(diǎn).style.樣式屬性名   
        //元素節(jié)點(diǎn).style["樣式屬性名"]
        var w = jsDivStyle.width;
        console.log(w);

        var h = jsDiv.style.height;
        //也可用如下寫法
        //var h = jsDiv.style["height"];
        console.log(h);


        //設(shè)置樣式表中的樣式屬性的屬性值
        //元素節(jié)點(diǎn).style.樣式屬性名 = 樣式屬性值
        //background-color --- backgroundColor
        //HTML中的-號(hào)去掉,-號(hào)后面的單詞首字母大寫
        jsDiv.style.backgroundColor = "green";

        function changeColor() {
            var r = parseInt(Math.random() * 256);
            var g = parseInt(Math.random() * 256);
            var b = parseInt(Math.random() * 256);

            var colorStr = "rgb(" + r + ", " + g + ", " + b + ")";
            jsDiv.style.backgroundColor = colorStr;
        }

    </script>
</body>
</html>
內(nèi)部樣式表與外部樣式表的讀寫
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>內(nèi)部樣式表與外部樣式表的讀寫</title>
    <link rel="stylesheet" type="text/css" href="sunck.css">
    <style type="text/css">
        #box1{
            width:100px;height: 200px;background-color: red;
        }
    </style>
</head>
<body>
    <div id="box1"></div>
    <div id="box2"></div>

    <script type="text/javascript">
        /**獲取
         *
         * IE中:元素節(jié)點(diǎn).currentStyle.樣式屬性名
         *      元素節(jié)點(diǎn).currentStyle["樣式屬性名"]
         * 其他:window.getComputedStyle(元素節(jié)點(diǎn), 偽類).樣式屬性名
         *      window.getComputedStyle(元素節(jié)點(diǎn), 偽類)["樣式屬性名"]
         * 
         * 偽類一般寫null即可
         * 
         */
        
        //獲取元素節(jié)點(diǎn)
        var jsDiv1 = document.getElementById("box1");
        var jsDiv2 = document.getElementById("box2");


        var w1 = 0;
        //判斷是否是IE瀏覽器
        if (jsDiv1.currentStyle) {
            //IE瀏覽器獲取樣式屬性值的方式
            w1 = jsDiv1.currentStyle.width;
        } else {
            //其他瀏覽器獲取樣式屬性值的方式
            w1 = window.getComputedStyle(jsDiv1, null).width;
        }
        console.log(w1);

        var w2 = 0;
        if (jsDiv2.currentStyle) {
            w2 = jsDiv2.currentStyle.width;
        } else {
            w2 = window.getComputedStyle(jsDiv2, null)["width"];
        }
        console.log(w2);



        //設(shè)置樣式中的屬性的值
        //元素節(jié)點(diǎn).style.樣式屬性名 = 樣式屬性值
        jsDiv1.style.backgroundColor = "black";
        jsDiv2.style.backgroundColor = "blue";

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



sunck.css文件內(nèi)容
#box2{
    width: 200px;height: 100px;background-color: green;
}
getComputedStyle與style的區(qū)別
自由飛翔的div
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自由飛翔的div</title>
    <style type="text/css">
        #box{
            width: 100px;height: 100px;background-color: red;position: absolute;left: 0px;top: 0px;
        }
    </style>
</head>
<body>
    <div id="box"></div>
    <button onclick="fly()" style="position: absolute;left: 150px;top: 150px">飛翔吧</button>

    <script type="text/javascript">
        function fly() {
            var jsDiv = document.getElementById("box");

            var timer = window.setInterval(move, 100);

            
            function move() {
                var currentLeft = parseInt(window.getComputedStyle(jsDiv, null).left);
                jsDiv.style.left = (currentLeft + 5) + "px";

                var currentTop = parseInt(window.getComputedStyle(jsDiv, null).top);
                jsDiv.style.top = (currentTop + 5) + "px";
            }
        }
    </script>
</body>
</html>
節(jié)點(diǎn)常用屬性
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>節(jié)點(diǎn)常用屬性</title>
    <style type="text/css"> 
        #box1{
            width: 200px;height: 200px;background-color: red;
        }
        #box2{
            width: 200px;height: 200px;background-color: green;
        }
        #box3{
            width: 200px;height: 200px;background-color: yellow;
        }
    </style>
</head>
<body>
    <div id="box1">
        <p>我是第一個(gè)P</p>
        <p>我是第二個(gè)P</p>
        <p>我是第三個(gè)P</p>
        <p>我是第四個(gè)P</p>
    </div>
    <div id="box2"></div>
    <div id="box3"></div>
    <input id="put" type="text" name="in" placeholder="sunck is a good man">

    <script type="text/javascript">
        //節(jié)點(diǎn)共有的屬性:nodeName、nodeType、nodeValue
        var jsDiv1 = document.getElementById("box1");
        console.log(jsDiv1);
        console.log(jsDiv1.nodeName);
        console.log(jsDiv1.nodeType);
        console.log(jsDiv1.nodeValue);




        //節(jié)點(diǎn)層次關(guān)系屬性
        


        //1、獲取當(dāng)前元素節(jié)點(diǎn)的所有的子節(jié)點(diǎn)
        var childNodesArray = jsDiv1.childNodes;
        console.log(childNodesArray);
        
        //2、獲取當(dāng)前元素節(jié)點(diǎn)的第一個(gè)子節(jié)點(diǎn)
        var firstChildNode = jsDiv1.firstChild;
        console.log(firstChildNode);
        
        //3、獲取當(dāng)前節(jié)點(diǎn)的最后一個(gè)子節(jié)點(diǎn)
        var lastChildNode = jsDiv1.lastChild;
        console.log(lastChildNode);

        //4、獲取該節(jié)點(diǎn)的文檔的根節(jié)點(diǎn),相當(dāng)于document
        var rootNode = jsDiv1.ownerDocument;
        console.log(rootNode);

        //5、獲取當(dāng)前節(jié)點(diǎn)的父節(jié)點(diǎn)
        var parentNode = jsDiv1.parentNode;
        console.log(parentNode);


        var jsDiv2 = document.getElementById("box2");
        //6、獲取當(dāng)前節(jié)點(diǎn)的前一個(gè)同級(jí)節(jié)點(diǎn)
        var previousNode = jsDiv2.previousSibling;
        console.log(previousNode);

        //7、獲取當(dāng)前節(jié)點(diǎn)的后一個(gè)同級(jí)節(jié)點(diǎn)
        var nextNode = jsDiv2.nextSibling;
        console.log(nextNode);


        //8、獲取當(dāng)前節(jié)點(diǎn)的所有的屬性節(jié)點(diǎn)
        var jsInput = document.getElementById("put");
        var allAttributesArray = jsInput.attributes;
        console.log(allAttributesArray);



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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>節(jié)點(diǎn)常用屬性</title>
    <style type="text/css"> 
        #box1{
            width: 200px;height: 200px;background-color: red;
        }
        #box2{
            width: 200px;height: 200px;background-color: green;
        }
        #box3{
            width: 200px;height: 200px;background-color: yellow;
        }
    </style>
</head>
<body>
    <div id="box1">
        <p>我是第一個(gè)P</p>
        <p>我是第二個(gè)P</p>
        <p>我是第三個(gè)P</p>
        <p>我是第四個(gè)P</p>
    </div>
    <div id="box2"></div>
    <div id="box3"></div>
    <input id="put" type="text" name="in" placeholder="sunck is a good man">

    <script type="text/javascript">
        var a = document.getElementById("box2");

        
    </script>
</body>
</html>
節(jié)點(diǎn)屬性nodeName、nodeType、nodeValue
DOM節(jié)點(diǎn)動(dòng)態(tài)操作
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DOM節(jié)點(diǎn)動(dòng)態(tài)操作</title>
    <style type="text/css">
        #box{
            width: 300px;height: 300px;background-color: yellow
        }
        #box1{
            width: 100px;height: 100px;background-color: red
        }
        #box2{
            width: 50px;height: 50px;background-color: blue
        }
    </style>

</head>
<body>
    <div id="box">
        <p>1</p>
        <p>2</p>
    </div>
    
    <script type="text/javascript">
        //創(chuàng)建元素節(jié)點(diǎn)
        var jsDiv1 = document.createElement("div");
        jsDiv1.id = "box1";
        console.log(jsDiv1);


        //父節(jié)點(diǎn).appendChild(子節(jié)點(diǎn));
        //方法將一個(gè)新節(jié)點(diǎn)添加到某個(gè)節(jié)點(diǎn)的子節(jié)點(diǎn)列表的末尾上
        document.body.appendChild(jsDiv1);


        //父節(jié)點(diǎn).insertBefore(新節(jié)點(diǎn), 子節(jié)點(diǎn))
        //將新節(jié)點(diǎn)添加到父節(jié)點(diǎn)的某個(gè)子節(jié)點(diǎn)的前面
        var jsP = document.createElement("p");
        jsP.innerHTML = "關(guān)注我";

        var jsD = document.getElementById("box");
        jsD.insertBefore(jsP, jsD.childNodes[3]);
        console.log(jsD);


        //創(chuàng)建文本節(jié)點(diǎn)
        var jsStr = document.createTextNode("什么");

        //添加文本節(jié)點(diǎn)
        var js2P = jsD.childNodes[1];
        js2P.appendChild(jsStr); 
        


        //替換節(jié)點(diǎn)
        //父節(jié)點(diǎn).replaceChild(新節(jié)點(diǎn), 子節(jié)點(diǎn))
        //將父節(jié)點(diǎn)中的某個(gè)子節(jié)點(diǎn)替換成新節(jié)點(diǎn)
        var jsDiv2 = document.createElement("div");
        jsDiv2.id = "box2";
        jsDiv1.parentNode.replaceChild(jsDiv2, jsDiv1);
        
        

        //復(fù)制節(jié)點(diǎn)
        var jsD1 = jsD.cloneNode();//只復(fù)制本身
        console.log(jsD1);
        var jsD2 = jsD.cloneNode(true);//復(fù)制本身和子節(jié)點(diǎn)
        console.log(jsD2);



        alert("刪除節(jié)點(diǎn)");
        //刪除節(jié)點(diǎn)
        //父節(jié)點(diǎn).removeChild(子節(jié)點(diǎn))
        //刪除父節(jié)點(diǎn)下的對(duì)應(yīng)子節(jié)點(diǎn)
        jsDiv2.parentNode.removeChild(jsDiv2);



        //offsetParent(參照物父元素)
        var temp = jsD.childNodes[1].offsetParent;
        console.log(temp);
        //當(dāng)某個(gè)元素的父元素或以上元素都未進(jìn)行CSS定位時(shí),則返回body元素,也就是說(shuō)元素的偏移量(offsetTop、offsetLeft)等屬性是以body為參照物的
        //當(dāng)某個(gè)元素的父元素進(jìn)行了CSS定位時(shí)(absolute或者relative),則返回父元素,也就是說(shuō)元素的偏移量是以父元素為參照物的
        //當(dāng)某個(gè)元素及其父元素都進(jìn)行CSS定位時(shí),則返回距離最近的使用了CSS定位的元素


    </script>
</body>
</html>
事件處理程序
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件處理程序</title>
</head>
<body>
    <!-- 事件:就是用戶或者是瀏覽器執(zhí)行的某種動(dòng)作
         事件處理程序:就是響應(yīng)事件的函數(shù),事件處理程序的名字是以“on”開(kāi)頭的
     -->



    <!-- 1、直接在html標(biāo)簽中給與事件處理程序同名的屬性賦值js代碼 -->
    <button id="btn1" onclick="console.log('事件處理1')">按鍵1</button>



    <!-- 2、給與事件處理程序同名的屬性賦值一個(gè)函數(shù)調(diào)用語(yǔ)句 -->
    <!-- 使HTML代碼與JS代碼稍微有點(diǎn)兒分離,不至于第一種那么緊密耦合 -->
    <!-- this代表的是button標(biāo)簽本身 -->
    <button id="btn2" onclick="func2(this)">按鍵2</button>



    <!-- 3、DOM0級(jí)事件處理程序 -->
    <!-- 這種方式也是早期的寫法,但好處是可以將JS與HTML完全分離,前提是需要給HTML元素提供一個(gè)額外的id屬性(或其它能獲取該元素對(duì)象的方式) -->
    <button id="btn3">按鍵3</button>




    <!-- 4、DOM2級(jí)事件處理程序 -->
    <button id="btn4">按鍵4</button>



    <script type="text/javascript">

        //2
        function func2(obj) {
            console.log("事件處理2");
            //obj接收的this的值,表示的是調(diào)用該函數(shù)的標(biāo)簽節(jié)點(diǎn)
            console.log(obj);

            console.log(this);//this---window
        }



        //3
        //找到id為btn3的按鍵
        var jsBtn3 = document.getElementById("btn3");
        //在這里添加事件處理程序
        jsBtn3.onclick = func3;
        function func3() {
            console.log("事件處理3");
            console.log(this);//this---元素節(jié)點(diǎn)
        }
        //移除事件處理程序
        //jsBtn3.onclick = null;
        



        //4、是目前最流行的事件處理程序,各大主流瀏覽器全部支持
        var jsBtn4 = document.getElementById("btn4");
        //添加事件監(jiān)聽(tīng)器
        //元素節(jié)點(diǎn).addEventListener("事件名",響應(yīng)事件的函數(shù),布爾值)
        // 事件名 click mouseover mouseout
        // 函數(shù)名或者匿名函數(shù)
        // 事件流 false 
        jsBtn4.addEventListener("click", func4, false);
        function func4() {
            console.log("事件處理4");
            console.log(this);//this---元素節(jié)點(diǎn)
        }
        //注意:可以綁定多個(gè)事件,相互之間不影響
        jsBtn4.addEventListener("click", func5, false);
        function func5() {
            console.log("事件處理5");
        }

        //移除事件
        //注意:
        //1、參數(shù)與添加事件時(shí)相同
        //2、添加事件時(shí)第二個(gè)參數(shù)不能是匿名函數(shù)
        //jsBtn4.removeEventListener("click", func4, false);



        /**能否使用this,this代表的誰(shuí)??
         * 1、在標(biāo)簽中使用,代表的是標(biāo)簽本身
         *
         * 2、在函數(shù)體中直接使用,代表的是window
         *    在標(biāo)簽中將this作為實(shí)參傳遞到函數(shù)中,在函數(shù)體中使用形參代表標(biāo)簽本身
         *
         * 3、在事件函數(shù)中使用,代表標(biāo)簽本身
         *
         * 4、在事件函數(shù)中使用,代表標(biāo)簽本身
         */
        

        /**移除事件
         * 1、無(wú)法移除
         *
         * 2、無(wú)法移除
         *
         * 3、元素節(jié)點(diǎn).onclick = null;
         *
         * 4、元素節(jié)點(diǎn).removeEventLinstener("事件名", 響應(yīng)函數(shù), false);
         */

    </script>
</body>
</html>
事件類型
飛翔的你
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        
        <style type="text/css">
            #box{
                width: 100px;
                height: 100px;
                background-color: red;
                position: absolute;
                left: 0;
                top: 0;
            }
        </style>
        
    </head>
    <body style="height: 1000px;position: relative;">
        
        <div id="box">
            
        </div>
        
        <button onclick="fly()" style="position: absolute; left:200px;top: 200px;">走你</button>
        
        <script type="text/javascript">
            var div = document.getElementById("box")
            
            function fly(){
                
                setInterval(function(){
                    var a = parseInt(window.getComputedStyle(div, null).left)
                    div.style.left = a + 10 + "px"
                    var b = parseInt(window.getComputedStyle(div, null).top)
                    div.style.top = b + 10 + "px"
                }, 100)
            }
            
        </script>
        
    </body>
</html>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        
        <style type="text/css">
            #box{
                width: 600px;
                height: 400px;
                border: solid 1px red;
                position: relative;
            }
            #ball{
                width: 50px;
                height: 50px;
                border-radius: 25px;
                background-color: yellow;
                position: absolute;
                left: 0;
                top: 0;
            }
        </style>
    </head>
    <body>
        
        <div id="box">
            <div id="ball">
                
            </div>
        </div>
        
        
        <script type="text/javascript">
            var ball = document.getElementById("ball")
            
            var speedx = 2
            var speedy = 2
            
            setInterval(function(){
                ball.style.left = ball.offsetLeft + speedx + "px"
                ball.style.top = ball.offsetTop + speedy + "px"
                
                if (ball.offsetTop >= 400 - 50 || ball.offsetTop <= 0){
                    speedy *= -1
                }
                if (ball.offsetLeft >= 600 - 50 || ball.offsetLeft <= 0) {
                    speedx *= -1
                }
                
            }, 10)
            
        </script>
        
    </body>
</html>
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

推薦閱讀更多精彩內(nèi)容