Javascript——DOM

时间:2022-08-02 07:30:35

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类型。节点信息属性:nodeNamenodeValue。检测节点类型用nodeType

Javascript——DOM

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().