ajax学习（3）(DOM)

最新推荐文章于 2024-08-12 21:44:16 发布

chaow

最新推荐文章于 2024-08-12 21:44:16 发布

阅读量296

点赞数

文章标签： ajax html 文档 attributes string xml

本文链接：https://blog.csdn.net/chaow/article/details/2216776

版权

通过DOM,可以采用编程的方式操作文档的结构，当编写Ajax应用时，这就显得至关重要了。在传统的Web应用中采用来自服务器的新的HTML流来刷新整个页面，而在Ajax中，用户界面的更新主要靠DOM来完成。
DOM被分为不同的部份和不同的版本，DOM的版本主要有如下三种：
(1)Core DOM . Core DOM定义了任意机构文档的标准对象集合。
(2)XML DOM. XML DOM是针对XML的文档对象模型，它与平台无关并定义了访问和操作XML的标准方法。
(3)HTML DOM. HTML DOM是针对HTML的文档对象模型,它定义了针对HTML的一套标准对象和一个标准的访问并操作HTML文档的方法。

操作DOM
<html>
<head>
<tittle> A XHTML pag</tittle>
</head>
<body>
<p id="text">This is a text<p>
<div id="emptydiv"></div>
</body>
</html>
1 寻找DOM节点

var pnode=document.getElementById("text");
在有些情况下，一个元素有很多子结点，要找其中的某一个子结点，不可能为每一个相似的子节点都取一个id，这时可以获取父节点的所有子节点，然后遍历所有子节点以寻找需要的节点。
parentNode方法返回元素的父节点，childNodes方法返回一个节点数组，可以使用javascript对其遍历，代码如下：
var children=empty.childNodes;
for(var i=0;i<children.length;i++){
}

2 创建DOM节点

String insertString=“This is an insert string”;
Node insertText=document.createTextNode(insertString);
Element pNode=document.createElement("p");
pNode.appendChild(insertText);
document.insertBefor(pNode,document.getElementById("text"));

3 删除和更改DOM节点

var changeNode=document.getElementById("text");
changeNode.removeChild(changeNode.getFirstChild);
String insertString="Do you know baidu??";
Node insertText=document.createTextNode(insertString);
changeNode.appendChild(insertText);

4 创建DOM节点属性
方法一：
var attr =document.createAttribute("myAttribute");
attr.value="myValue";
var divNode=document.getElementById("emptydiv");
divNode.setAttributeNode(attr);

方法二：
var divNode=document.getElementById("emptydiv");
divNode.setAttributeNode("myAttribute","myValue");

方法三：
var divNode=document.getElementById("emptydiv");
divNode.myAttribute="myValue";

使用 DOM 节点时需要一些属性和方法，因此我们首先来讨论节点的属性和方法。DOM 节点的属性主要有：

    * nodeName 报告节点的名称（详见下述）。
    * nodeValue 提供节点的 “值”（详见后述）。
    * parentNode 返回节点的父节点。记住，每个元素、属性和文本都有一个父节点。
    * childNodes 是节点的孩子节点列表。对于 HTML，该列表仅对元素有意义，文本节点和属性节点都没有孩子。
    * firstChild 仅仅是 childNodes 列表中第一个节点的快捷方式。
    * lastChild 是另一种快捷方式，表示 childNodes 列表中的最后一个节点。
    * previousSibling 返回当前节点之前的节点。换句话说，它返回当前节点的父节点的 childNodes 列表中位于该节点前面的那个节点（如果感到迷惑，重新读前面一句）。
    * nextSibling 类似于 previousSibling 属性，返回父节点的 childNodes 列表中的下一个节点。
    * attributes 仅用于元素节点，返回元素的属性列表。

所有节点都具有的方法（与节点属性一样，我省略了实际上不适用于多数 HTML DOM 操作的少数方法）：

    * insertBefore(newChild, referenceNode) 将 newChild 节点插入到 referenceNode 之前。记住，应该对 newChild 的目标父节点调用该方法。
    * replaceChild(newChild, oldChild) 用 newChild 节点替换 oldChild 节点。
    * removeChild(oldChild) 从运行该方法的节点中删除 oldChild 节点。
    * appendChild(newChild) 将 newChild 添加到运行该函数的节点之中。newChild 被添加到目标节点孩子列表中的末端。
    * hasChildNodes() 在调用该方法的节点有孩子时则返回 true，否则返回 false。
    * hasAttributes() 在调用该方法的节点有属性时则返回 true，否则返回 false。

chaow

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ajax学习（3）(DOM)

通过DOM,可以采用编程的方式操作文档的结构，当编写Ajax应用时，这就显得至关重要了。在传统的Web应用中采用来自服务器的新的HTML流来刷新整个页面，而在Ajax中，用户界面的更新主要靠DOM来完成。 DOM被分为不同的部份和不同的版本，DOM的版本主要有如下三种：(1)Core DOM . Core DOM定义了任意机构文档的标准对象集合。(2)XML DOM. XML DOM是针对XML
复制链接

扫一扫