DOM与BOM

Posted 2021-01-14 linlinlina-liu

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了DOM与BOM相关的知识，希望对你有一定的参考价值。

<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>

以上是关于DOM与BOM的主要内容，如果未能解决你的问题，请参考以下文章

DOM和BOM

BOM与DOM

DOM和BOM的区别与联系