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. Hadoop学习笔记【Hadoop家族成员概述】

    Hadoop家族成员概述 一.Hadoop简介 1.1 什么是Hadoop? Hadoop是一个分布式系统基础架构,由Apache基金会所开发,目前Yahoo!是其最重要的贡献者. Hadoop实现了 ...

  2. 通过bootstrap来学习less

    很早之前就听说过less了,但是一直拖着没去学习.最近抽空看了less,其实语法很简单,看一遍基本就知道怎么用了.平时自己写页面用less的话,感觉是方便了些,但是难道less的好处就只是这样? 刚好 ...

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

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

  4. javascript学习目录

    类型系统 [1]基本数据类型 [2]引用类型中的对象Object [3]引用类型中的数组Array [4]引用类型中的时间Date [5]函数Function [6]正则表达式RegExp [7]包装 ...

  5. Mina、Netty、Twisted一起学（九）：异步IO和回调函数

    用过JavaScript或者jQuery的同学都知道,JavaScript特别是jQuery中存在大量的回调函数,例如Ajax.jQuery的动画等. $.get(url, function() { ...

  6. 【目录】C#搭建足球赛事资料库与预测平台与彩票数据分析目录

    本博客所有文章分类的总目录链接:本博客博文总目录-实时更新 1.彩票数据分析与预测 6.智彩足球技术研究团队成员介绍 5.关于组建“智彩足球技术研究团队”的说明 4.为什么选择玩足球彩票以及玩彩票的心 ...

  7. Android自定义EditText去除边框并添加下划线

    <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android=&quo ...

  8. 如何删除回滚段状态为NEEDS RECOVERY的undo表空间

    环境:RHEL 6.4 + Oracle 11.2.0.4 背景:备份恢复的测试库在一次不完全恢复后,没有来及做有效的全备,又一次数据库故障导致数据库无法正常open. 只能离线部分数据文件打开数据库 ...

  9. 简单登录实例Login

    本人菜鸟~~学习过程中~~请求老大们指导!!谢谢!!! 从基础学习,坚持下去,每天进步一点点!! 1.首先要实现登录,通俗点总得有个登陆的样子吧,也就是人要有个脸面嘛!说做就做!自己属于菜鸟级别的,所 ...

  10. 在SQL Server 2016里使用查询存储进行性能调优

    作为一个DBA,排除SQL Server问题是我们的职责之一,每个月都有很多人给我们带来各种不能解释却要解决的性能问题. 我就多次听到,以前的SQL Server的性能问题都还好且在正常范围内,但现在 ...