一? 文档子节点
访问子节点的快捷方式：
- documentElement属性：始终指向HTML页面种的<html>元素
<html> <body> </body> </html>- 访问子节点
? ? ? ? ? ? ? 文档只有一个子节点，即<html>元素
? ? ? ? ? ? ?这个元素既可以通过 documentElement 属性获取，也可以通过 childNodes 列表访问
let html = document.documentElement; // 取得对的引用
alert(html === document.childNodes[0]); // true
alert(html === document.firstChild); // true- body属性：指向<body>元素
let body = document.body; // 取得对<body>的引用- DocumentType
<!doctype>标签是文档中独立的部分， 其信息可以通过 doctype 属性（在浏览器中是 document.doctype）来访问
let doctype = document.doctype; // 取得对<!doctype>的引用二? 文档信息
这些属性提供浏览器所加载网页的信息
- title：包含元素中的文本，通常显示在浏览器窗口或标签页的标题栏
// 读取文档标题
let originalTitle = document.title;
// 修改文档标题
document.title = "New page title";- URL：包含当前页面的完整 URL(地址栏中的 URL)
- domain：包含页面的域名
- referrer：包含链接到当前页面的那个页面的 URL
// 取得完整的 URL
let url = document.URL; // http://www.wrox.com/WileyCDA/
// 取得域名
let domain = document.domain; // www.wrox.com
// 取得来源
let referrer = document.referrer; 当页面中包含来自某个不同子域的窗格（）或内嵌窗格（）时，设置 document.domain 是有用的。因为跨源通信存在安全隐患，所以不同子域的页面间无法通过 JavaScript 通信。
此时，在每个页面上把 document.domain 设置为相同的值，这些页面就可以访问对方的 JavaScript 对象了。
三 查找定位元素的操作
- getElementById()
- 参数：接收一个参数，即要获取元素的 ID
- 返回：
- 找到了则返回这个元素，如果没找到则返回 null
- 如果页面中存在多个具有相同 ID 的元素，则返回在文档中出现的第一个元素
<div id="myDiv">Some text</div>
// 可以使用如下代码取得这个元素：
let div = document.getElementById("myDiv");
// 取得对这个<div>元素的引用,但参数大小写不匹配会返回 null：
let div = document.getElementById("mydiv"); // null - getElementsByTagName()
- 参数：获取元素的标签名
- 返回：
- 包含零个或多个元素的NodeList ?
- length
- 在 HTML 文档中，这个方法返回一个 HTMLCollection 对象
- namedItem()
- 包含零个或多个元素的NodeList ?
// 这里把返回的 HTMLCollection 对象保存在了变量 images 中
let images = document.getElementsByTagName("img");
// 与 NodeList 对象一样，也可以使用中括号或 item()方法从 HTMLCollection 取得特定的元素
// 而取得元素的数量同样可以通过length 属性得知，如下所示：
alert(images.length); // 图片数量
alert(images[0].src); // 第一张图片的 src 属性
alert(images.item(0).src); // 同上
// HTMLCollection 对象还有一个额外的方法 namedItem()，可通过标签的 name 属性取得某一项的引用。例如，假设页面中包含如下的<img>元素：
<img src="myimage.gif" name="myImage">
// 那么也可以像这样从 images 中取得对这个<img>元素的引用：
let myImage = images.namedItem("myImage");
// 对于 name 属性的元素，还可以直接使用中括号来获取
let myImage = images["myImage"];- getElementsByName()
- 返回：具有给定 name 属性的所有元素?
- namedItem()方法只会取得第一项（因为所有项的 name 属性都一样）
- 法最常用于单选按钮，因为同 一字段的单选按钮必须具有相同的 name 属性才能确保把正确的值发送给服务器
- 返回：具有给定 name 属性的所有元素?
<fieldset>
<legend>Which color do you prefer?</legend>
<ul>
<li>
<input type="radio" value="red" name="color" id="colorRed">
<label for="colorRed">Red</label>
</li>
<li>
<input type="radio" value="green" name="color" id="colorGreen">
<label for="colorGreen">Green</label>
</li>
<li>
<input type="radio" value="blue" name="color" id="colorBlue">
<label for="colorBlue">Blue</label>
</li>
</ul>
</fieldset>四 特殊集合
- document.anchors 包含文档中所有带 name 属性的<a>元素
- document.applets 包含文档中所有<applet>元素（因为元素已经不建议使用，所 以这个集合已经废弃）
- document.forms 包含文档中所有<form>元素（与 document.getElementsByTagName ("form") 返回的结果相同）
- document.images 包含文档中所有<img>元素（与 document.getElementsByTagName ("img") 返回的结果相同）
- document.links 包含文档中所有带 href 属性的<a>元素?
五?DOM兼容性检测
document.implementation属性提供了与浏览器DOM实现相关的信息和能力
版本：DOM Level1上只定义了一个方法
功能：提供了与浏览器DOM实现相关的信息和能力
方法：hasFeature()
- 参数：特性名称? DOM版本
- 返回：如果浏览器支持指定的特性和版本，返回true
let hasXmlDom = document.implementation.hasFeature("XML", "1.0"); 特性：
?
?
六 文档写入
- write()：
- 参数：一个字符串
- 使用：
- 在页面加载期间向页面中动态添加内容
- 写入文本
- 用于动态包含外部资源，如 JavaScript 文件。在包含 JavaScript 文件时，记住不能像下面的例子中这样直接包含字符串""，因为这个字符串会被解释为脚本块的结尾，导致后面的代码不能执行
<html>
<head>
<title>document.write() Example</title>
</head>
<body>
<p>The current date and time is:
<script type="text/javascript">
document.write("<strong>" + (new Date()).toString() + "</strong>");
</script>
</p>
</body>
</html> - writeIn()
- 参数：一个字符串
- 使用：
- 在页面加载期间向页面中动态添加内容
- 会在字符串末尾追加一个换行符（\n）
- 用于动态包含外部资源，如 JavaScript 文件。在包含 JavaScript 文件时，记住不能像下面的例子中这样直接包含字符串""，因为这个字符串会被解释为脚本块的结尾，导致后面的代码不能执行
<html>
<head>
<title>document.write() Example</title>
</head>
<body>
<script type="text/javascript">
document.write("<script type=\"text/javascript\" src=\"file.js\">" +
"</script>");
</script>
</body>
</html> - open()
- 使用：用于打开网页输出流
- close()
- 使用：用于关闭网页输出流