文档章节

JavaScript & DOM 学习笔记(三)

pradosoul
 pradosoul
发布于 2015/12/09 17:13
字数 1057
阅读 45
收藏 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
从零开始学 Web 之 jQuery(一)jQuery的概念,页面加载事件

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

fengdaoting
07/04
0
0
WEB前端学习javascript学习笔记

Web前端开发工程师是一个很新的职业,是从事Web前端开发工作的工程师。主要进行网站开发,优化,完善的工作。网页制作是Web 1.0时代的产物,那时网站的主要内容都是静态的,用户使用网站的行...

web前端小辰
05/25
0
0

没有更多内容

加载失败,请刷新页面

加载更多

原型模式

1、原型模式-定义 用原型实例指定创建对象的种类,并且通过拷贝这些原型创建新的对象 克隆(浅度克隆->拷贝值类型或者引用,深度克隆->创建新的对象,开辟新的内存) 例如客户端知道抽象Pro...

阿元
今天
47
0
awk命令扩展使用操作

awk 中使用外部shell变量 示例1 [root@centos01 t1022]# A=888[root@centos01 t1022]# echo "" | awk -v GET_A=$A '{print GET_A}'888[root@centos01 t1022]# echo "aaaaaaaaaaaaa" | aw......

野雪球
今天
42
0
深入解析MySQL视图VIEW

Q:什么是视图?视图是干什么用的? A:视图(view)是一种虚拟存在的表,是一个逻辑表,本身并不包含数据。作为一个select语句保存在数据字典中的。   通过视图,可以展现基表的部分数据;...

IT--小哥
今天
47
0
虚拟机学习之二:垃圾收集器和内存分配策略

1.对象是否可回收 1.1引用计数算法 引用计数算法:给对象中添加一个引用计数器,每当有一个地方引用它时,计数器值就加1;当引用失效时,计数器值就减1;任何时候计数器值为0的对象就是不可能...

贾峰uk
今天
42
0
smart-doc功能使用介绍

smart-doc从8月份底开始开源发布到目前为止已经迭代了几个版本。在这里非常感谢那些敢于用smart-doc去做尝试并积极提出建议的社区用户。因此决定在本博客中重要说明下smart-doc的功能,包括使...

上官胡闹
昨天
47
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部