- 文档模型里任何代表某个元素的对象都至少能支持 HTMLElement 功能，其中一些还支持额外的功能。
理解：使用 DOM 可以读取或者设置 HTML 文档元素、设置 CSS 样式、配合 JavaScript 实现相关逻辑功能。
DOM 元素速览表
Document 的成员
使用方式：document.方法名
示例代码：
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<meta charset="utf-8">
<meta name="author" content="Hu QiLin">
<meta name="description" content="使用Document对象">
<link rel="shortcut icon" type="image/x-icon" href="favicon.icn">
<link rel="stylesheet" href="journal.css">
</head>
<body>
<p id="fruittext">
There are lots of different kinds of fruit - there are over 500 varieties of <span id="banana">banana</span> alone. By the time we add the countless types of apples, oranges, and other well-known fruit, we are faced with thousands of choices.
</p>
<p id="apples">
One of the most interesting aspects of fruit is the variety available in each country. I live near London, in an area which is known for its apples.
</p>
<script>
/* <pre>元素表示其内容中的原有格式应被保留。 */
/* document.URL:读取当前文档的URL*/
document.writeln("<pre>URL: " + document.URL);
/* getElementsByTagName：选取属于某一给定标签类型的所有元素 */
var elems = document.getElementsByTagName("p");
for (var i = 0; i < elems.length; i++) {
document.writeln("Element ID: " + elems[i].id);
/* 设置CSS样式：border和padding属性 */
elems[i].style.border = "medium double black";
elems[i].style.padding = "4px";
}
document.write("</pre>");
</script>
</body>
</html>使用 Dccument 元素获取文档的基本信息
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<meta charset="utf-8">
<meta name="author" content="Hu QiLin">
<meta name="description" content="使用Document对象">
</head>
<body>
<script>
document.writeln("<pre>");
document.writeln("characterSet: " + document.characterSet);
document.writeln("charset: " + document.charset);
document.writeln("compatMode: " + document.compatMode); /* 怪异模式：CSS1compat / BackCompat：HTML文档中含有非标准功能 */
document.writeln("defaultCharset: " + document.defaultCharset);
document.writeln("dir: " + document.dir);
document.writeln("domain: " + document.domain);
document.writeln("lastModified: " + document.lastModified);
document.writeln("referrer: " + document.referrer);
document.writeln("title: " + document.title);
document.write("</pre>");
/*
characterSet: UTF-8
charset: UTF-8
compatMode: BackCompat
defaultCharset: undefined
dir:
domain: 127.0.0.1
lastModified: 03/12/2018 14:09:26
referrer: http://127.0.0.1:61374/def-guide-to-html5-master/Definitive%20Guide%20HTML5/Chapter%2026/listing-02.html
title:
*/
</script>
</body>
</html>Location 对象
使用 location 属性获取文档信息：
<script>
document.writeln("<pre>");
document.writeln("protocol: " + document.location.protocol); /* http */
document.writeln("host: " + document.location.host); /* 127.0.0.1:61374 */
document.writeln("hostname: " + document.location.hostname); /* 127.0.0.1 */
document.writeln("port: " + document.location.port); /* 61374 */
document.writeln("pathname: " + document.location.pathname); /* /index.htm */
document.writeln("search: " + document.location.search); /* 返回URL中查询字符串部分，如： ？query=apples */
document.writeln("hash: " + document.location.hash); /* hash属性返回的是URL片段 */
document.write("</pre>");
</script><!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<meta name="author" content="Adam Freeman"/>
<meta name="description" content="A simple example"/>
</head>
<body>
<p>
There are lots of different kinds of fruit - there are over 500 varieties
of banana alone. By the time we add the countless types of apples, oranges,
and other well-known fruit, we are faced with thousands of choices.
</p>
<button id="pressme">Press Me</button>
<p>
One of the most interesting aspects of fruit is the variety available in
each country. I live near London, in an area which is known for
its apples.
</p>
<img id="banana" src="banana-small.png" alt="small banana"/>
<script>
/* 用getElementById方法找到按钮，再设置按钮点击事件。 */
document.getElementById("pressme").onclick = function() {
/* 导航到id值匹配hash值的元素上 */
document.location.hash = "banana";
}
</script>
</body>
</html>Window 对象
History 对象
Screen 对象
HTMLElement 的成员
Text 对象
DOM 里的 CSS 属性
DOM 中的事件
[图片上传失败…(image-d11f11-1521387685311)]
