当前位置: 首页 > news >正文

DOM Document节点类型详解

在前面 DOM 概况 中,我们知道了 DOM 总共有 12 个节点类型,今天我们就来讲下 DOM 中最重要的节点类型之一的 document 节点类型。

1、概况


Javascript 通过 Document 类型表示文档。在浏览器中, document 对象是 HTMLDocument(继承自 Document 类型)的一个实例,表示整个 HTML 页面。而且, document 对象是 window 对象的一个属性,因此可以将其作为全局对象来访问。 Document 节点具有如下特性:

  1. nodeType 的值为 9
  2. nodeName 的值为 '#document'
  3. nodeValue 的值为 null
  4. parentNode 的值为 null
  5. ownerDocument 的值为 null
  6. 其子节点可能是一个 DocumentType(最多一个)、Element(最多一个)、ProcessingInstruction 或者 Comment

Document 类型可以表示 HTML 页面或者其他基于 XML 的文档。不过最常见的应用还是作为 HTMLDocument 实例的 document 对象。通过这个文档对象,不仅可以取得与页面有关的信息,而且还能操作页面的外观及其底层结构。

var d = document;
console.log(d.nodeType); // 9
console.log(d.nodeName); // #document
console.log(d.nodeValue); // null
console.log(d.parentNode); // null
console.log(d.ownerDocument); // null

2、文档的子节点


虽然 DOM 标准规定 Document 节点的子节点可以是 DocumentType(最多一个)、Element(最多一个)、ProcessingInstruction 或者 Comment,但还是有两个内置的访问其子节点的快捷方式。第一个就是 documentElement 属性,该属性始终指向 HTML 页面中的 <html> 元素,另一个就是通过 childNodes 列表访问文档元素:(假设没有指定文档类型)

var html = document.documentElement;
console.log(html === document.childNodes[0]); // true
console.log(html === document.firstChild); // true

作为 HTMLDocument 的实例,document 对象还有一个 body 属性,直接指向 <body> 元素。

var body = document.body;

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

Document 另一个可能的子节点是 DocumentType。通常将 <!DOCTYPE> 标签看成一个和文档其他部分不同的实体,可以通过 doctype 属性来访问它的信息:

var doctype = document.doctype; // 取得对 <!DOCTYPE> 的引用
console.log(doctype);
console.log(document.firstChild === doctype); // true
console.log(document.childNodes.length); // 2 (doctype 以及 documentElement)

但是浏览器对 document.doctype 的支持差别很大,使得这个属性的用处很有限。

文档的子节点还能是注释节点:

<!-- a -->
<!DOCTYPE html>
<script>
    console.log(document.childNodes.length); // 3 (chrome)
</script>
<!-- b -->

但是,现实中的浏览器在处理位于 <html> 外部的注释方面存在差异,比如 chrome 下就直接忽视上面的第二个注释节点。

3、文档信息


作为 HTMLDocument 的一个实例,document 对象还有一些标准的 Document 对象所没有的属性。

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

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

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

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

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

domain 属性是可以设置的,这点在跨域通信中应用甚广。由于安全方面的考虑,也并非可以给 domain 设置任何值。

// 假设页面来自 p2p.wrox.com

document.domain = 'wrox.com'; // 成功

document.domain = 'cnblogs.com'; // 出错

浏览器对 domain 属性还有一个限制,即如果域名一开始是 “松散的”,那么不能再将它设置为 “紧绷的”:

// 假设页面来自 p2p.wrox.com

document.domain = 'wrox.com'; 

document.domain = 'p2p.wrox.com'; // 出错

4、查找元素


var a = document.getElementById('..');

var b = document.getElementsByTagName('..');


// HTMLCollection
var images = document.getElementsByTagName('img');

console.log(images.length);
console.log(images[0].src);
console.log(images.item(0).src);

// 通过元素的name特性取得集合中的项
var myImage = images.namedItem('..');

// 也可以
var myImage = images['..']; // .. 为name值

// 对于HTMLCollection而言,我们可以向方括号中传入数字或者字符串(name值)
// 在后台,对数字调用item(),对字符串索引调用namedItem()
var myImage = images[0];
var myImage = images['nameOfMyImage'];


// 取得文档中的所有元素
var allElements = document.getElementsByTagName('*');


// document.getElementsByName
var radios = document.getElementsByName('color');

5、特殊集合


除了属性和方法,document 对象还有一些特殊的集合,这些集合都是 HTMLCollection 对象,为访问文档常用的部分提供了快捷方式:

document.anchors // 包含所有带name特性的<a>元素
document.forms // 包含文档中所有的<form>元素
document.images // 包含文档中所有的<img>元素
document.links // 包含文档中所有带href的<a>元素

相关文章:

  • C 工具库5:first fit pool
  • 使用eclipse 开发android应用没有代码提示
  • 写得蛮好的linux学习笔记
  • JavaWeb学习总结(三)——Tomcat服务器学习和使用(二)
  • 二十年后的回眸(8)——晋级的炒更之旅
  • 9月13日,bash总结
  • 北信源IPO,拟筹资开发企业级云安全管理平台
  • 过滤器,拦截器,监听器区别
  • archlinux安装及配置指南-GNOME3.0
  • MFS常用操作
  • 9月第2周网络安全报告:境内87.8万主机感染病毒
  • 我使用过的Linux命令之stty - 显示和修改终端行设置
  • java总结,错误集
  • Linux yum常用命令介绍
  • MongoDB学习笔记~数据结构与实体对象不一致时,它会怎么样?
  • 《Javascript高级程序设计 (第三版)》第五章 引用类型
  • C# 免费离线人脸识别 2.0 Demo
  • cookie和session
  • crontab执行失败的多种原因
  • es的写入过程
  • Java程序员幽默爆笑锦集
  • leetcode-27. Remove Element
  • Linux Process Manage
  • PHP变量
  • python_bomb----数据类型总结
  • Python学习笔记 字符串拼接
  • Python语法速览与机器学习开发环境搭建
  • 爬虫模拟登陆 SegmentFault
  • 前端之React实战:创建跨平台的项目架构
  • 少走弯路,给Java 1~5 年程序员的建议
  • 实习面试笔记
  • 最近的计划
  • [地铁译]使用SSD缓存应用数据——Moneta项目: 低成本优化的下一代EVCache ...
  • 带你开发类似Pokemon Go的AR游戏
  • ​2020 年大前端技术趋势解读
  • ​力扣解法汇总946-验证栈序列
  • ​七周四次课(5月9日)iptables filter表案例、iptables nat表应用
  • ​人工智能书单(数学基础篇)
  • ​直流电和交流电有什么区别为什么这个时候又要变成直流电呢?交流转换到直流(整流器)直流变交流(逆变器)​
  • #我与Java虚拟机的故事#连载11: JVM学习之路
  • $(selector).each()和$.each()的区别
  • (11)MSP430F5529 定时器B
  • (2015)JS ES6 必知的十个 特性
  • (Demo分享)利用原生JavaScript-随机数-实现做一个烟花案例
  • (PWM呼吸灯)合泰开发板HT66F2390-----点灯大师
  • (ros//EnvironmentVariables)ros环境变量
  • (SpringBoot)第二章:Spring创建和使用
  • (vue)el-checkbox 实现展示区分 label 和 value(展示值与选中获取值需不同)
  • (附源码)php投票系统 毕业设计 121500
  • (附源码)ssm码农论坛 毕业设计 231126
  • (经验分享)作为一名普通本科计算机专业学生,我大学四年到底走了多少弯路
  • (三)centos7案例实战—vmware虚拟机硬盘挂载与卸载
  • (三)终结任务
  • (三分钟)速览传统边缘检测算子
  • (一)基于IDEA的JAVA基础1