第十章 DOM

最新推荐文章于 2023-09-01 22:57:51 发布

转载最新推荐文章于 2023-09-01 22:57:51 发布 · 76 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/zhangbaihua/p/5598321.html

本文详细介绍了DOM（文档对象模型）的概念及其在HTML和XML文档中的应用。包括DOM的节点层次结构、Node类型及其属性方法、如何使用JavaScript操作DOM节点，以及Document、Element和Text类型的特性和用途。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

DOM

DOM（文档对象模型）：针对HTML和XML文档的一个API（应用程序编程接口）。DOM描绘了一个层次化的节点树，允许开发人员添加，移除和修改页面的某一部分。

节点层次

节点：节点分为几种不同的类型，每种类型分别表示文档中不同的信息及标记。每个节点都拥有各自的特短吧，数据，方法。

文档元素：文档元素是文档最外层的元素，文档中的其他所有元素都被包裹在文档元素中。在HTML中，文档元素始终是<html>元素。

HTML元素：元素节点。

特性： 特性节点。

文档类型：文档类型节点。

注释： 注释节点。

Node类型

JS中的所有类型节点都继承自Node类型，所有节点类型共享相同的基本属性和方法。

nodeName: 对于元素节点，nodeName中保存的都是元素的标签名，nodeValue的值始终为null.

nodeValue: 元素的值。

childNodes: 保存着一个nodeList对象。nodeList是一种类数组对象，用于保存一组有序的节点，可以通过位置来访问这些节点。有length属性。

基于DOM结构动态执行查询的结果，DOM结构的变化能够自动反映在NodeList对象中。

parentNode：指向childnode的父节点。

previousSibling: 节点的前一个同胞节点。

nextSibling: 节点的下一个同胞节点。

操作节点

插入节点

appendChild(): 向childNodes列表末尾添加一个节点。

insertBefore(): 接受俩个参数：要插入的节点，参照的节点。被插入的节点变成参照节点的前一个同胞节点。

删除节点

replaceChild(): 接受俩个参数：要插入的节点，要替换的节点。

removeChild(): 接受一个参数：移除的节点。

cloneNode(): 复制一个调用这个方法的节点的一个副本。接受一个布尔值参数：表示是否执行深复制。true时，复制整个子节点树（只复制特性。子节点）。false时，只复制本身。

normalize(): 处理文档树种的文本节点。找到空文本阶段就按删除它。找到相邻的文本节点，将他们合并成为一个文本节点。

Document类型

document对象是HTMLDocumen（继承自Document）的一个实例.表示整个HTML页面。document对象是window对象的一个属性。

文档的子节点

documentElement： 始终指向HTML页面中的<HTML>元素。

文档信息：

document.title: 包含<title>元素中的文本。

URL: 包含页面完成的URL(地址栏中显示的URL)。

domain: 包含页面的域名

referrer: 保存着链接到当前页面的那个页面的URL。

var url = document.url;
//取得 完整的URL

var domain = document.domain;
//取得域名

var referrer = document.refeffer;
//取得来源页面的URL

Element类型

nodetype： 1;

nodeName: 元素的标签名;

nodeValue: null。

parentNode: 可能是document或Element;

element类型提供对元素标签名，子节点及特性的访问。

html元素由HTMLElement类型表示，不是直接通过这个类型，也是通过它的子类型来表示。

操作特性的DOM方法有三个：

取得特性：getAttribute(), 特性的名称不区分大小写。

设置特性：setAttribute(), 接受2个参数：要设置的特性名，值。如果特性已存在，会已指定的值替换现有的值。即可以操作HTML特性，也可以操作自定义特性。

移除特性：removeAttribute();

Text类型

nodetype： 3;

nodeName: #text;

nodeValue: 节点所包含的文本。

parentNode: 是一个Element;

不支持子节点。

length属性：保存字符串的数目。

文本方法：

normalize: 合并文本节点，如果在一个包含2个或多个文本节点的父元素上调用，将所有文本节点成一个节点。

var element = document.createElement("div");
element.className = "message";
var textNode = document.createTextNode("Hello World!");
element.appendChild(textNode);

var anotherNode = document.createTextNode("Yippee!");
element.appendChild(anotherNode);
document.body.appendChild(element);
console.log(element.childNodes.length);
// 2  

element.normalize();
console.log(element.childNodes.length);
// 1

splitText(): 分割文本节点，将一个文本节点分为俩个，按照指定位置分割。 nodeValue值。原来的文本节点将包含从开始到指定位置之前的内容，新文本节点包含剩下的文本。这个方法会返回一个新文本节点。

var newNode = element.firstChild.splitText(5);
console.log(element.firstChild.nodeValue);
 console.log(newNode);
 // Hello
 // " World!Yippee!"

转载于:https://www.cnblogs.com/zhangbaihua/p/5598321.html