DOM之节点层级- Document 类型

一文档子节点

访问子节点的快捷方式：

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()

// 这里把返回的 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 属性才能确保把正确的值发送给服务器

<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()
- 使用：用于关闭网页输出流

DOM之节点层级- Document 类型

猜你喜欢