- 文檔模型里任何代表某個(gè)元素的對(duì)象都至少能支持HTMLElement功能瓶逃，其中一些還支持額外的功能。
理解：使用DOM可以讀取或者設(shè)置HTML文檔元素、設(shè)置CSS樣式啥容、配合JavaScript實(shí)現(xiàn)相關(guān)邏輯功能秕磷。
DOM元素速覽表
Document的成員
使用方式：document.方法名
Document對(duì)象
Document對(duì)象2
示例代碼：
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<meta charset="utf-8">
<meta name="author" content="Hu QiLin">
<meta name="description" content="使用Document對(duì)象">
<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>元素表示其內(nèi)容中的原有格式應(yīng)被保留诵闭。 */
/* document.URL:讀取當(dāng)前文檔的URL*/
document.writeln("<pre>URL: " + document.URL);
/* getElementsByTagName：選取屬于某一給定標(biāo)簽類型的所有元素 */
var elems = document.getElementsByTagName("p");
for (var i = 0; i < elems.length; i++) {
document.writeln("Element ID: " + elems[i].id);
/* 設(shè)置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對(duì)象">
</head>
<body>
<script>
document.writeln("<pre>");
document.writeln("characterSet: " + document.characterSet);
document.writeln("charset: " + document.charset);
document.writeln("compatMode: " + document.compatMode); /* 怪異模式：CSS1compat / BackCompat：HTML文檔中含有非標(biāo)準(zhǔn)功能 */
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對(duì)象
Location對(duì)象
使用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方法找到按鈕疏尿，再設(shè)置按鈕點(diǎn)擊事件。 */
document.getElementById("pressme").onclick = function() {
/* 導(dǎo)航到id值匹配hash值的元素上 */
document.location.hash = "banana";
}
</script>
</body>
</html>
Window 對(duì)象
Window對(duì)象
History 對(duì)象
History對(duì)象
Screen 對(duì)象
Screen對(duì)象
HTMLElement的成員
HTMLElement對(duì)象1
HTMLElement對(duì)象2
Text 對(duì)象
Text對(duì)象
DOM里的CSS屬性
DOM里的CSS屬性1
DOM里的CSS屬性2
DOM里的CSS屬性3
DOM 中的事件
[圖片上傳失敗...(image-d11f11-1521387685311)]
DOM中的事件2
