文档章节

JavaScript & DOM 学习笔记(三)

pradosoul
 pradosoul
发布于 2015/12/09 17:13
字数 1057
阅读 44
收藏 3
点赞 0
评论 0

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
闵行
程序员
第一章--JavaScript简介

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

lovewt ⋅ 06/05 ⋅ 0

JSON,异步加载(学习笔记)

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

Mrs_CoCo ⋅ 04/23 ⋅ 0

WEB前端学习javascript学习笔记

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

web前端小辰 ⋅ 05/25 ⋅ 0

DOM系列:浏览器与DOM 主标签

最近回过头来在学习JavaScript中的DOM知识,随着学习进度的向前推移,越发感觉DOM知识点较多。为了能更好的系统了解清楚DOM相关的知识,我打算重新将DOM的学习划入到DOM系列当中。那么今天将...

一个敲代码的前端妹子 ⋅ 05/28 ⋅ 0

JavaWeb01-HTML篇笔记(七)

.1 案例三:完成对注册页面的数据的简单校验.1.1.1 需求: 对注册页面的数据进行非空的简单校验!!!如果有某个值没有输入,点击提交,弹出一个对话框进行提示!! 1.1.2 分析:1.1.2.1 技术分...

我是小谷粒 ⋅ 04/28 ⋅ 0

怪异的JavaScript系列(一)

译者按: JavaScript有很多坑,经常一不小心就要写bug。 原文: What the f*ck JavaScript? 译者: Fundebug 为了保证可读性,本文采用意译而非直译。另外,本文版权归原作者所有,翻译仅用于学...

Fundebug ⋅ 04/24 ⋅ 0

精读《现代 js 框架存在的根本原因》

1 引言 深入思考为何前端需要框架,以及 web components 是否可以代替前端框架? 原文地址,建议先阅读原文,或者阅读概述。 2 概述 现在前端框架非常多了,如果让我们回答 “为什么要用前端...

黄子毅 ⋅ 05/21 ⋅ 0

前端学习之路(从入门到入坑...)

学习前端两年多了,拿了阿里巴巴实现offer,想结合个人经历总结的前端入门方法,总结从零基础到具备前端基本技能的道路、学习方法、资料。由于能力有限,不能保证面面俱到,只是作为入门参考...

阿小庆 ⋅ 06/14 ⋅ 0

收藏好这篇,别再只说“数据劫持”了

最近接触了一些面试者,当我问起“Vue 如何实现数据双向绑定”时,会脱口而出“数据劫持”,然后呢?然后就没有然后了╮(╯_╰)╭。确实,“数据劫持”是基础,但远不是面试官想听到的答案,...

VanMess ⋅ 05/08 ⋅ 0

精读《现代 js 框架存在的根本原因

1 引言 深入思考为何前端需要框架,以及 web components 是否可以代替前端框架? 原文地址,建议先阅读原文,或者阅读概述。 2 概述 现在前端框架非常多了,如果让我们回答 “为什么要用前端...

黄子毅 ⋅ 05/21 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

6.1 压缩打包介绍 6.2 gzip压缩工具 6.3 bzip2压缩工具 6.4 xz压缩工具

压缩打包介绍 使用压缩工具的好处: 使用压缩文件,不仅可以节省磁盘空间,而且在传输时还能节省网络宽带。 我们通常讲的家用宽带和机房宽带100M是有区别的: 机房宽带的上行和下行都是100M,...

Linux_老吴 ⋅ 14分钟前 ⋅ 0

SpringBoot热部署加持

概述 进行SpringBoot的Web开发过程中,我们很多时候经常需要重启Web服务器才能保证修改的 源代码文件、或者一些诸如xml的配置文件、以及一些静态文件生效,这样耗时又低效。所谓的热部署指的...

CodeSheep ⋅ 21分钟前 ⋅ 0

OSChina 周六乱弹 —— 假如你被熊困到树上

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @小小编辑:推荐歌曲《如果写不出好的和弦就该在洒满阳光的钢琴前一起吃布丁》 《如果写不出好的和弦就该在洒满阳光的钢琴前一起吃布丁》- 谢...

小小编辑 ⋅ 52分钟前 ⋅ 5

vbs 取文件大小 字节

dim namedim fs, s'name = Inputbox("姓名")'msgbox(name)set fs = wscript.createobject("scripting.filesystemobject") 'fs为FSO实例if (fs.folderexists("c:\temp"))......

vga ⋅ 今天 ⋅ 1

高并发之Nginx的限流

首先Nginx的版本号有要求,最低为1.11.5 如果低于这个版本,在Nginx的配置中 upstream web_app { server 到达Ip1:端口 max_conns=10; server 到达Ip2:端口 max_conns=10; } server { listen ...

算法之名 ⋅ 今天 ⋅ 0

Spring | IOC AOP 注解 简单使用

写在前面的话 很久没更新笔记了,有人会抱怨:小冯啊,你是不是在偷懒啊,没有学习了。老哥,真的冤枉:我觉得我自己很菜,还在努力学习呢,正在学习Vue.js做管理系统呢。即便这样,我还是不...

Wenyi_Feng ⋅ 今天 ⋅ 0

博客迁移到 https://www.jianshu.com/u/aa501451a235

博客迁移到 https://www.jianshu.com/u/aa501451a235 本博客不再更新

为为02 ⋅ 今天 ⋅ 0

win10怎么彻底关闭自动更新

win10自带的更新每天都很多,每一次下载都要占用大量网络,而且安装要等得时间也蛮久的。 工具/原料 Win10 方法/步骤 单击左下角开始菜单点击设置图标进入设置界面 在设置窗口中输入“服务”...

阿K1225 ⋅ 今天 ⋅ 0

Elasticsearch 6.3.0 SQL功能使用案例分享

The best elasticsearch highlevel java rest api-----bboss Elasticsearch 6.3.0 官方新推出的SQL检索插件非常不错,本文一个实际案例来介绍其使用方法。 1.代码中的sql检索 @Testpu...

bboss ⋅ 今天 ⋅ 0

informix数据库在linux中的安装以及用java/c/c++访问

一、安装前准备 安装JDK(略) 到IBM官网上下载informix软件:iif.12.10.FC9DE.linux-x86_64.tar放在某个大家都可以访问的目录比如:/mypkg,并解压到该目录下。 我也放到了百度云和天翼云上...

wangxuwei ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部