源码-JavaScript&jQuery交互式前端开发-第3章-函数、方法与对象-文档对象模型

最新推荐文章于 2019-06-07 00:30:34 发布

预见未来to50

最新推荐文章于 2019-06-07 00:30:34 发布

阅读量383

点赞数

分类专栏： Front End Tech 文章标签： BOM CSS HTML JavaScript 浏览器对象模型

本文链接：https://blog.csdn.net/hpdlzu80100/article/details/52677616

版权

Front End Tech 专栏收录该内容

34 篇文章 0 订阅

订阅专栏

文档对象模型的最顶端对象是document对象，代表当前浏览器窗口或标签中载入的页面。

属性：title, lastModified, URL, domain

方法：write(), getElementById(), querySelectorAll(), createElement(), createTextNode()

示例：获取页面信息并显示到页脚

示例效果：

JS代码：

// Create a variable called msg to hold a message that will be shown on the page
// Find the title of the document, and put this in the msg variable
var msg = '<p><b>page title: </b>' + document.title + '<br />';
// Find the URL of the document and add it to the msg variable
msg += '<b>page address: </b>' + document.URL + '<br />';
// Find the date the document was last modified and add it to the msg variable
msg += '<b>last modified: </b>' + document.lastModified + '</p>';

// Create a variable called el to hold the element whose id attribute has a value of footer
var el = document.getElementById('footer');
// Write the message into that element
el.innerHTML = msg;

HTML代码：

<!DOCTYPE html>
<html>
  <head>
    <title>PD Hotel</title>
    <link rel="stylesheet" href="css/c03.css" />
  </head>
  <body>
    <h1>PD Hotel</h1>
    <div id="footer"></div>
    <script src="js/document-object.js"></script>
  </body>
</html>

CSS代码：（参考源码-JavaScript&jQuery交互式前端开发-第3章-函数、方法与对象-使用字面量语法创建对象，http://blog.csdn.net/hpdlzu80100/article/details/52677426 ）