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类型。节点信息属性：nodeName和nodeValue。检测节点类型用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().

相关文章