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的更多相关文章

  1. 2. web前端开发分享-css,js进阶篇

    一,css进阶篇: 等css哪些事儿看了两三遍之后,需要对看过的知识综合应用,这时候需要大量的实践经验, 简单的想法:把qq首页全屏另存为jpg然后通过ps工具切图结合css转换成html,有无从下手 ...

  2. 【 D3.js 进阶系列 】 进阶总结

    进阶系列的文章从去年10月开始写的,晃眼又是4个多月了,想在年前总结一下. 首先恭祝大家新年快乐.今年是羊年吧.前段时间和朋友聊天,聊到十二生肖里为什么没猫,我张口就道:不是因为十二生肖开会的时候猫迟 ...

  3. web前端开发分享-css,js进阶篇

    一,css进阶篇: 等css哪些事儿看了两三遍之后,需要对看过的知识综合应用,这时候需要大量的实践 经验, 简单的想法:把qq首页全屏另存为jpg然后通过ps工具切图结合css转换成html,有无 从 ...

  4. JS 进阶知识点及常考面试题

    将会学习到一些原理相关的知识,不会解释涉及到的知识点的作用及用法,如果大家对于这些内容还不怎么熟悉,推荐先去学习相关的知识点内容再来学习原理知识. 手写 call.apply 及 bind 函数 涉及 ...

  5. js进阶---12-11、jquery如何给动态创建出来的元素绑定事件

    js进阶---12-11.jquery如何给动态创建出来的元素绑定事件 一.总结 一句话总结:通过事件委托的方式,通过on方法 1.on方法在事件绑定的时候,data方式带额外参数时,字符串参数和其它 ...

  6. js进阶---12-12、jquery事件委托怎么使用

    js进阶---12-12.jquery事件委托怎么使用 一.总结 一句话总结:通过on方法(事件委托),给要绑定事件的元素的祖先绑定事件,从而达到效果. 1.事件委托是什么? 通过事件冒泡,让子元素绑 ...

  7. js进阶---12-10、jquery绑定事件和解绑事件是什么

    js进阶---12-10.jquery绑定事件和解绑事件是什么 一.总结 一句话总结:on和off. 1.jquery如何给元素绑定事件? on方法 22 $('#btn1').on('click', ...

  8. Node.js进阶篇-koa、钩子函数、websocket、嵌入式开发

    代码地址如下:http://www.demodashi.com/demo/12932.html 一.简介     koa是由Express原班人马打造的,致力于成为一个更小.更富有表现力.更健壮的We ...

  9. 【 D3.js 进阶系列 — 4.0 】 绘制箭头

    转自:http://www.ourd3js.com/wordpress/?p=660 [ D3.js 进阶系列 — 4.0 ] 绘制箭头 发表于2014/12/08 在 SVG 绘制区域中作图,在绘制 ...

  10. js进阶 14 jquery的ajax有哪些函数和事件（多练）

    js进阶 14 jquery的ajax有哪些函数和事件(多练) 一.总结 一句话总结:常用:load.ajax.post.get.getScript().getJSON().表单序列化,ajax事件这 ...

随机推荐

  1. MyBatis入门学习教程-调用存储过程

    一.提出需求 查询得到男性或女性的数量, 如果传入的是0就女性否则是男性 二.准备数据库表和存储过程 create table p_user( id int primary key auto_incr ...

  2. Spring事务管理(转)

    Spring是SSH中的管理员,负责管理其它框架,协调各个部分的工作.今天一起学习一下Spring的事务管理.Spring的事务管理分为声明式跟编程式.声明式就是在Spring的配置文件中进行相关配置 ...

  3. Netty服务端与客户端（源码一）

    首先,整理NIO进行服务端开发的步骤: (1)创建ServerSocketChannel,配置它为非阻塞模式. (2)绑定监听,配置TCP参数,backlog的大小. (3)创建一个独立的I/O线程, ...

  4. OAF_开发系列27_实现OAF中Java类型并发程式开发调用XML Publisher（案例）

    20150814 Created By BaoXinjian

  5. mongodb高级查询

    前几篇,老玩家绕道即可,新手晚上闲着也是蛋疼,不如把命令敲一边,这样你就会对MongoDB有一定的掌握啦.如果没有安装MongoDB去看我的上一篇博客  MongoDB下载安装与简单增删改查 前奏:启 ...

  6. java 实现WebService 以及不同的调用方式

    webservice:    就是应用程序之间跨语言的调用    wwww.webxml.com.cn    1.xml    2.    wsdl: webservice description l ...

  7. Dimmer: 通过移动鼠标来改变 LED 的亮度

    原文地址 - https://www.arduino.cc/en/Tutorial/Dimmer 调光器 本例展示了如何通过个人电脑发送数据到 Arduino / Genuino 开发板来控制一个LE ...

  8. c#摄像头编程实例 （转）

    c#摄像头编程实例 摄像头编程 安装摄像头后,一般可以找到一个avicap32.dll文件 这是一个关于设想头的类 using  system;using  System.Runtime.Intero ...

  9. ant 介绍 http://blog.csdn.net/sunjavaduke/archive/2007/03/08/1523819.aspx

    转自: 本内容包含了Ant的历史简要介绍,Ant的功能以及Ant框架的介绍,并对下载安装使用Ant进行了示例介绍,同时通过一个Java程序讲解了Ant的基本使用方法. 1.       Ant简介:这 ...

  10. Nopcommerce 二次开发0

    Nopcommerce  是国外的一个高质量的开源b2c网站系统,基于EntityFramework6.0和MVC5.0,使用Razor模板引擎,有很强的插件机制,包括支付配送功能都是通过插件来实现的 ...