DOM概念简介
<!DOCTYPE html>
<html lang="zh" id="htmlId">
<head id="headId">
<title>BOM基础</title>
<meta charset="utf-8">
<meta name="keywords" content=",,">
<meta name="description" content="">
<style>
</style>
</head>
<body id="bodyId">
<div>
<p>
Dom概述:
什么事DOM?Document Object Model文档对象模型。
它的作用?重构整个HTML文档。你可以添加、移除、改变或重排页面上的项目。
分类:
Core DOM:定义了一套标准的针对 任何结构化 文档的对象。
XML DOM:定义了一套标准的针对 XML 文档的对象。
HTML DOM:定义了一套标准的针对 HTML 文档的对象。
XML简介
expensible markup language:可扩展标记语言
<penson>
<name>
张无忌
</name>
<age>
23
</age>
</penson>
</p>
<p>
DOM树:
结点:文档中的每个成分都是一个节点(包括文本也是节点)。
节点的分类:
整个文档是一个文档节点
每个XML标签是一个元素节点。
每个XML属性是一个属性节点。
包含在XML元素中的文本是文本节点。
注释属于注释节点
节点的属性:
a.nodeName(节点名称)
文档节点的nodeName永远是#document。
元素节点的nodeName是标签名称。
属性节点的nodeName是属性名称。
文本节点的nodeName永远是#text。
b.nodeValue(节点值)
文档节点 nodeValue不可用。
元素节点 nodeValue不可用。
属性节点 nodeValue包含属值。
文本节点 nodeValue包含文本。
c.nodeType(节点类型)
标签节点的类型是1;
属性节点的类型是2;
文本节点的类型是3;
</p>
<p>
节点的关系
只有父子和兄弟关系
parentNode:父节点。
childNodes:所有的字标签。
firstChild:第一个儿子。
lastChild:最后一个儿子。
nextSibling:下一个兄弟节点。
previousSibling:上一个兄弟节点。
</p>
<p>
对节点进行CRUD(Create、Read、Update、Delete)操作
查找节点?
document.documentElement;
.getElementById(); 根据标签的ID拿到此标签节点。
.getElementsByTagName(); 根据标签的名字拿到此标签节点数组。
.getElementsByName(); 适用于表单控件。根据标签的name属性拿到空间的数组。
删除节点?
removeChild();
创建节点?
document.createElement();//创建一个标签节点。
document.createTextNode();//创建一个文本节点。
节点的setAttribute():添加属性节点。
添加节点?
appendChild();//添加子节点
修改或替换节点?
replaceChild();//替换子节点。
</p>
<p>
DOM(Document Object Model)(文档对象模型)是 HTML 和 XML 的应用程序接口(API)。DOM 将把整个页面规划成由节点层级构成的文档。HTML 或 XML 页面的每个部分都是一个节点的衍生物。DOM 通过创建树来表示文档,从而使开发者对文档的内容和结构具有空前的控制力。用 DOM API 可以轻松地删除、添加和替换节点。
BOM(browser object model):使用 BOM,开发者可以移动窗口、改变状态栏中的文本以及执行其他与页面内容不直接相关的动作。使 BOM 独树一帜且又常常令人怀疑的地方在于,它只是 JavaScript 的一个部分,没有任何相关的标准。由于没有相关的 BOM 标准,每种浏览器都有自己的 BOM 实现。有一些事实上的标准,如具有一个窗口对象和一个导航对象,不过每种浏览器可以为这些对象或其他对象定义自己的属性和方法。
BOM和DOM只是从两个不同的角度来看待HTML文件。
Dom技术:
通过JavaScript,你可以重构整个HTML文档。你可以添加,移除,改变或重排页面上的项目。
要改变页面上的某个东西,JavaScript需要访问文档中元素的入口。这个入口,联通各种操作,都是通过文档对象模型来获取的。
Dom可被JavaScript用来读取,改变HTML、XML等文档。
</p>
</div>
</body>
</html>