DOM與BOM

時間 2019-11-12

標籤 dom bom 欄目 HTML 简体版

原文原文鏈接

<html>
<head>
    <meta charset="utf-8">
    <title>DOM and BOM</title>
</head>
<body>
    <div>此爲DOM的部分示例（用id和標籤尋找html的元素）:</div>
    <p id="intro">Hello HTML!</p>

    <p>The DOM is  useful.</p>
    <p id="p1">這是原來的句子</p>
    <p>如下例子是用id來尋找元素：</p>
    <p id="demo"></p>
    <p>如下例子是用標籤名稱來尋找元素：</p>
    <p id="demo1"></p>
    <div>此爲BOM的部分示例（獲取當前瀏覽器窗口的長和寬、獲取當前的網站地址）：</div>
    <p id="demo2"></p>
    <div>如下展現當前的網站地址：</div>
     <p id="demo3"></p>
    <script>
        var myElement = document.getElementById("intro");
        document.getElementById("demo").innerHTML = 
        "The text from the intro paragraph is: " + myElement.innerHTML;
        var x = document.getElementsByTagName("p");
        document.getElementById("demo1").innerHTML = 
        'The second paragraph (index 1) is: ' + x[1].innerHTML;
        document.getElementById("p1").innerHTML = "本句是用js更改後的句子";
        var w = window.innerWidth
        || document.documentElement.clientWidth
        || document.body.clientWidth;

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

        var x = document.getElementById("demo2");
        x.innerHTML = "當前瀏覽器的寬爲：" + w + ", 高爲：" + h + "。";

        document.getElementById("demo3").innerHTML = "當前網址爲：" + window.location.href;
    </script>
</body>
</html>

1. BOM與DOM
2. DOM與BOM
3. 【JS】DOM與BOM
4. Dom與Bom
5. JavaScript-BOM與DOM
6. JScript --- BOM與DOM
7. 前端——BOM與DOM
8. HTML與DOM BOM javascript
9. JS的BOM與DOM
10. JavaScript之 BOM 與 DOM
更多相關文章...
• XSL-FO 與 XSLT - XSL-FO 教程
• PHP - AJAX 與 PHP - PHP教程
• Composer 安裝與使用
• Java Agent入門實戰（一）-Instrumentation介紹與使用

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。