010 Document 类型和 Element 类型

上一篇文章介绍了 Node 节点的各种类型,以及对节点进行增删改克隆的一些方法,本文介绍 Document 和 Element 类型,它们都是继承于 Node 类型的节点,因此拥有 Node 类型上的一些方法。

DOM1 级定义了一个 Node 接口,该接口将由 DOM 中所有的节点实现。
JavaScript 中所有的节点类型都继承自 Node 类型,因此所有节点类型都共享着相同的基本属性和方法

以上引用自 《JavaScript 高级程序设计(第三版)》

document instanceof Node // true
document.body instanceof Node // true

Document 类型

JavaScript 通过 Document 类型表示整个文档,在浏览器中有一个 HTMLDocument 类型,其继承于 Document 类型。在浏览器中存在一个 document 对象,其是 HTMLDocument 类型的一个实例。

document instanceof HTMLDocument // true
document instanceof Document // true
document instanceof Node // true
document instanceof Object // true

在 DOM 树中,一切元素(文档、元素节点、注释、文本、属性等等)都是某一个节点类型的实例,这些节点类型都继承于 Node 类型,在 HTML 文档中的一切元素都是对象。(之前对这方面没有多少认识,写 HTML 页面时并没有意识到我们加到页面上的元素都是一个个对象,看了高程后,对 HTML 页面的认识更加深刻了。)

Document 类型的特征

Document 类型有以下特征:

document.nodeType // 9
document.nodeName // "#document"
document.nodeValue // null
document.parentNode // null
document.ownerDocument // null

常用子节点和特殊集合

为了方便我们对页面上的元素进行获取,Document 类型提供了一些快捷的访问子节点和特殊集合的方式:
1.document.documentElement
改子元素指向页面上的根元素 <html></html>

document.documentElement === document.firstElementChild // true

2.document.body
改子元素指向 <body></body>
3.document.title
可以用来获取/设置页面的 Title:

document.title = "我要吃烙饼"
document.title // "我要吃烙饼"

4.document.images
该属性是一个 HTMLCollection,包含了页面中的所有 <img />

document.images.length // 5
document.getElementsByTagName("img").length // 5
document.images[1] === document.getElementsByTagName("img")[1] // true

5.document.forms
该属性是一个包含了页面上所有 form 元素的集合。
6.document.links
该属性是一个包含了页面上所有带 href 属性的 a 元素集合。
HTML:

<a href="">1</a>
<a href="">2</a>
<a href="">3</a>
<a href="">4</a>
<a>5</a>

获取 document.links:

document.links.length // 4

document.write() 和 document.writeln()

docuemtn.write()document.writeln() 方法用来向页面中写入内容,通常用来在页面加载过程中进行内容写入,如果页面已经加载完成了,调用 document.write()document.writeln() 方法会先清空页面中的容,再进行写入。

Element 类型

Element 用于表现 XML 或者 HTML 中的元素节点,具有以下特征:

  • nodeType 的值为 1
  • nodeName 的值为元素的标签名
  • tagName 的值也是元素的标签名,其值和 nodeName 一样
  • nodeValue 为 null

总结

HMTL 中有各式各样的元素,每种元素都是一种节点,它们是某个节点类型的实例(如 HTMLDocument,Element)等,这些节点类型都继承于 Node。
HTML 中还有其他类型的节点,如 Text、Attr、Comment 等,这些节点都有各自相应的操作方法和特性,本文主要介绍了最常用的 Document 和 Element 节点,对于其他节点类型的操作可以查阅相关的文档,在高程这本书中也有比较详细的介绍。

完。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 216,240评论 6 498
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,328评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 162,182评论 0 353
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,121评论 1 292
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,135评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,093评论 1 295
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,013评论 3 417
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,854评论 0 273
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,295评论 1 310
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,513评论 2 332
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,678评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,398评论 5 343
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,989评论 3 325
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,636评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,801评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,657评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,558评论 2 352

推荐阅读更多精彩内容

  • 本章内容 理解包含不同层次节点的 DOM 使用不同的节点类型 克服浏览器兼容性问题及各种陷阱 DOM 是针对 HT...
    闷油瓶小张阅读 638评论 0 1
  • 原文 https://www.kancloud.cn/dennis/tgjavascript/241852 一、节...
    LuckyS007阅读 852评论 0 0
  • DOM(文档对象模型)是针对 HTML 和 XML 文档的一个 API。DOM 描绘了一个层次化的节点树,允许开发...
    劼哥stone阅读 771评论 8 6
  • 资源太大的app,电脑卡的半死。效率直接下降一个数量级。完全不能忍。一万个文件。400多M,不卡才怪。以后在也不搞...
    工匠良辰阅读 98评论 0 0
  • 一双小小手,从拇指数:大拇哥、二拇娘、中指、太阳、小妞妞。 大拇哥身体健壮、力气大,别看他个子不高长得有点严肃,可...
    月光松鼠阅读 2,460评论 1 12