【JavaScript学习】DOM：Document类型

最新推荐文章于 2022-07-26 17:32:39 发布

Wonder233

最新推荐文章于 2022-07-26 17:32:39 发布

阅读量288

点赞数

分类专栏： JavaScript JavaScript高级程序设计文章标签： javascript dom

本文链接：https://blog.csdn.net/Wonder233/article/details/78563919

版权

JavaScript 同时被 2 个专栏收录

61 篇文章 0 订阅

订阅专栏

JavaScript高级程序设计

45 篇文章 1 订阅

订阅专栏

1、在浏览器中，ducument对象是HTMLDocument（继承至Document类型）的一个实例，表示整个HTML页面。
2、document对象是window对象的一个属性，因此可以将其作为全局对象来访问。

document节点特征

nodeType的值是9；
nodeName的值为“#document”；
nodeValue的值为null；
parentNode的值为null；
ownerDocument的值为null；
其子节点可能是一个DocumentType（最多一个）、Element（最多一个）、ProcessingInstruction或Comment。

文档的子节点

所有浏览器都支持document.documentElement和document.body属性。

documentElement属性

documentElement属性：该属性始终指向HTML页面中的<html>元素。（更快捷、更直接）
childNodes属性：访问文档元素。

<html>
    <body>
    </body>
</html>
//这个页面经过浏览器解析后，其文档中只包含一个子节点，即<html>元素。

var html = document.documentElement;    //取得对<html>的引用
alert(html === document.childNodes[0]); //true
alert(html === document.firstChild);    //true

body属性

var body = document.body;   //取得对<body>的引用

doctype属性

var doctype = document.doctype; //取得对<!doctype>的引用

因为浏览器对document.doctype的支持不一致，因此这个属性的用处很有限。
同样，浏览器之间的不一致性也导致位于<html>元素外部的注释没有什么用处。

文档类型（如果存在的话）是只读的，而且只能有一个元素子节点，因此用不着在document对象上调用appandChild()、removeChild()和replaceChild()方法。

文档信息

title属性

//取得文档标题
var originalTitle = document.title;

//设置文档标题
document.title = "New Page title";

URL属性

包含页面完整的URL。（即地址栏中显示的URL）

domain属性

包含页面的域名。

referrer属性

保存着链接到当前页面的那个页面的URL。在没有来源页面的情况下，referrer属性中可能会包含空字符串。

//取得完整的URL
var url = document.URL;

//取得域名
var domain = document.domain;

//取得来源页面的URL
var referrer = document.referrer;

三个属性中，只有domain是可以设置的。但由于安全方面的限制，并不是可以设置任何值。

//假设页面来自p2p.wrox.com域
document.domain = "wrox.com";       //成功
document.domain = "nczonline.net";  //出错！

由于跨域安全限制，来自不同子域的页面无法通过JavaScript通信，而通过将每个页面的document.domain设置为相同的值，这些页面就可以互相访问对方包含的JavaScript对象。

/* 
 浏览器对domain的限制：如果域名一开始是“松散的”（loose），那么不能将它设置为“紧绷的”（tight）。
*/
//假设页面来自于p2p.wrox.com域
document.domain = "wrox.com";       //松散的（成功）
document.domain = "p2p.wrox.com";   //紧绷的（出错！）

查找元素

getElementById()

/*
 * getElementById()
 * param：要取得元素的ID。
 *       （必须与页面中元素的id特性严格匹配，包括大小写）
 * 返回：
 *       如果找到相应的元素则返回该元素；
 *       如果不存在带有相应ID的元素，则返回null
 */
 <div id="myDiv">text</div>

 var div = document.getElementById("myDiv");
 var div = document.getElementById("mydiv"); // 无效的ID（IE7 及以前可以）

getElementsByTagName()

/*
 * getElementsByTagName()
 * param：要取得元素的标签名。
 * 返回：包含0或多个元素的NodeList。
 *     （在HTML文档中，这个方法会返回一个HTMLCollection对象，作为一个“动态”集合。）
 */

 //取得页面所有<img>元素，并返回一个HTMLCollection。
 var images = document.getElementsByTagName("img");

 //可以用方括号语法或item()方法来访问HTMLCollection对象中的项。
 alert(images.length);
 alert(images[0].src);
 alert(images.item(0).src); 

 //HTMLCollection还有一个方法：namedItem()，可以通过元素的name特性取得集合中的项。
 <img src="myimage.jpg" name="myImage">

 var myImage = images.namedItem("myImage");
 var myImage = images["myImage"];

 //取得文档中所有元素，向getElementsByTagName()中传入“*”。
 var allElement = document.getElementsByTagName("*");

getElementsByName

只有HTMLDocument类型才有的方法。

/*
 * getElementsByName()
 * param：要取得元素的name。
 * 返回：带有给定name特性的所有元素。
 */
 //最常用的是取得单选按钮：确保发送给浏览器的值正确无误，所有单选按钮必须具有相同的name特性。

特殊集合

document.anchors：包含文档中所有带name特性的<a>元素；
document.applets：包含文档中所有的<applet>元素（不推荐使用）
document.forms：包含文档中所有的<form>元素，与document.getElementsByTagName(“form”)得到的结果相同；
document.images：包含文档中所有的<img>元素，与document.getElementsByTagName(“img”)得到的结果相同；
document.links：包含文档中所有带href特性的<a>元素。

文档写入

write()、writeln()、open()、close()

write()、writeln()方法接受一个字符串参数，即要写入到输出流的文本。在页面被夹在过程中，可以使用这两个方法向页面中动态的加入内容。
open()、close()分别用来打开和关闭网页的输出流。如果是在页面加载期间使用write()或writeln()方法，则不需要用到这两个方法。

Wonder233

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【JavaScript学习】DOM：Document类型

1、在浏览器中，ducument对象是HTMLDocument（继承至Document类型）的一个实例，表示整个HTML页面。 2、document对象是window对象的一个属性，因此可以将其作为全局对象来访问。document节点特征nodeType的值是9；nodeName的值为“#document”；nodeValue的值为null；parentNode的值为null
复制链接

扫一扫