JavaScript & DOM 学习笔记（三）

最新推荐文章于 2024-10-02 05:39:15 发布

weixin_33980459

最新推荐文章于 2024-10-02 05:39:15 发布

阅读量68

点赞数

文章标签： javascript python xhtml ViewUI

原文链接：https://my.oschina.net/u/1757476/blog/541637

版权

2019独角兽企业重金招聘Python工程师标准>>>

1. JavaScript 语言里的对象可以分为三种类型：

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

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

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

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

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

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

属性节点（attribute node）： 节点中的 title="a gentle reminder" 就是一个属性节点。因为属性总是被放在起始标签里，所以属性节点总是被包含在元素节点中。并非所有的元素都包含着属性，但所有的苏醒都被元素包含。

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

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 中的最后一个元素。

转载于:https://my.oschina.net/u/1757476/blog/541637