Dom 元素

DOM 由各种节点构成,简要总结如下。

  • 最基本的节点类型是 Node,用于抽象地表示文档中一个独立的部分;所有其他类型都继承自
    Node。
  • Document 类型表示整个文档,是一组分层节点的根节点。在 JavaScript 中,document 对象是Document 的一个实例。使用 document 对象,有很多种方式可以查询和取得节点。
  • Element 节点表示文档中的所有 HTML 或 XML 元素,可以用来操作这些元素的内容和特性。
  • 另外还有一些节点类型,分别表示文本内容、注释、文档类型、CDATA 区域和文档片段。

HTML中主要节点类型的继承关系,如下图

HTML中节点类型的继承关系.png

获取dom元素的方法

获取dom元素.png

HTMLCollection 属性&方法,示例

<img src="myimage.gif" name="myImage">
---
var images = document.getElementsByTagName("img");
alert(images.length);//输出图像的数量 
alert(images[0].src);//输出第一个图像元素的 src 特性 
alert(images.item(0).src);//输出第一个图像元素的 src 特性
// HTMLCollection 对象还有一个方法,叫做 namedItem(),使用这个方法可以通过元素的 name 特性取得集合中的项
var myImage = images.namedItem("myImage");
// 在提供按索引访问项的基础上,HTMLCollection 还支持按名称访问项
var myImage = images["myImage"];

HTMLCollection =≠ NodeList

  1. HTMLCollection只能包含Element节点类型实例,NodeList可以包含Node及派生类的实例
  2. HTMLCollection比NodeList多一个方法 -HTMLCollection.namedItem(),支持通过ID或name属性索引获取指定元素
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  •   DOM(文档对象模型)是针对 HTML 和 XML 文档的一个 API(应用程序编程接口)。   DOM 描绘...
    霜天晓阅读 9,074评论 0 7
  • 基本概念 DOM DOM 是 JavaScript 操作网页的接口,全称为“文档对象模型”(Document Ob...
    许先生__阅读 4,332评论 0 1
  • 参考书:《JavaScript高级程序设计》 知识点前提:什么是节点 Node类型 DOM1级定义了一个Node接...
    DHFE阅读 3,089评论 0 0
  • 前言:尽管现在有很多优秀的框架,大大简化了我们的DOM操作,但是我们仍然要学好DOM知识来写原生JS,从根本上去理...
    长鲸向南阅读 5,969评论 0 0
  • 一、基本概念 1.1、DOM DOM是JS操作网页的接口,全称为“文档对象模型”(Document Object ...
    周花花啊阅读 8,523评论 0 6