《JavaScript权威指南》学习笔记 第六天 开始学习DOM了。
昨天学习了window对象的一些方法。window对象主要是针对当前视窗的操作。window对象提供了一些列API来帮助我们了解当前窗口的信息。例如history对象可以让我们获取浏览历史。nvaigator对象能够让我们或者浏览器以及系统的一些信息。location对象能够让我们获得网址栏URL的参数。screen对象能够让我们获得当前用户的屏幕大小等等,以及创建新页面的方法open,销毁页面的方法close。
说了这么这么多,终于到了我们今天的DOM对象。DOM对象是 Document Object Model(文档对象模型)的缩写。下面就跟随着我的学习笔记来轻松愉悦的了解下DOM吧。
正文
一、 DOM架构
犀牛书这里讲的很不错,还给出了配图。图片来自网络。
这里一个小方框就是一个节点(想象一下大树的分叉点,就能理解这个名称了),也就是Node对象。
还需要上犀牛书中的另外一张节点类型图。
代表HTML元素的是Element节点,代表文本的Text节点,Document和Element是这里面比较重要的两个DOM类。其中Document代表一个HTML或者XML文档,Element类型代表该文档中的一个元素。要区分HTML Document、HTML Element 与Document 、Element的区别。其中前者指的是HTML中的文档与元素。而后者指的是可能是HTML也可能是XML。
说的不那么绕的话的就是前者范围小,特制HTML文档与元素,后者范围大,可以代表HTML也可以代表xml,累死我了,好绕。
二、Document 与 Element 的操作。
重申一下,Document指的是文档对象,而Element指的是当前文档对象中的元素。而所谓的操作精简为四个字:增删改查。
查
选取Element(元素)
选取元素可以通过四种方式。通过ID选择
通过标签名字选择
通过制定的name选择(很少用)
通过css类
css 选择器
下面这个代码非常不错,十分适合做项目的时候直接拿去用。
通过id选择对象
//通过ids获取对象
function getElements(){
var elements = {};
for(var i=0;i<arguments.length;i++){
var id = arguments[i];
var ele = document.getElementById(id);
if(ele == null){
Error("No Elements with id"+id);
}
elements[id] = ele;
}return elements;
}
通过名字来选取元素.
这个因为不经常用到就跳过去了:document.getElementsByName();通过标签名选择对象。
document.getElementsByTagsName();
当然也有一些快捷的元素选择方式,如
document.forms.roverliang;
//这里的roverliang是一个表单的id。
通过css类选取元素。
document.getElementsByClassName();
对于IE8及之前版本会有兼容问题。
通过css类选取数据
实用的就这个了吧。用法和css3的选择器是一样的。document.querySelectorAll();
今天夜已经深了,明天继续看看文档结构的遍历。也就是nodeList遍历,学学爬爬文档树。
《JavaScript权威指南》学习笔记 第六天 开始学习DOM了。的更多相关文章
- Javascript权威指南阅读笔记--第3章类型、值和变量(1)
之前一直有个想法,好好读完JS权威指南,便于自己对于JS有个较为全面的了解.毕竟本人非计算机专业出生,虽然做着相关行业的工作,但总觉得对于基础的掌握并没有相关专业学者扎实,正好因为辞职待业等原因,还是 ...
- JavaScript权威指南读书笔记
JavaScript 1.变量 变量是一个表示值的符号,是一个名字,他的本质是值: var x; //----声明一个变量: 值通过等号“=”赋给变量,x = 16; 对象是名/值对的集合,或字符串到 ...
- 读《JavaScript权威指南》笔记(五)
1.getComputedStyle()方法的返回值是一个CSSStyleDeclaration对象,它代表了应用在指定元素(或伪对象)上的所有样式. 2.clip style="clip: ...
- 读《JavaScript权威指南》笔记(四)--数组、函数
一.数组 1.数组是值的有序集合.每个值叫做一个元素,而每个元素在数组中有一个位置,以数字表示,称为索引.JavaScript数组是无类型的:数组元素可以是任意类型,并且同一个数组中的不同元素也可能有 ...
- 读《JavaScript权威指南》笔记(三)--对象
1.对象介绍 对象是JavaScript的基本数据类型.对象是一种复合值:它将很多值(原始值或者其他对象)聚合在一起,可通过名字访问这些值.对象也可看做是属性的无序集合,每个属性都是一个名/值对.属性 ...
- JavaScript权威指南读书笔记【第一章】
第一章 JavaScript概述 前端三大技能: HTML: 描述网页内容 CSS: 描述网页样式 JavaScript: 描述网页行为 特点:动态.弱类型.适合面向对象和函数式编程的风格 语法源自J ...
- 读《JavaScript权威指南》笔记(二)
1.加号运算和比较运算符的区别 对于数字和字符串操作符来说,加号运算符和比较运算符的行为都有所不同,前者更偏爱字符串,如果它的其中一个操作数是字符串的话,则进行字符串连接操作.而比较运算符则更偏爱数字 ...
- 读《JavaScript权威指南》笔记(一)
1.Number() parseInt() parseFloat() 如果通过Number()转换函数传入一个字符串,它会试图将其转换为一个整数或浮点数直接量,这个方法只能基于十进制数进行转换,并 ...
- Javascript权威指南——读书笔记
一.JavaScript核心语法 1.字符串中接受RegExp参数的方法 (1)text.search(pattern)返回首次匹配成功的位置 (2)text.match(pattern)返回匹配组成 ...
随机推荐
- ASP.NET文件上传大小的限制解决方案
我们大家都知道ASP.NET为我们提供了文件上传服务器控件FileUpload,默认情况下可上传的最大文件为4M,如果要改变可上传文件大小限制,那么我们可以在web.config中的httpRunti ...
- 文本 To 音频
文本 To 音频 TextToSpeech介绍 TextToSpeech,简称 TTS,是Android 1.6版本中比较重要的新功能.将所指定的文本转成不同语言音频输出.它可以方便的嵌入到游戏或 ...
- JavaScript学习笔记-随滚轮匀速滑动的浮动广告窗动画
<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> ...
- LINUX 配置SVN
1. 安装SVN yum -y install subversion 2. 创建版本库目录 mkdir /root/svn/ svnserve -d -r /root/svn/ 3. 创建版本库 ...
- div两栏等高布局
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- Java GC收集器配置说明
根据Java GC收集器具体分类,我们可以看出JVM根据需求不同提供了三种选择:串行收集器.并行收集器.并发收集器. 串行收集器只适用于小数据量的情况,我们主要了解一下并行收集器和并发收集器.默认情况 ...
- zabbix自动发现功能实现批量web url监控
需求: 现在有大量url需要监控,形式如http://www.baidu.com ,要求url状态不为200即报警. 需求详细分析: 大量的url,且url经常变化,现在监控用的是zabbix,如果手 ...
- iOS开发小技巧--适当的清空模型中的某个数据,达到自己的需求,记得最后将数据还原(百思项目评论页面处理最热评论)
一.项目需求,显示所有贴的时候,需要显示最热评论,但是点击进入相应帖子后,最热评论的label不要显示,如图: 解决方案 -- 该暂时保存的暂时保存,该清空的清空 ...
- Notes on 'Efficient Graph-Based Image Segmentation'
Notes on Efficient Graph-Based Image Segmentation 算法的目标 按照一种确定的标准, 将图片分割成细粒度的语义区域, 即Super pixel. 算法步 ...
- Spring Assert 断言
Assert(断言)的初步理解构思 Web 应用在接受表单提交的数据后都需要对其进行合法性检查,如果表单数据不合法,请求将被驳回.类似的,当我们在编写类的方法时,也常常需要对方法入参进行合 法性检查, ...