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. salesforce 零基础开发入门学习（八）数据分页简单制作

    本篇介绍通过使用VF自带标签和Apex实现简单的数据翻页功能. 代码上来之前首先简单介绍一下本篇用到的主要知识: 1.ApexPages命名空间 此命名空间下的类用于VF的控制. 主要的类包括但不限于 ...

  2. iOS---用LLDB调试，让移动开发更简单（一）

    因文章字数超过限制,所以拆分成了上下篇 LLDB的Xcode默认的调试器,它与LLVM编译器一起,带给我们更丰富的流程控制和数据检测的调试功能.平时用Xcode运行程序,实际走的都是LLDB.熟练使用 ...

  3. 2.Redis常用命令

    setget 匹配Keykeys *keys na*keys na?e 判断指定的Key是否存在exists key 删除一个或者多个keydel key//删除一个del key1 key2//删除 ...

  4. KnockoutJS 3.X API 第四章 数据绑定(5) 控制流component绑定

    本节目录: 一个例子 API 备注1:仅模板式的component 备注2:component虚拟绑定 备注3:传递标记到component绑定 内存管理 一个例子 First instance, w ...

  5. KnockoutJS 3.X API 第四章(14) 绑定语法细节

    data-bind绑定语法 Knockout的声明性绑定系统提供了一种简洁而强大的方法来将数据链接到UI. 绑定到简单的数据属性或使用单个绑定通常是容易和明显的. 对于更复杂的绑定,它有助于更好地了解 ...

  6. 那些年我们写过的T-SQL（上篇）

    在当今这个多种不同数据库混用,各种不同语言不同框架融合的年代(一切为了降低成本并高效的提供服务),知识点多如牛毛.虽然大部分SQL脚本可以使用标准SQL来写,但在实际中,效率就是一切,因而每种不同厂商 ...

  7. ASP.NET中使用DataGrid控件按照条件显示GridView单元格的颜色

    问题描述: 我在做一个关于信用卡管理系统时遇到一个问题:信用卡内金额低于100元时,数字颜色显示为红色,其余显示为绿色 之前,尝试了修改成为模板列以及转换成Reapeater控件,甚至用了Jquery ...

  8. 绘制圆动画--重写view

    /** * @FileName CircleProgressBar.java * @Package com.read.view * @Description TODO * @Author Alpha ...

  9. Android开发之网络

    很多初学Android开发的人员对网络这一点感觉很高大上,现在我就和大家分享一下我的学习心得. 就目前的Android手机来说,可能存在5种网络状态: ----无网络(这种状态可能是因为手机停机,网络 ...

  10. mina2线程详解

    1主要流程 read  in  data: IO读入(IoProcessor)---日志记录.解码.threadPool(IoFilter)---业务逻辑处理(IoHandler) write  ou ...