9.8 js进阶总结3
DOM文档对象模型
DOM（document object model）文档对象模型，它定义了操作文档对象的接口。
DOM 把一份html文档表示为一棵家谱树，使用parent（父），child（子），sibling（兄弟）等记号来表明家庭成员之间的关系。
一、节点（node）
节点一词来自于网络理论，这代表着网络中的一个个的连接点，网络是由节点构成。
对于html文档也是一样，文档是由节点构成的集合。
1、元素节点
元素节点如<body> <p> <div> 之类的元素，这些元素在文档中的布局形成了文档的结构。
2、文本节点
文本节点指的是元素节点中的内容，但并非所有的元素节点都包含有文本节点。
3、属性节点
元素都或多或少有一些属性，属性的作用是对元素作出更具体的描述。属性节点总是被包含在元素节点当中。
二、获取文档对象
1、querySelector()
HTML5新加入的方法，通过传入合法的CSS选择器，即可获取符合条件的第一个元素
例：document.querySelector("#test"); //返回id为test的首个div
2、querySelectorAll()
HTML5新加入的方法，通过传入合法的CSS选择器，即可获取所有符合条件的元素，返回对象数组
例：document.querySelectorAll("div.foo"); //返回所有带foo类样式的div元素对象
注意：使用这上面两个方法无法查找带伪类状态的元素，比如querySelector(':hover')不会得到其结果。
3、getElementById()
这个方法返回一个与给定id属性值的元素节点相关对应的对象。
例：document.getElementById('box');
4、getElementsByIdTagName()
这个方法返回一个对象数组。每个对象分别对应着文档里给定标签的一个元素。
例：document.getElementByTagName('li');
5、getElementsByName()
通过name获取一个对象数组
三、间接引用节点（扩展）
除了可以直接引用节点，还可以通过节点间的关系来引用相对节点。
1、引用子节点
每个节点都有一个childNodes集合属性，类型是数组对象，表示该节点的所有子节点的集合。这些子节点按照其在文档中出现的顺序排列，因此可以通过索引来依次访问各个子节点。
例：
document.childNodes[1]; //引用文档的根节点
document.childNodes[0].childNodes[0] //引用<head>节点
document.childNodes[0].childNodes[1] //引用<body>节点
除了使用childNodes属性，还有两个属性可以用于引用子节点，分别是：
element.firstChild;
element.lastChild;
它们分别表示第一个子节点和最后一个子节点。
2、引用父节点
html的节点层次是一个树状结构，除了根节点外，每个节点都仅有一个父节点，可以有parentNode属性来引用
element.parent.Node; //引用父节点
3、引用兄弟节点
属于同一个文档层次的节点称为兄弟节点，有两个属性可以用于兄弟节点间引用，分别是：
element.nextSibling; //引用下一个兄弟节点
element.previous.Sibling; //引用上一个兄弟节点
四、获取节点信息（扩展）
在获得一个节点的引用后，有一些方法可以获得该节点的信息。
1、nodeName 获取节点名称
语法： Node.nodeName;
不同的类型的节点，nodeName的返回值有所差异：
元素节点：返回标记名称；
属性节点：返回属性名称；
文本节点：返回文本 #text
2、nodeType 获取节点类型
语法：Node.nodeType;
元素节点：返回 1
属性节点：返回 2
文本节点：返回 3
3、nodeValue 获取节点的值
语法：Node.nodeValue;
元素节点：返回null
属性节点：返回节点值
文本节点：返回文本内容
五、处理属性节点
1、get.Attribute 获取节点属性值
object.getAttribute(attribute)
例：
var a = document.getElementByTagName('a');
for(var i = 0; i<a.length; i++){
alert(a[i].get.Attribute('title'));
}
2、set.Attribute() 设置节点属性值
object.setAttribute(attribute, value)
例：
var link = document.getElementById('link');
link.setAttribute('title', '链接提示信息');
六、处理文本节点
1、node.innerHTML
获取该节点下的包含HTML标签的文本内容
例：
var body = document.querySelector('body');
alert(html.innerHTML);
2、node.textContent
获取该节点下的纯文本内容
例：
var body = document.querySelector('body');
alert(html.textContent);
七、因浏览器而异的空白节点（扩展）
IE浏览器和Firefox浏览器对空白节点的处理不同，IE浏览器会忽略这些节点，而Firefox浏览器则认可这些节点。
处理方法：
1、避免在文档中出现文本节点
function clearWhitespace(element){
for(var i = 0; i<element.childNodes.length; i++){
var node = element.childNodes[i];
//判断是否是空白节点，如果是则删除该节点
if(node.nodeType == 3 && !^S/.test(node.nodeValue){
node.parentNode.removeChild(node);
}
}
}
DOM总结：
一份文档就是一棵树；
节点分为不同的类型，分别是：元素节点，属性节点，文本节点；
每个节点都是一个对象；
9.8 js进阶总结3的更多相关文章
- 2. web前端开发分享-css,js进阶篇
一,css进阶篇: 等css哪些事儿看了两三遍之后,需要对看过的知识综合应用,这时候需要大量的实践经验, 简单的想法:把qq首页全屏另存为jpg然后通过ps工具切图结合css转换成html,有无从下手 ...
- 【 D3.js 进阶系列 】 进阶总结
进阶系列的文章从去年10月开始写的,晃眼又是4个多月了,想在年前总结一下. 首先恭祝大家新年快乐.今年是羊年吧.前段时间和朋友聊天,聊到十二生肖里为什么没猫,我张口就道:不是因为十二生肖开会的时候猫迟 ...
- web前端开发分享-css,js进阶篇
一,css进阶篇: 等css哪些事儿看了两三遍之后,需要对看过的知识综合应用,这时候需要大量的实践 经验, 简单的想法:把qq首页全屏另存为jpg然后通过ps工具切图结合css转换成html,有无 从 ...
- JS 进阶知识点及常考面试题
将会学习到一些原理相关的知识,不会解释涉及到的知识点的作用及用法,如果大家对于这些内容还不怎么熟悉,推荐先去学习相关的知识点内容再来学习原理知识. 手写 call.apply 及 bind 函数 涉及 ...
- js进阶---12-11、jquery如何给动态创建出来的元素绑定事件
js进阶---12-11.jquery如何给动态创建出来的元素绑定事件 一.总结 一句话总结:通过事件委托的方式,通过on方法 1.on方法在事件绑定的时候,data方式带额外参数时,字符串参数和其它 ...
- js进阶---12-12、jquery事件委托怎么使用
js进阶---12-12.jquery事件委托怎么使用 一.总结 一句话总结:通过on方法(事件委托),给要绑定事件的元素的祖先绑定事件,从而达到效果. 1.事件委托是什么? 通过事件冒泡,让子元素绑 ...
- js进阶---12-10、jquery绑定事件和解绑事件是什么
js进阶---12-10.jquery绑定事件和解绑事件是什么 一.总结 一句话总结:on和off. 1.jquery如何给元素绑定事件? on方法 22 $('#btn1').on('click', ...
- Node.js进阶篇-koa、钩子函数、websocket、嵌入式开发
代码地址如下:http://www.demodashi.com/demo/12932.html 一.简介 koa是由Express原班人马打造的,致力于成为一个更小.更富有表现力.更健壮的We ...
- 【 D3.js 进阶系列 — 4.0 】 绘制箭头
转自:http://www.ourd3js.com/wordpress/?p=660 [ D3.js 进阶系列 — 4.0 ] 绘制箭头 发表于2014/12/08 在 SVG 绘制区域中作图,在绘制 ...
- js进阶 14 jquery的ajax有哪些函数和事件（多练）
js进阶 14 jquery的ajax有哪些函数和事件(多练) 一.总结 一句话总结:常用:load.ajax.post.get.getScript().getJSON().表单序列化,ajax事件这 ...
随机推荐
- .net网站发布到局域网流程
将.net网站发布到局域网的服务器上,会遇到一些版本问题,下面把发布的流程简单说一下 一:发布网站 1.首先把需要的引用程序集都重新生成一下 2.程序集都重新生成之后,右击网站项目,选择发布选项 3. ...
- 黄聪：远程序桌面登录的.NET（C#）开发
MSTSCLib.dll和MsTscAxWrapper.dll下载:LibDll.rar 远程序桌面登录的.NET开发,可以使用MSTSCLib.dll和MsTscAxWrapper.dll两个转换过 ...
- Redis应用配置项说明
近期整理了下项目中Redis配置参数,以便学习备用~ #指定内存大小,格式为1k 1GB 1M,单位不区分大小写 # 1k => 1000 bytes # 1kb => 1024 byt ...
- weblogic端口号修改和内存参数配置
1 端口号修改 如图 是详细路径 注:我用的weblogic版本是10.3 当刚创建完域的时候这个配置文件下没有Listen-port参数 第一次去控制台修改端口后就这个参数了
- ACM入门
1.给n个数字,将它们重新排序得到一个最大的数字 例子 4123 124 56 90--------------90561241235123 124 56 90 9------------990561 ...
- SQL查询树形结构的所有子节点
如下一张表test:id name pid----------- ---------- -----------1 电器 NULL2 家电 13 冰箱 24 洗衣机 25 电脑 16 笔记本 57 平板 ...
- 64位.net调用32位com服务（c++）
说明: 因64位.net无法调用32位dll,才采用调用进程外com形式. 该项目必须为release时编译才不会报错. 项目调用时,添加引用->com中找到该com服务,添加即可. 部署: 启 ...
- SQL存储过程解密
首先要建立一张表和一个存储过程: SQL_DECODE表: CREATE TABLE [dbo].[SQL_DECODE]( ,) NOT NULL, [SQLTEXT] [nvarchar](max ...
- MySQL的数据库，数据表，数据的操作
数据库简介 概念 什么是数据库?简单来说,数据库就是存储数据的"仓库", 但是,光有数据还不行,还要管理数据的工具,我们称之为数据库管理系统! 数据库系统 = 数据库管理系统 + ...
- 通过Robocopy+DOS 命令+Windows排程实现自动备份(将特定文件/目录备份至自动创建的以年月日命名的目标目录)
1. Software Requirement: 1.1.mirror.bat .mirror_SERVICE_BEGIN.mirror_SERVICE_END.robocopy.exe 1.2. C ...