dom對象詳解--document對象(一)

本文轉載自查看原文 2016-04-16 11:15 3376 我的JavaScript學習之路

document對象

Document對象代表整個html文檔，可用來訪問頁面中的所有元素，是最復雜的一個dom對象，可以說是學習好dom編程的關鍵所在。

Document對象是window對象的一個成員屬性，通過window.document來訪問，當然也可以直接使用document。

document對象常用的函數和屬性可參考http://www.w3school.com.cn/jsref/dom_obj_document.asp。

getElementById()	返回對擁有指定 ID 的第一個對象的引用。(如果有相同的id則只取第一個)
createElement()	創建一個指定標簽名的元素(比如：動態創建超鏈接)

getElementById()的使用

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>document示例</title>
    <script type="text/javascript">
        function test() {
            var myHref = document.getElementById("a1");//相同id標簽只找第一個
            alert(myHref.innerText);
        }
    </script>
</head>
<body>
    <a id="a1" href="http://www.sohu.com">連接到搜狐</a><br/>
    <a id="a1" href="http://www.sina.com">連接到新浪</a><br/>
    <a id="a1" href="http://www.163.com">連接到163</a><br/>
    <input type="button" value="tesing" onclick="test()" />
</body>
</html>

通過元素名來獲取集合getElementsByName()的使用

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>document示例</title>
    <script type="text/javascript">
        function test() {
            //id不能唯一，但是name可以重復
            var hobbies = document.getElementsByName("hobby");
            //window.alert(hobbies.length);
            for (var i = 0; i < hobbies.length; i++) {
                //如何判斷是否選擇
                if(hobbies[i].checked) {
                    window.alert("你的愛好是"+hobbies[i].value);
                }
            }
        }
    </script>
</head>
<body>
    請選擇你的愛好
    <input type="checkbox" name="hobby" value="足球" />足球
    <input type="checkbox" name="hobby" value="旅游" />旅游
    <input type="checkbox" name="hobby" value="音樂" />音樂
    <input type="button" value="tesing" onclick="test()" />
</body>
</html>

通過標簽名來獲取對象(元素)getElementsByTagName()的使用

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>document示例</title>
    <script type="text/javascript">
        //通過標簽名來獲取對象(元素)
        function test2() {
            var myObjs = document.getElementsByTagName("input");
            for (var i = 0; i < myObjs.length; i++) {
                window.alert(myObjs[i].value);
            }
        }
    </script>
</head>
<body>
    請選擇你的愛好
    <input type="checkbox" name="hobby" value="足球" />足球
    <input type="checkbox" name="hobby" value="旅游" />旅游
    <input type="checkbox" name="hobby" value="音樂" />音樂
    <input type="button" value="tesing" onclick="test()" />
    <input type="button" value="獲取所有input" onclick="test2()" />
</body>
</html>

dom對象詳解--document對象

常用的dom的每個Node節點屬性和方法(加強篇)

特別提示：html dom和xml dom都遵循相同dom規范的，所以他們有很多相同的方法和屬性，因此我們也可以去查看xml dom的node節點提供的方法和屬性。

屬性名稱	類型	說明
nodeName	String	節點名稱
nodeValue	String	節點值
nodeType	Number	節點類型
parentNode	Node	父節點
firstChild	Node	第一個子節點
lastChild	Node	最后一個子節點
childNodes	NodeList	所有子節點
previousSibling	Node	前一個節點
nextSibling	Node	后一個節點
ownerDocument	Document	獲得該節點所屬的文檔對象
attributes	Map	代表一個節點的屬性對象

方法名稱	返回值	說明
hasChildNodes()	Boolean	當前節點是否有子節點
appendChild(node)	Node	往當前節點上添加子節點
removeChild(node)	Node	刪除子節點
replaceChild(oldNode, newNode)	Node	替換子節點
insertBefore(newNode, refNode)	Node	在指定節點的前面插入新節點

有如下html文檔：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <input type="button" value="Node測試" onclick="test()" /><br>
    <table border="1px">
        <tr>
        <td></td>
        <td><input type="button" value="向上走" onclick="move(this)" /></td>
        <td></td>
        </tr>
        <tr>
        <td><input type="button" value="向左走" onclick="move(this)" /></td>
        <td></td>
        <td><input type="button" value="向右走" onclick="move(this)" /></td>
        </tr>
        <tr>
        <td></td>
        <td><input type="button" value="向下走" onclick="move(this)" /></td>
        <td></td>
        </tr>
    </table>
    <!--把烏龜放在div中-->
    <div id="wugui" style="position:absolute;left:100px;top:120px;">
        <img src="1.jpg" border="1px" alt="" />
    </div>
    <!--雞放在div中-->
    <div id="cock" style="position:absolute;left:200px;top:200px;">
        <img src="2.jpg" border="1px" alt="" />
    </div>
</body>
</html>

dom 節點樹：

動態的創建元素(節點)/添加元素(節點)/刪除元素(節點)

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>document示例</title>
    <script type="text/javascript">
        function test1() {
            //創建元素
            var myElement = document.createElement("a"); //??寫希望創建的html元素標簽名
            //給新的元素添加新的必要的信息
            myElement.id = "id1";
            myElement.href = "http://www.sina.com.cn";
            myElement.innerText = "連接到sina";
            //定位
            myElement.style.left = "400px";
            myElement.style.top = "300px";
            myElement.style.position = "absolute";
            //添加到document.body
            document.body.appendChild(myElement);
        }
        function test2() {
            var myButton = document.createElement("input");
            myButton.type = "button";
            myButton.value = "這是動態建立的按鈕";
            document.getElementById("div1").appendChild(myButton);
        }
        function test3() {
            var myElement = document.createElement("input");
            myElement.type = "text";
            myElement.value = "我是輸入框";
            myElement.id = "text_id1";
            document.getElementById("div1").appendChild(myElement);
        }
        function test4() {
            //刪除一個元素(刪除一個元素前提：必需獲得父元素)
            //這是第一種刪除方法(不靈活)
            //document.getElementById("div1").removeChild(document.getElementById("text_id1"));
            //第二種方法(推薦此方法)
            document.getElementById("text_id1").parentNode.removeChild(document.getElementById("text_id1"));
        }
    </script>
</head>
<body>
    <input type="button" value="動態的創建一個超鏈接" onclick="test1()" />
    <input type="button" value="動態的創建一個按鈕" onclick="test2()" />
    <input type="button" value="動態的創建一個輸入框" onclick="test3()" />
    <input type="button" value="刪除一個元素(id為text_id1)" onclick="test4()" />
    <div id="div1" style="width: 200px; height: 400px; border: 1px solid red;">div1</div>
</body>
</html>

node屬性方法的使用[前、后節點功能在IE8以上瀏覽器未通過測試]

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript">
        function test() {
            //獲得div1(烏龜div)
            var wuguidiv = $("wugui");
            //window.alert(wuguidiv.nodeName+" "+wuguidiv.nodeType+" "+wuguidiv.nodeValue);// DIV 1 null
            window.alert(wuguidiv.childNodes.length+" "+wuguidiv.nextSibling.nodeValue);
            window.alert(wuguidiv.childNodes.length+" "+wuguidiv.previousSibling.nodeValue);
            window.alert("父親："+wuguidiv.parentNode.parentNode);
        }
        function $(id) {
            return document.getElementById(id);
        }
    </script>
</head>
<body>
    <input type="button" value="Node測試" onclick="test()" /><br>
    <table border="1px">
        <tr>
        <td></td>
        <td><input type="button" value="向上走" onclick="move(this)" /></td>
        <td></td>
        </tr>
        <tr>
        <td><input type="button" value="向左走" onclick="move(this)" /></td>
        <td></td>
        <td><input type="button" value="向右走" onclick="move(this)" /></td>
        </tr>
        <tr>
        <td></td>
        <td><input type="button" value="向下走" onclick="move(this)" /></td>
        <td></td>
        </tr>
    </table>
    <!--把烏龜放在div中-->
    <div id="wugui" style="position:absolute;left:100px;top:120px;">
        <img src="1.jpg" border="1px" alt="" />
    </div>
    <!--雞放在div中-->
    <div id="cock" style="position:absolute;left:200px;top:200px;">
        <img src="2.jpg" border="1px" alt="" />
    </div>
</body>
</html>

document屬性的使用[IE9中測試通過]

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>document屬性的使用</title>
    <script type="text/javascript">
        document.fgColor = "white";// 前景色
        document.bgColor = "black";// 背景色
        alert(document.title);//獲得title信息
        alert(document.URL);//獲得URL地址信息
    </script>
</head>
<body>
    hello,world
</body>
<script type="text/javascript">    
    window.alert(document.body);
</script>
</html>

body對象

body對象代表文檔的主體(HTML body)。

body對象是document對象的一個成員屬性，通過document.body來訪問。

使用body對象，要求文檔的主體創建后才能使用，也就是說不能在文檔的body體還沒有創建就去訪問body。

innerText()與innerHTML()區別

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript">
        function test() {
            //document.getElementById("myspan").innerText = "<a href='http://www.sohu.com'>連接到搜狐</a>";// innerText   瀏覽器作為文本解析
            document.getElementById("myspan").innerHTML = "<a href='http://www.sohu.com'>連接到搜狐</a>";//innerHTML   瀏覽器作為html解析 
        }
    </script>
</head>
<body>
    <span id="myspan"></span>
    <input type="button" onclick="test()" value="測試" />
</body>
</html>

onscroll　　用戶拉動滾動條時觸發

特別說明：onscroll在使用時需要遵循html4.0的標准，否則不能執行，也可以使用window.onscroll=函數名來代替body對象的onscroll事件。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>onscroll與onselectstart的使用示例</title>
    <script type="text/javascript">
        function window_onscroll() {
            myHref.style.top = document.body.scrollTop + 50;
            myHref.style.left = document.body.scrollLeft;
        }
        function document_onselectstart() {
            alert("版權所有，嚴禁拷貝");
            //返回false,可以禁止用戶選網頁中的文本；當用戶選文本時會觸發onselectstart事件，返回false就不會選中
            return false;//也可在body中加入onselectstart="return false"同樣達到這個效果
        } 
    </script>
    <!-- 還有這樣一種寫法喲 -->
    <script type="text/javascript" for="document" event="onselectstart">
        //這樣等於在body上寫入onselectstart="return false"
        return document_onselectstart();
    </script>
</head>
<body onscroll="window_onscroll()">
    <textarea id="textarea" name="textarea" rows="500" cols="500">這樣等於與在body上寫入onselectstart="return false"</textarea>
    <a href="http://www.sohu.com" id="myHref" style="left: 0px; top: 50px; position: absolute; word-break: keep-all;">
        <img src="sohu.jpg">
    </a>
</body>
</html>

一個小案例：一個小太陽，當它碰到邊框后，就自動的轉變方向，很多流氓網站就有這種廣告。

知識點：

document.body.clientWidth //獲得客戶端瀏覽器的寬度
document.body.clientHeight //獲得客戶端瀏覽器的高度
offsetWidth //獲得當前對象的寬度
offsetHeight //獲得當前對象的高度

代碼如下：

<!-- <!DOCTYPE html>特別注意：必須去掉才能顯示正常 -->
<html>
<head>
    <meta charset="UTF-8">
    <title>小太陽</title>
    <script type="text/javascript">
        //定兩個方向(全局變量)
        directX = 1;//x軸的方向
        directY = 1;//y軸的方向
        //小太陽的坐標
        sunX = 0;
        sunY = 0;
        speed = 2;

        function sunMove() {
            sunX += directX*speed;
            sunY += directY*speed;
            //修改div的left、top
            //var sun = document.getElementById("sun");
            sun.style.top = sunY+"px";
            sun.style.left = sunX+"px";
            //判斷什么時候轉變方向
            //x方向(offsetWidth可以返回當前對象的實際寬度)
            if(sunX+sun.offsetWidth >= document.body.clientWidth || sunX <= 0) {
                directX = -directX;
            }
            /*
            if(sun.style.left+sun.offsetWidth >= body.clientWidth) {
                directX = -1;
            } else if(sun.style.left <= 0) {
                directX = 1;
            }
            */
            //y方向
            if(sunY + sun.offsetHeight >= document.body.clientHeight || sunY <= 0){
                directY = -directY;
            }
        }
        setInterval("sunMove()", 10);
    </script>
</head>
<body style="background-image: url('ship.jpg');">
    <div id="sun" style="position: absolute;">
        <img src="sun.gif" />
    </div>
</body>
</html>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 HTML DOM Document 對象詳解JavaScript Document對象什么是window對象？什么是document對象？ DOM---文檔對象模型(Document Object Model)的基本使用 js基礎之DOM中document對象的常用屬性方法 JS中的DOM對象及JS對document對像的操作 DOM中document對象的常用屬性方法總結 JS——事件詳解（Document對象、event對象、事件冒泡...）什么是DOM對象 jQuery對象與DOM對象