【DOM】Node类型之Document

最新推荐文章于 2024-04-17 06:40:49 发布

lianghaihsia

最新推荐文章于 2024-04-17 06:40:49 发布

阅读量1.4k

点赞数

分类专栏： dom 文章标签： dom document

本文链接：https://blog.csdn.net/lianghaihsia/article/details/58350232

版权

dom 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

本文章所有代码及其内容来自《javascript高级程序设计》，感兴趣的朋友可以购买纸质图书。

—————————————————————————————
. javascript中Document类型表示文档。
.document对象是HTMLDocument（继承自Document）的一个实例。
.document对象是window对象的一个属性。

》Document的特征

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

》1. 文档的子节点
访问文档子节点有两种快捷方式document。第一个是documentElement属性，该属性始终只想HTML页面中的html元素。第二个是使用childNodes列表访问文档元素。

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

1.1 作为HTMLDocument的实例，document还有一个body属性，直接指向body元素。

var body = document.body;

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

1.2> 其子节点可能是一个DocumentType（最多一个）、Element（最多一个）、ProcessingInstruction或Comment。

另一个可能性是doctype.
var document = docuemt.doctype;
. IE8及之前版本，如果存在文档类型声明则会错误地解释为注释并把它当做Comment节点，而doctype的值永远是null;
. IE9+及firefox，如果存在文档类型说明，将其视为文档的第一个子节点。
. Safari、Chrome、Opera：如果存在文档类型说明则将其解析，但是不作为文档的子节点。document.doctype是DocumentType节点，但是不会出现在childNodes中.

1.3 > comment
不同浏览器对于出现在html元素外部的解析和处理也不一样。

2 》文档信息
title、domain、URL、referrer

// 取得网页标题
var title = document.title;
// 取得网页域名
var domain = document.domain;
//取得完整URL地址 
var url = document.URL;
//取得来源网页的URL
var ref = document.referrer;

域名domain 的注意事项

如果页面来自于blog.csdn.net，则domain不可设为sina.com.

// 假设页面来自 blog.csdn.net
document.domain = "csdn.net";  // true
document.domain = "sina.com";  // false

如果一个页面加载自www.wrox.com，其中包含一个内嵌框架，框架内的页面加载来自p2p.wrox.com，由于document.domin字符串不一样，内外两个网页之间无法相互访问对方的JavaScript对象。但如果两个页面的domain相同，则可以相互同性。
domain属性还有一个限制，如果一开始是松散的（loose） ,则不能再设置为紧绷的（tight）.

// 假设页面来自p2p.wrox.com
document.domain = "wrox.com";    //松散的（成功）
document.domain = "p2p.wrox.com"; //紧绷的（失败）

————————
》 3 查找元素
Document类型为此提供两种方法。document.getElementById()和document.getElementsByTagName()

3.1 getElementById()
接收一个参数，要取得的元素ID。找到返回该元素，没有找到则返回null.

<div id="myDiv">sometext </div>

var div = document.getElementById("myDiv");  //取得div元素引用
var div = document.getElementById("mydiv");  //无效的ID（在IE及更早版本可以）

IE8及低版本不区分ID的大小写，因此“myDiv”和“mydiv”会当做相同的元素ID。
如果页面中多个元素的ID相同则返回第一个出现元素。

<input type="text" name="myElement" value="Text">
<div id="myElement">a div</div>

基于这点HTML代码，在IE7中调用document.getElementById()会返回input元素，而其他的浏览第都会返回div。最好的办法是不让表单字段的name特性与其他元素的ID相同。

3.2 getElementsByTagName()
调用该方法返回是包含零或多个元素的NodeList。在HTML文档中，这个方法会返回一个HTMLCollection对象。

var image = document.getElementsByTagName("img");//取得页面中所有<img>元素
var length = image.length;
var firstImg = image[0];   //通过[]或者.item()访问具体元素
var firstImg = image.item(0);

HTMLCollection还有一个namedItem方法通过元素的name去的集合中的项。

<img src=""  name="myImage">
var myImage = document.namedItem("myImage")

对于HTMLCollection而言，我们可以向方括号中传入数值或者是字符串。如果传入数值则调用item()，如果传入的是字符串则调用namedItem()。

var all = document.getElementsByTagName("*");

星号（*）通常表示全部，而上面的代码则会返回页面中所有的注释节点。

3.3 getElementsByName()
该方法只有HTMLDocument类型才有，该方法会返回所有给定name的元素，通常用于取得单选按钮。

》 4.特殊集合 ( 5个)
document.anchors：文档中所有带name特征的a元素
document.images：文档中所有的img元素,与document.getElementsByTagName取得的值相同
document.applets：包含文档中所有applet元素.已不推荐使用。
document.links：包含文档中所有带href特征的a元素
document.forms：包含所有的form元素

》 5.文档写入
write()、writeln()、open()、close()
open()和close()打开或关闭网页的输出流

lianghaihsia

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
【DOM】Node类型之Document

. javascript中Document类型表示文档。 .document对象是HTMLDocument（继承自Document）的一个实例。 .document对象是window对象的一个属性。》Document
复制链接

扫一扫

专栏目录