首页 > 其他 > 详细

DOM与BOM

时间:2018-10-21 22:20:27      阅读:123      评论:0      收藏:0      [点我收藏+]
<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

原文:https://www.cnblogs.com/linlinlina-liu/p/9827289.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!