AJAX基础（三）——DOM基础及DOM操纵HTML

时间 2019-11-10

标签 ajax 基础 dom 操纵 html 栏目 Ajax 繁體版

原文原文链接

DOM的概念

DOM= Document Object Model，文档对象模型，DOM能够以一种独立于平台和语言的方式访问和修改一个文档的内容和结构。换句话说，这是表示和处理一个HTML或XML文档的经常使用方法。有一点 DOM很重要，DOM的设计是以对象管理组织（OMG）的规约为基础的，所以能够用于任何编程语言。最初人们把它认为是一种让JavaScript在浏览器间可移植的方法，不过DOM的应用已经远远超出这个范围。Dom技术使得用户页面能够动态地变化，如能够动态地显示或隐藏一个元素，改变它们的属性，增长一个元素等，Dom技术使得页面的交互性大大地加强。 javascript

Javascript中DOM实现可使得咱们在AJAX中经过Javascript代码对HTML和XML数据进行DOM方式的操做，从而作到页面的动态修改更新和数据的提取处理。 html

DOM对象树

DOM将每个HTML或XML的文档都看待成内存中的一个对象树。 java

浏览器中的一个页面对应一个HTML文档，所以有一颗与之对应的HTML的DOM树。 node

浏览器中一个页面可能处理不少个XML的文档，所以可能有不少颗XML的DOM树。编程

DOM对象树种的经常使用节点

在DOM树种文档内容对应了不少不一样类型的节点，他们都是一个NODE对象。 api

DOM 代码中最经常使用的任务就是在页面的DOM树中导航。比方说，能够经过其“id”属性定位一个form，而后开始处理那个form中内嵌的元素和文本。其中可能包含文字说明、输入字段的标签、真正的input 元素，以及其余HTML 元素（如img）和连接（a元素）。若是元素和文本是彻底不一样的类型，就必须为每种类型编写彻底不一样的代码。若是使用一种通用节点类型状况就不一样了。这时候只须要从一个节点移动到另外一个节点，只有当须要对元素或文本做某种特殊处理时才须要考虑节点的类型。若是仅仅在DOM树中移动，就能够与其余节点类型同样用一样的操做移动到元素的父节点或者子节点。只有当须要某种节点类型的特殊性质时，如元素的属性，才须要对节点类型做专门处理。将DOM树中的全部对象都看做节点能够简化操做。记住这一点以后，接下来咱们将具体看看DOM节点构造应该提供什么，首先从属性和方法开始。数组

NODE对象有一个nodeType的属性可用于判断节点类型：浏览器

接口 app	nodeType常量（IE不支持） dom	nodeType值	备注
Element	Node.ELEMENT_NODE	1	元素节点（标签）
Atrr	Node.ATTRIBUTE_NODE	2	属性节点（属性）
Text	Node.TEXT_NODE	3	文本节点（文本）
Comment	Node.COMMENT_NODE	8	注释节点（注释）
Document	Node.DOCUMENT_NODE	9	文本根节点

元素节点是文档中最多见的节点，HTML或XML文档中的标签<body>,<input>,<div>都对应DOM树中的元素节点。

属性节点表示的是一个元素节点上定义的某个属性，例如<input>中定义的value属性就对应DOM树种的一个属性节点。

文本节点表示文档中的一段文字信息，例如HTML文档中定义<div>abcdef</div>其中的“abcdef”就是一个文本节点。

注释节点对应文档中的注释信息，例如<!—Comment Message-->的内容就是一个注释节点。

根节点顾名思义，表示的整个文档的根，可是须要注意它不对应文档中的任何内容。

在Javascript中有一个特殊的对象document，它能够表示当前HTML页面的根节点。

DOM对象树不一样节点的名值对比：

节点	nodeName（节点名）	nodeValue(节点值)	nodeType值
Element元素节点	对应标签名的大写形式，如：HTML	Null	1
Attr属性节点	文档中定义的属性名，如：type	文档中定义的属性值如：button	2
Text文本节点	#text	文本内容，如：133	3
Comment注释节点	#comment	注释内容，如：comment	8
Document根节点	#document	Null	9

根节点的属性和方法

属性	描述
documentElement	表示文档的根元素节点在HTML文档中，它表示<html>这个标签表明的元素节点
方法	描述
getElementById()	返回文档中具备制定id属性的Element节点方法参数为节点的id的属性值
getElementByTagName（）	以数组方式返回文档中具备制定标签的Element节点，其书序为在文档中出现的顺序标签名指的是像body，table这样的HTML标签方法参数为标签名称。
createElement()	用指定的标记名建立新的Element节点对象方法参数为节点标签的名字
createTextNode()	用指定的文本建立新的文本节点对象方法参数为文本信息
createAttibute()	用指定名字建立新的Attr节点对象方法参数为属性的名字
createComment()	用指定的字符串建立新的Comment节点对象方法参数为注释信息

<script type="text/javascript" >

            function testapi(){
                //得到根节点元素
                var htmlrootElement=document.documentElement;
                //得到指定的元素节点
                var divNode=document.getElementById("div1");
                //得到整个页面全部的div元素节点
                var divNodes=document.getElementsByTagName("div");
                //建立元素节点
                var newdivNode=document.createElement("div");
                //建立文本节点
                var newTextNode=document.createTextNode("aaaa");
            }
</script>

元素节点的属性和方法

属性	描述
tagName	元素节点对应的标签的大写名字，例<table>元素的标签名字为Table
方法	描述
getElementsByTabName()	以数组方式返回当前与元素节点的子孙节点中具备指定标签名的全部元素节点，其准许为在文档中出现的顺序方法参数为节点的标签名
getAttribute()	以字符串形式返回指定属性的值方法参数为属性名称
getAttributeNode()	以属性节点对象的形式返回指定属性的值方法参数为属性名称
setAttribute()	设置指定的属性的值，若是该属性不存在则添加新属性方法的第一个参数为属性的名称方法的第二个参数为属性的值
setAttributeNode()	把指定的属性节点添加到该元素的属性列表中方法的参数为属性节点对象
has Attribute()	若是该元素具备制定名字的属性，则返回true
removeAttribute()	从元素节点中删除指定的属性方法参数为属性的名称
removeAttributeNode()	从元素节点的属性列表中删除指定的Attr节点方法参数为属性的名称

//根据标签名得到元素节点元素节点的操做：

var divNode2=document.getElementById("div2");
                var divNodes2=divNode2.getElementsByTagName("div");             
                //操做属性
                var inputtext=document.getElementById("inputtext");
                var flag=inputtext.hasAttribute("value");
                inputtext.setAttribute("value", "aaacede");
                var textValue=inputtext.getAttribute("value");
                flag=inputtext.hasAttribute("value"); 
                inputtext.removeAttribute("value");
                alert("完成");

另外一种操做元素属性的方法：

//另外一种操做元素属性的方法 
inputtext.value="另外一种操做元素属性的方法";

两种方法的差别（以onclick事件为例）：

当咱们操纵按钮单击事件时，第一种方式不显示结果，而第二种方式才显示

var clic=document.getElementById("clic"); 
//不显示结果，操纵无效
clic.setAttribute("onclick", function(){alert("不显示")});
//显示结果，操纵有效
 clic.onclick=function(){alert("显示")};

属性节点的属性和方法（由于不多用，因此这里就不举例了）：

属性	描述
Name	属性名
Value	属性值

全部节点（Node）都拥有的属性和方法

属性	描述
attributes	表示该节点的全部属性节点对象的数组
nodeType	表明节点的类型
nodeName	返回节点的名字
nodeValue	表明节点的内容
childNodes	当前节点的全部子节点数组，若是没有子节点，则返回空数组
parentNode	返回当前节点的父节点，若是没有父节点，则返回null
firstChild	返回当前节点的一个子节点，若是没有子节点，则返回null
lastChild	返回当前节点的最后一个子节点，若是没有子节点，则返回null
nextSibling	返回当前节点的下一个兄弟节点。若是没有这样的节点，则返回null
previousSibling	返回当前节点的上一个兄弟节点，若是没有这样的节点则返回null
方法	描述
hasChildNodes()	若是当前节点拥有子节点，则返回true
appendChild()	给当前节点增长一个子节点，增长的子节点位于当前节点的全部子节点的末尾方法参数为Node对象
InsertBefore()	插入一个节点，为止在当前节点的指定子节点以前，若是指定子节点不存在，则执行效果和appendChild方法相同。若是插入的已是当前节点的子节点，则将这个节点移动到指定节点前方法第一个参数是要插入的节点。方法的第二个参数是当前节点的指定子节点，新插入的节点位于这个节点以前。
removeChild()	从文档树中删除当前节点的指定子节点，同时返回指定的子节点。方法的参数是呀哦删除的子节点。
replaceChild()	用另外一个节点替换当前节点的一个子节点，而且返回指定的子节点。方法第二个参数是新的子节点。方法第二个参数是被替换的子节点。
cloneNode()	复制当前节点，或者复制当前节点以及它的全部子孙节点。方法参数为true或false。True表示递归的复制全部子孙节点，false表示只复制当前节点。

IE与FireFox的DOM对象树差别

1.　IE会把一些没有在文档中定义的属性也加入DOM树。

2.　IE不会把title中的文本内容加入DOM树。

3.　IR会把换行缩进这样的信息过滤掉，FireFox则会认为是有用的文本内容，并做为文本节点的一部分加入DOM树。

4.　IE不会把script标签中的内容加入DOM树，FireFox将里面的内容加入DOM树。

AJAX,DOM 和javascript的关系

DOM可以为javascript引擎公开网页。经过DOM，能够采用编程的方式操做文档的结构。Web页面的DOM表示是一个树状结构，由元素或点组成。节点能够包含不少子节点。javascript经过全局变量document公开当前Web叶梦得根节点，这个变量是全部DOM操做的起点。DOM使用容器的属性来作索引，而不是使用数字作索引。DOM中元素的关系能够看做是HTML清单的镜像。这种关系能够是双向的，修改DOM将改变HTML标记，随之会反映在页面的现实上。

用一个简单一点的关系表示就是：

DOM--数据--》Jquery--利用--》Ajax--请求--》后台
后台--回应Ajax请求--》Jquery--操做dom变现请求--》dom