JavaScript & DOM 学习笔记(三)
JavaScript & DOM 学习笔记(三)
pradosoul 发表于2年前
JavaScript & DOM 学习笔记(三)
  • 发表于 2年前
  • 阅读 34
  • 收藏 3
  • 点赞 0
  • 评论 0
摘要: DOM 基础知识:JavaScript的对象、DOM 文档的节点、获取元素节点的方式、属性节点的操作 ——《JavaScript & DOM、CSS 等Web前段的学习笔记》

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

    a. 用户定义对象(user-defined object):由程序员自行创建的对象。

    b. 内建对象(native object):内建在 JavaScript 语言里的对象,如 Array、Math 和 Date 等

    c. 宿主对象(host object):由浏览器提供的对象。

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

    元素节点(element node)DOM 的原子 是 元素节点。如笔记二中代码部分,我们使用了 <body>、<p>、<ul> 之类的元素。  <p title="a gentle reminder">Don't forget to buy this stuff.</p>

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

    属性节点(attribute node):<p> 节点中 的 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 值。<p>元素本身的 nodeValue 是一个空值。而包含在 <p> 元素中的文本是另一个节点,它是<p> 元素的第一个子节点。正确的获取文本是这样的:alert(description.childNodes[0].nodeValue)

6. firstChild 和 lastChild 属性

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

共有 人打赏支持
粉丝 7
博文 40
码字总数 37445
×
pradosoul
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: