JavaScript & DOM 学习笔记（三）

时间 2019-11-13

原文原文链接

1. JavaScript 语言里的对象能够分为三种类型：html

a. 用户定义对象（user-defined object）：由程序员自行建立的对象。
node

b. 内建对象（native object）：内建在 JavaScript 语言里的对象，如 Array、Math 和 Date 等
程序员

c. 宿主对象（host object）：由浏览器提供的对象。
数组

2. DOM 文档的节点可分为：元素节点、属性节点和文本节点等。浏览器

元素节点（element node）：DOM 的原子是元素节点。如笔记二中代码部分，咱们使用了 <body>、、<ul> 之类的元素。 Don't forget to buy this stuff.this

文本节点（text node）：上面的 元素节点中，包含着的 “Don't forget to buy this stuff.”就是一个文本节点。在 XHTML 文档里，文本节点老是被包含在元素节点的内部。但并不是全部的元素节点都包含有文本节点。
spa

属性节点（attribute node）： 节点中的 title="a gentle reminder" 就是一个属性节点。由于属性老是被放在起始标签里，因此属性节点老是被包含在元素节点中。并不是全部的元素都包含着属性，但全部的苏醒都被元素包含。code

3. 获取元素的方式：（下面的方法名区分大小写）htm

a. getElementById（id）：返回一个该 id 的元素节点。如：document.getElementById（"idName"）
对象

b. getElementByTagName（tag）：返回一个对象数组，每一个对象分别对应文档中该 tag 标签的元素。

c. getElementByClassName（class）：返回一个具备相同类名的元素的数组。这个方法能够查找带有多个类名的元素，只须要在参数中用空格将类名分隔开。如：document.getElementByClassName（"class1 class2"）; 多个类名的顺序不影响结果。

4. 获取和设置元素的属性

a. getAttribute：object.getAttribute（attribute）；此方法不属于 document对象，因此不能经过 document 对象去调用。只能经过元素节点对象调用。

b. setAttribute：object.setAttribute（attribute）；值得关注的细节：setAttribute 作出的修改不会反应在文档自己的源代码里，也就是说不会改动源代码。这种现象源自 DOM 的工做模式：先加载文档的静态内容，在动态刷新，而动态刷新不会影响文档的静态内容。这正是 DOM 的真正威力：对页面内容进行刷新却不须要在浏览器里刷新页面。

5. childNodes、nodeType、nodeValue 属性

childNodes：在一棵节点树上，childNodes属性能够用来获取任何一个元素的全部子元素，返回值是一个数组，而这个数组中包含全部的类型节点。事实上，文档中几乎每同样东西都是一个节点，甚至连空格和换行符都会被解释为节点。
nodeType：幸亏的是，每个节点都有 nodeType 属性，nodeType 属性的值是一个数字。nodeType 属性总共有 12 种可取值，其中三种最具实用价值：

元素节点 nodeType 属性值是 1，属性节点 nodeType 属性值是 2，文本节点 nodeType 属性值是 3

nodeValue：若是想改变一个文本节点的值，那就使用 nodeValue 属性来获取该文本对象的值 node.nodeValue。

例如：一个文本节点

<p id="description">Choose a image.</p>

注意：用 nodeValue 属性获取 description 对象的值时，获得的并非包含在这个段落里的文本。使用 alert (description.nodeValue) 来验证，返回的是一个 null 值。元素自己的 nodeValue 是一个空值。而包含在 元素中的文本是另外一个节点，它是 元素的第一个子节点。正确的获取文本是这样的：alert（description.childNodes[0].nodeValue）

6. firstChild 和 lastChild 属性

上面介绍的 chiildNodes[0] 有个更直观的同义词 firstChild。若是只须要访问 childNodes 数组的第一个元素，就能够使用 firstChild。这不只更加简短，并且可读性更强。一样，与之对应的 node.childNodes[node.childNodes.length - 1] 也有个同义词, node.lastChild。用来获取元素 childNodes 中的最后一个元素。