2018-06-18 初识JavaScript 中的DOM

前言:在JavaScript中,DOM操作是最基础的,本文就先让我们初步的认识一下DOM的基本概念以及一些常用的API。(本文暂不系统介绍DOM,仅作初步了解)


1、DOM 到底是个什么鬼

文档对象模型 (Document Object Model ,即DOM) 是HTML和XML文档的编程接口。它提供了对文档的结构化的表述,并定义了一种方式可以使从程序中对该结构进行访问,从而改变文档的结构,样式和内容。DOM 将文档解析为一个由节点和对象(包含属性和方法的对象)组成的结构集合。简言之,它会将web页面和脚本或程序语言连接起来。

文档对象模型将 web 页面与到脚本或编程语言连接起来。通常是指 JavaScript,但将 HTML、SVG 或 XML 文档建模为对象并不是 JavaScript 语言的一部分。DOM模型用一个逻辑树来表示一个文档,树的每个分支的终点都是一个节点(node),每个节点都包含着对象(objects)。DOM的方法(methods)让你可以用特定方式操作这个树,用这些方法你可以改变文档的结构、样式或者内容。节点可以关联上事件处理器,一旦某一事件被触发了,那些事件处理器就会被执行。

2、节点

DOM 的最小组成单位叫做节点(node)。文档的树形结构(DOM 树),就是由各种不同类型的节点组成。每个节点可以看作是文档树的一片叶子。

节点的类型有以下七种,浏览器提供一个原生的节点对象Node,而这七种节点都继承了Node,因此具有一些共同的属性和方法:
- Document:整个文档树的顶层节点
- DocumentType:doctype标签(比如)
- Element:网页的各种HTML标签(比如、等)
- Attribute:网页元素的属性(比如class=”right”)
- Text:标签之间或标签包含的文本
- Comment:注释
- DocumentFragment:文档的片段

3、节点树

一个文档的所有节点,按照所在的层级,可以抽象成一种树状结构。这种树状结构就是 DOM 树。它有一个顶层节点,下一层都是顶层节点的子节点,然后子节点又有自己的子节点,就这样层层衍生出一个金字塔结构,倒过来就像一棵树。

浏览器原生提供document节点,代表整个文档。

文档的第一层只有一个节点,就是 HTML 网页的第一个标签,它构成了树结构的根节点(root node),其他 HTML 标签节点都是它的下级节点。

除了根节点,其他节点都有三种层级关系。

  • 父节点关系(parentNode):直接的那个上级节点
  • 子节点关系(childNodes):直接的下级节点
  • 同级节点关系(sibling):拥有同一个父节点的节点

DOM 提供操作接口,用来获取这三种关系的节点。比如,子节点接口包括firstChild(第一个子节点)和lastChild(最后一个子节点)等属性,同级节点接口包括nextSibling(紧邻在后的那个同级节点)和previousSibling(紧邻在前的那个同级节点)属性。

4、节点类型 Node.nodeType

nodeType属性返回一个整数值,表示节点的类型。

document.nodeType // 9
上面代码中,文档节点的类型值为9。

Node 对象定义了几个常量,对应这些类型值。如:
document.nodeType === Node.DOCUMENT_NODE // true
上面代码中,文档节点的nodeType属性等于常量Node.DOCUMENT_NODE。

不同节点的nodeType属性值和对应的常量如下。

文档节点(document):9,对应常量Node.DOCUMENT_NODE
元素节点(element):1,对应常量Node.ELEMENT_NODE
属性节点(attr):2,对应常量Node.ATTRIBUTE_NODE
文本节点(text):3,对应常量Node.TEXT_NODE
文档片断节点(DocumentFragment):11,对应常量Node.DOCUMENT_FRAGMENT_NODE
文档类型节点(DocumentType):10,对应常量Node.DOCUMENT_TYPE_NODE
注释节点(Comment):8,对应常量Node.COMMENT_NODE

确定节点类型时,使用nodeType属性是常用方法。如:

var node = document.documentElement.firstChild;
if (node.nodeType === Node.ELEMENT_NODE) { // 或者直接写成 node.nodeType === 1
  console.log('该节点是元素节点');
}

5、常用的DOM操作

  • createElement
    createElement通过传入指定的一个标签名来创建一个元素,如果传入的标签名是一个未知的,则会创建一个自定义的标签,注意:IE8以下浏览器不支持自定义标签。
    如:var div = document.createElement("div");

  • appendChild
    appendChild 即将指定的节点添加到调用该方法的节点的子元素的末尾。调用方法如下:parent.appendChild(child);
    child节点将会作为parent节点的最后一个子节点。

  • document.getElementById
    这个接口很简单,根据元素id返回元素,返回值是Element类型,如果不存在该元素,则返回null。
    使用这个接口有几点要注意:
    (1)元素的Id是大小写敏感的,一定要写对元素的id
    (2)HTML文档中可能存在多个id相同的元素,则返回第一个元素(当然多个同名id是不符合规范的)
    (3)只从文档中进行搜索元素,如果创建了一个元素并指定id,但并没有添加到文档中,则这个元素是不会被查找到的

  • document.getElementsByTagName
    这个接口根据元素标签名获取元素,返回一个即时的HTMLCollection类型

  • document.getElementsByClassName
    这个API是根据元素的class返回一个即时的HTMLCollection,

  • document.querySelectordocument.querySelectorAll
    这两个api很相似,通过css选择器来查找元素,注意选择器要符合CSS选择器的规则。

  • childNodes:返回一个即时的NodeList,表示元素的子节点列表,子节点可能会包含文本节点,注释节点等。
    children:一个即时的HTMLCollection,子节点都是Element,IE9以下浏览器不支持。

  • getAttribute
    getAttribute返回指定的特性名相应的特性值,如果不存在,则返回null或空字符串。用法如下:
    var value = element.getAttribute("id");

  • getBoundingClientRect
    getBoundingClientRect用来返回元素的大小以及相对于浏览器可视窗口的位置,用法如下:var clientRect = element.getBoundingClientRect();
    clientRect是一个DOMRect对象,包含left,top,right,bottom,它是相对于可视窗口的距离,滚动位置发生改变时,它们的值是会发生变化的。除了IE9以下浏览器,还包含元素的height和width等数据,具体可查看MDN链接

6、参考链接

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值