文档章节

JavaScript & DOM 学习笔记(三)

pradosoul
 pradosoul
发布于 2015/12/09 17:13
字数 1057
阅读 46
收藏 3

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

© 著作权归作者所有

共有 人打赏支持
pradosoul
粉丝 6
博文 40
码字总数 37445
作品 0
闵行
程序员
私信 提问
day03_js学习笔记_03_js的事件、js的BOM、js的DOM

day03js学习笔记03_js的事件、js的BOM、js的DOM ============================================================================= 涉及到的知识点有: ==================================......

黑泽明军
04/19
0
0
第一章--JavaScript简介

1. JavaScript的构成 1.1. ECMAScript ECMAScript规定了核心语言的组成部分分别为:语法、类型、语句、关键字、保留字、操作符、对象。 宿主环境:Web浏览器、Node、Adobe Flash。 1.2. DOM...

lovewt
06/05
0
0
JSON,异步加载(学习笔记)

JSON是一种传输数据的格式(以对象为样板,本质上就是对象,但用途有区别,对象就是本地用的,json是用来数据传输的,前端与后端的数据通信) JSON是静态类(不需要构造),类似于Math,内部...

Mrs_CoCo
04/23
0
0
如何学习Javascript?你是入门,还是精通?

首先要说明的是,咱现在不是高手,最多还是一个半桶水,算是入了JS的门。   谈不上经验,都是一些教训。   这个时候有人要说,“靠,你丫半桶水,凭啥教我们”。您先别急着骂,先听我说。...

coffeescript
2014/07/23
389
0
从零开始学 Web 之 jQuery(一)jQuery的概念,页面加载事件

大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:http://www.cnblogs.com/lvonve/ CSDN...

fengdaoting
07/04
0
0

没有更多内容

加载失败,请刷新页面

加载更多

大数据教程(9.5)用MR实现sql中的jion逻辑

上一篇博客讲解了使用jar -jar的方式来运行提交MR程序,以及通过修改YarnRunner的源码来实现MR的windows开发环境提交到集群的方式。本篇博主将分享sql中常见的join操作。 一、需求 订单数据表...

em_aaron
17分钟前
1
0
十万个为什么之什么是resultful规范

起源 越来越多的人开始意识到,网站即软件,而且是一种新型的软件。这种"互联网软件"采用客户端/服务器模式,建立在分布式体系上,通过互联网通信,具有高延时(high latency)、高并发等特点...

尾生
22分钟前
1
0
《告诉你真实的美国教育》的读后感3900字

《告诉你真实的美国教育》的读后感3900字: 文章的开篇分析了我们耳熟能详的关于美国教育的小故事,就是那个因为幼儿园的老师教了“0”这个字母,然后妈妈告老师剥夺了孩子的想象力,再然后幼...

原创小博客
30分钟前
0
0
Terraform配置文件(Terraform configuration)

Terraform配置文件 翻译自Terraform Configuration Terraform用文本文件来描述设备、设置变量。这些文件被称为Terraform配置文件,以.tf结尾。这一部分将讲述Terraform配置文件的加载与格式。...

buddie
46分钟前
2
0
exportfs命令, vsftp搭建ftp服务

exportfs命令 当修改/etc/exports文件后,更改的内容是不会立即生效的。如果重启nfs服务,会导致客户端重启期间的请求是挂起等待的,可以把客户端的挂载umount进行卸载后,再重启nfs服务,但...

野雪球
56分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部