操作HTML文档的第一步就是获取对文档元素的引用，每一个元素在DOM中就是一个节点，所有的元素在DOM中构成一个节点树。

用于获取元素节点定义的方法定义于HTMLDocument接口，window.document方法用于实现该接口，其定义的常用方法和属性如下：

属性或方法 返回值类型 说明
[getter] 任何类型 根据元素的name属性获取所有元素节点
all HTMLAllCollection 文档中所有元素组成的集合，已不推荐使用
body HTMLElement 获取<body>元素节点
head HTMLHeadElement 获取<head>元素节点
images HTMLCollection 获取所有<img>元素节点
embeds HTMLCollection 获取所有<embed>元素节点
plugins HTMLCollection 等同于embeds属性
links HTMLCollection 获取所有带href属性的<a>和<area>元素节点
forms HTMLCollection 获取所有<form>元素节点
scripts HTMLCollection 获取所有<script>元素节点
getElementsByName() NodeList 根据元素的name属性获取所有元素节点
getElementsByClassName() NodeList 根据元素的class属性获取所有元素节点

另外，HTMLDocument接口也继承了Core DOM的Document接口，继承的属性和方法如下：

属性或方法 返回值类型 说明
documentElement Element 获取xml或者html的根元素，在html中即<html>
getElementById() Element 根据ID属性值获取指定元素
getElementsByTagName() NodeList 根据元素名称获取所有元素节点
getElementsByTagNameNS() NodeList 根据指定的命名空间的元素名获取所有元素节点

DOM笔记（一）：HTMLDocument接口的更多相关文章

  1. DOM笔记（三）：Element接口和HTMLElement接口

    一.Element接口 Element接口表示一个元素,该接口扩展自Node接口,自然继承了Node接口的属性和方法,也有一套针对元素的属性和方法. Element接口常见的属性比较少,常用的就是一个 ...

  2. DOM笔记（二）：Node接口

    所有的节点都使用Node接口来表示,可以使用很多方法去获取节点,如document.getElementsByTagName().document.getElementsByName()等均返回一个N ...

  3. DOM笔记（四）：HTML 5 DOM复杂数据类型

    HTML 5 DOM定义了一下集合.列表等复杂的数据类型用于实现便捷的操作.相对于HTML 4 DOM,HTML 5 DOM增加了HTMLCollection.DOMTokenList.DOMStri ...

  4. DOM笔记（十三）：JavaScript的继承方式

    在Java.C++.C#等OO语言中,都支持两种继承方式:接口继承和实现继承.接口继承制继承方法签名,实现继承则继承实际的方法和属性.在SCMAScript中,由于函数没有签名,所以无法实现接口继承, ...

  5. DOM对象模型四大基本接口

    本文向大家描述一下DOM对象模型的四个基本接口,在DOM对象模型接口规范中,有四个基本的接口:Document,Node,NodeList以及NamedNodeMap. 在DOM对象模型接口规范中,有 ...

  6. DOM笔记（十）：JavaScript正则表达式

    一.RegExp ECMAScript通过RegExp类型类支持正则表达式,语法和Perl类似: var exp = /pattern/flags; patternb部分是任何简单的或复杂的正则表达式 ...

  7. DOM笔记（七）：开发JQuery插件

    在上一篇笔记本中,讲解了如何利用jQuery扩展全局函数和对象:DOM笔记(六):怎么进行JQuery扩展? 在这篇笔记本中,将开发一个简单的动画插件,名称是example-plugin,用其实现一个 ...

  8. DOM笔记（五）：JavaScript的常见事件和Ajax小结

    一.常见事件类型 1.鼠标事件 事件名称 说明 onclick 鼠标单击时触发 ondbclick 鼠标双击时触发 onmousedown 鼠标左键按下时触发 onmouseup 鼠标释放时触发 on ...

  9. Typescript 学习笔记六：接口

    中文网:https://www.tslang.cn/ 官网:http://www.typescriptlang.org/ 目录: Typescript 学习笔记一:介绍.安装.编译 Typescrip ...

随机推荐

  1. *[topcoder]ChooseTheBestOne

    https://www.topcoder.com/stat?c=problem_statement&pm=13146&rd=15852 // Need carefully calc t ...

  2. VCL源码分析方法论（以TButton.Caption属性的由来为例）

    最近一段时间似乎流行源码分析:)我也来谈谈在过去一段时间里对VCL源码的分析方法方面的一点体会,本文将不探讨VCL类库的构架和设计模式方面的东本,只是以我们常见的控件属性/方法的实现过程作简单的说明, ...

  3. 一个简单json数据提交实例

    1.客户端编程:jsp页面 <%@ page language="java" contentType="text/html; charset=UTF-8" ...

  4. NuGet在2015中的使用

    NuGet Package Restore  https://docs.nuget.org/Consume/Package-Restore 以https://github.com/andburn/hd ...

  5. C++ STL之vector容器的基本操作

    注意事项:特别注意任何时候同时使用两个迭代器产生的将会是一个前闭后开的区间(具体见插入和删除的例子)特别注意begin()指向的是vec中的第0个元素,而end是指向最后一个元素的后面一个位置(不是最 ...

  6. git push提示或错误

    当 git 和 gerrit 一起使用的时候,你创建了一个 tag,现在需要 push 到远程仓库,当你没有权限的时候,会出现如下提示: $ git push origin v20150203 Tot ...

  7. 百度HTTPS加密搜索有什么用？

    前段时间,我曾提到百度支持移动端HTTPS SSL加密搜索,用以保护用户隐私.最近,百度开始支持PC端HTTPS SSL加密搜索,现在可以启用 https://www.baidu.com 搜索.我很少 ...

  8. JPA中的@MappedSuperclass

    说明地址:http://docs.oracle.com/javaee/5/api/javax/persistence/MappedSuperclass.html 用来申明一个超类,继承这个类的子类映射 ...

  9. jquery dialog-优雅的弹出框

    前面一章已经对datepicker的使用,做了简单的说明.这一章主要对dialog如何使用做个说明.         jquery ui-dialog在web开发中运用还是比较多的.最常见的例子就是登 ...

  10. BestCoder Round #35

    A 题意:给出n个黑球,m个白球,每次取1个球,取了n+m次以后,会生成一个随机的01串S, 如果第i次取出的是黑球,则s[i]=1,如果是白色的,那么s[i]=0, 问01串在S中出现的期望次数 大 ...