DOM（Document Object Model）文档对象模型

——DOM可以将任何HTML或XML文档描绘成一个由多层节点构成的结构。

D——doument（文档）。当创建一个网页并把它加载到web

一、节点层次

文档节点是每个文档的根节点。

<html>

    <head>

        <title>Sample</title>

    </head>

    <body>

        <p>Hello world!</p>

    </body>

</html>

在这个例子中，文档节点只有一个子节点，即<html>元素——文档元素。文档元素是文档的最外层元素，文档中其他元素都包含在文档元素中。每个文档只能有一个文档元素。在HTML页面中，文档元素始终是<html>。

每段标记都可以通过树中的一个节点表示。

1、Node类型

Javascript中的所有节点类型都继承自Node类型。节点信息属性：nodeName和nodeValue。检测节点类型用nodeType。

1.1、节点关系

每个节点都有一个childNodes属性，其中保存着一个NodeList对象。它是一种类数组对象，保存一组有序的节点，可以通过位置来访问这些节点。

var firstChild = someNode.childNodes[0];

var secondChild = someNode.childNodes[1];

var count = someNode.childNodes.length;

可以将NodeList对象转换为数组。

var arrayOfNodes = Array.prototype.slice.call(someNode.childNodes,0);

1.2、操作节点

操作节点的方法：appendChild(),用于向childNodes列表的末尾添加一个节点，并返回新增的节点。

若传入到appendChild()中的节点已经是文档的一部分，那结果就是该节点从原来的位置转移到新的位置。

若需要将节点放在childNodes列表中特定的位置，而不是末尾，用insertBefore()，接受两个参数：要插入的节点和作为参照的节点。插入节点后，被插入的节点会变成参照节点的前一个同胞节点（previousSibling），同时被方法返回。

//插入后成为第一个节点

var returnedNode = someNode.insertBefore(newNode,someNode.firstNode);

alert(returnedNode == newNode);         //true

alert(newNode == someNode.firstNode);   //true

repalceChild()方法，接受参数：要插入的节点和要替换的节点。

removeChild()方法，移除节点。

1.3、其他方法

cloneNode()，用于创建嗲用这个方法的节点的一个完全相同的副本。参数是一个布尔类型的。true：执行深复制，复制节点及其整个子节点树；false：执行浅复制，只复制节点本身。

normalize()，处理文档树中的文本节点。

2、Document类型

document对象表示整个HTML页面。Document节点具有下列特征：

  • nodeType值：9；
  • nodeName值：“#document”；
  • nodeValue：null；
  • parentNode：null；
  • ownerDocument：null；
  • 其子节点可能是一个DocumentType（最多一个）、Element（最多一个）、ProcessingInstruction或Comment。

2.1 文档子节点

获取文档子节点：

var html = document.documentElement;

alert(html == document.childNodes[0]); //true

alert(html == document.firstChild);    //true

document对象还有一个body属性，直接指向<body>元素。

var body = document.body;  //取得对<body>的引用

2.2 文档信息

文档标题：document.title；

URL——包含完整的URL（即地址栏中显示的URL）；document.URL

domain——包含页面的域名；document.domian

referrer——保存着链接到当前页面的那个页面的URL；在没有来源页面的话，该属性中可能保存的是空字符串。document.referrer

这三个属性，只有domain是可以设置的。

2.3 查找元素

两个方法：

getElementById()——接受一个参数：要取得元素的ID

getElementsByTagName()——接收一个参数：要取得元素的标签名

getElementsByName()——返回给定name特性的所有元素

3、Element类型

3.1 HTML元素

<div id="myDiv" class="db" titie="Body text" lang="en" dir="ltr"></div>

访问元素中指定的所有信息：

var div = document.getElementById("myDiv");

alert(div.id);

alert(div.className);

alert(div.title);

alert(div.lang);

alert(div.dir);

3.2 取得特性

操作特性的DOM方法：getAttribute(),还可以取得自定义的特性。

setAttribute(),removeAttribute().

Javascript——DOM的更多相关文章

  1. 读书笔记：JavaScript DOM 编程艺术（第二版）

    读完还是能学到很多的基础知识,这里记录下,方便回顾与及时查阅. 内容也有自己的一些补充. JavaScript DOM 编程艺术(第二版) 1.JavaScript简史 JavaScript由Nets ...

  2. javascript DOM 操作 attribute 和 property 的区别

    javascript DOM 操作 attribute 和 property 的区别 在做 URLRedirector 扩展时,注意到在使用 jquery 操作 checkbox 是否勾选时,用 at ...

  3. JavaScript DOM 编程艺术·setInterval与setTimeout的动画实现解析

    先贴上moveElement()函数的大纲,为了方便观看,删了部分代码,完整版粘到文章后面. function moveElement(elementID,final_x,final_y,interv ...

  4. javascript DOM 操作

    在javascript中,经常会需要操作DOM操作,在此记录一下学习到DOM操作的知识. 一.JavaScript DOM 操作 1.1.DOM概念 DOM :Document Object Mode ...

  5. javascript DOM操作之 querySelector,querySelectorAll

    javascript DOM操作之 querySelector,querySelectorAll

  6. javaScript DOM JQuery AJAX

    http://www.cnblogs.com/wupeiqi/articles/5369773.html 一 JavaScript JavaScript是一门编程语言,浏览器内置了JavaScript ...

  7. JavaScript : DOM文档解析详解

    JavaScript DOM  文档解析 1.节点(node):来源于网络理论,代表网络中的一个连接点.网络是由节点构成的集合 <p title=“a gentle reminder”> ...

  8. JavaScript DOM 编程艺术（第2版）读书笔记（1）

    JavaScript 简史 JavaScript 是Netscape公司与Sun公司合作开发的.在 JavaScript 1.0发布时,Netscape Navigator主宰着浏览器市场.微软在推出 ...

  9. javascript DOM操作HTML文档

    文档对象模型(DOM)是W3C为解决浏览器混战时代不同浏览器环境之间的差别而制定的模型标准.W3C将文档对象模型定义为:是一个能让程序和脚本动态 访问和更新文档内容.结构和样式的语言平台.提供了标准的 ...

  10. JavaScript DOM编程艺术学习笔记（一）

    嗯,经过了一周的时间,今天终于将<JavaScript DOM编程艺术(第2版)>这本书看完了,感觉受益匪浅,我和作者及出版社等等都不认识,无意为他们做广告,不过本书确实值得一看,也值得推 ...

随机推荐

  1. Atitit.java c#这类编程语言的设计失败点attilax总结

    Atitit.java c#这类编程语言的设计失败点attilax总结 1. Npe1 2. Api粒度过小而又没有提供最常用模式1 3. checked exception(jeig n jyejy ...

  2. fir.im Weekly - 可能是 iOS 审核最全面的解决方案

    ipv6 被拒绝,后台定位被拒绝--让很多国内 iOS 开发者心力交瘁.这是一份关于 iOS 审核的终极免费方案,作者iOSWang对最近iOS 审核被拒问题给出了比较全面的方案:Solve-App- ...

  3. Enterprise Solution 开发框架功能点

    1. 通用查询模块,可以通过关联数据库表,存储过程或程序代码开发查询,多个查询之间也可构成主从关联查询. 2. 业务异常处理 支持统一的异常处理. 3. 内置一个简单的SQL Server查询分析器, ...

  4. hibernate（四）ID生成策略

    一.ID生成策略配置 1.ID生成方式在xml中配置方式: <?xml version="1.0"?> <!DOCTYPE hibernate-mapping P ...

  5. javascript中Date对象的应用——简易日历的实现

    × 目录 [1]效果 [2]HTML [3]CSS[4]JS 前面的话 简易日历作为javascript中Date对象的常见应用,用途较广泛.本文将详细说明简易日历的实现思路 效果演示 HTML说明 ...

  6. JSP网站开发基础总结《六》

    对于本篇需要总结的内容,量估计有点大,大家好好看哈,绝对全是干货,代码的已经运行测试,不存在问题,大家可以参考学习,下面开始本篇的内容. 1.添加数据到数据库: 如何用户在JSP页面的填写的信息输入到 ...

  7. win10 svchost.exe (LocalSystemNetworkRestricted)大量读写数据

    博主的笔记本联想Y50开机完毕后会不停滴读硬盘/写硬盘,导致开机后一段时间内无法正常使用电脑(硬盘读写高峰期).打开资源监视器发现是"svchost.exe (LocalSystemNetw ...

  8. Spring MVC 学习总结（一）——MVC概要与环境配置

    一.MVC概要 MVC是模型(Model).视图(View).控制器(Controller)的简写,是一种软件设计规范,用一种将业务逻辑.数据.显示分离的方法组织代码,MVC主要作用是降低了视图与业务 ...

  9. 炫！一组单元素实现的 CSS 加载进度提示效果

    之前的文章个大家分享过各种类型的加载效果(Loading Effects),这里再给大家奉献一组基于单个元素实现的 CSS 加载动画集合.这些加载效果都是基于一个 DIV 元素实现的,十分强悍. 温馨 ...

  10. Windows Azure Service Bus (2) 队列(Queue)入门

    <Windows Azure Platform 系列文章目录> Service Bus 队列(Queue) Service Bus的Queue非常适合分布式应用.当使用Service Bu ...