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 描绘...
    霜天晓阅读 666评论 0 6
  • 基本概念 DOM DOM 是 JavaScript 操作网页的接口,全称为“文档对象模型”(Document Ob...
    许先生__阅读 244评论 0 1
  • 参考书:《JavaScript高级程序设计》 知识点前提:什么是节点 Node类型 DOM1级定义了一个Node接...
    DHFE阅读 48评论 0 0
  • 前言:尽管现在有很多优秀的框架,大大简化了我们的DOM操作,但是我们仍然要学好DOM知识来写原生JS,从根本上去理...
    长鲸向南阅读 607评论 0 0
  • 一、基本概念 1.1、DOM DOM是JS操作网页的接口,全称为“文档对象模型”(Document Object ...
    周花花啊阅读 684评论 0 6