DOM编程

柔光的暖阳◎ 2021-09-30 18:00 298阅读 0赞

# 什么是DOM？ #

DOM（Document Object Model）文档对象模型，是**语言和平台的中立接口。。**

**允许程序和脚本动态地访问和更新文档的内容**。

# 为什么要使用DOM？ #

Dom技术使得**用户页面可以动态地变化，如可以动态地显示或隐藏一个元素，改变它们的属性，增加一个元素等**，Dom技术使得**页面的交互性大大地增强**。

# HTML的DOM #

HTML的DOM是一个内存对象树，在浏览器中只保存一份，**HTML的DOM修改HTML的内容会直接反应到浏览器中**

![640?wx\_fmt=png][640_wx_fmt_png]

## API ##

### **NODE对象API** ###

**在DOM眼中，HTML是由不同类型的节点组成的，这些节点都属性NODE对象。**

NODE对象有一个**nodeType的属性可用于判断节点类型**

![640?wx\_fmt=png][640_wx_fmt_png 1]

--------------------

**HTML不同类型的节点之间都是有联系的：**

*  **位于一个节点之上的节点是该节点的父节点(parent)**
 *  **一个节点之下的节点是该节点的子节点（children）**
 *  **同一层次，具有相同父节点的节点是兄弟节点（sibling）**
 *  **一个节点的下一个层次的节点集合是节点后代(descendant)**
 *  **父、祖父节点及所有位于节点上面的，都是节点的祖先(ancestor)**

于是乎，**NODE对象也有访问节点的属性和方法**

**属性：**

![640?wx\_fmt=png][640_wx_fmt_png 2]

![640?wx\_fmt=png][640_wx_fmt_png 3]

总的来说就是：**得到节点的信息(节点名字、节点值)以及访问节点的兄弟、父亲**

--------------------

**方法：**

![640?wx\_fmt=png][640_wx_fmt_png 4]

![640?wx\_fmt=png][640_wx_fmt_png 5]

总的来说就是：**添加、替换、删除子节点，判断是否有子节点，克隆子节点**

--------------------

### **document** ###

HTML的DOM中我们提到并**大量使用了document这个Javascirpt的内置对象**，请注意这个对象仅仅可以**表示HTML的根节点**。

**document的属性：**

*  documentElement【可以获取得到`<html>`这个节点】

document方法：

*  **createElement()【创建一个元素节点】**
 *  createComment()【创建注释】
 *  createAttribute()【创建属性节点】
 *  createTextNode()【创建文本节点】
 *  **getElementById()【通过id得到该元素节点】**
 *  **getElementsByTagName()【通过标签名，得到所有标签名的数组】**

### **Element接口** ###

**Element代表的是元素节点，是我们经常用到的一个接口！**

**Element属性：**

*  tagName【返回的是**元素标签的大写名称**】

**Element方法：**

*  **getAttribute(String name)【得到属性的值】**
 *  **setAttribute(String name,String value)【设置属性的名称和值，不存在则创建】**
 *  getElementsByTabName()【**返回该元素节点的子孙节点的数组**】
 *  **removeAttribute()【移除属性】**

当我们设置属性的时候，我们不是调用方法来设置，而经常会这样做：

--------------------

# XML的DOM #

**我们可能会用XML文件作为客户端和服务器的传输文件。于是我们需要学习在JavaScript代码中通过DOM操作XML文档**

**XML和HTML的API是十分类似的，这里就不赘述了。**

## 装载XML ##

**客户端和服务端如果是通过XML文件或者XML字符串进行交互数据的话。那么，我们需要装载服务器的XML文件或XML字符串到JavaScript中的DOM对象。**

现在问题就是，**IE和fireFox的装载XML方式是不一样的**。因此，我们最好**封装成一个方法来装载XML**。

### **测试** ###

![640?wx\_fmt=png][640_wx_fmt_png 6]

--------------------

## 去除空白字符 ##

**如果有需要就加这段功能吧！**

## XPATH ##

XPATH技术其实我们已经接触过了，在讲解XML的时候，我们已经使用过了XPATH技术了。

可以参考我之前的XML博文：http://blog.csdn.net/hon\_3y/article/details/55049184

XPATH总体可分为三种搜索：

*  **绝对路径搜索（/根节点/子节点）**
 *  **相对路径搜索（子节点/子节点）【与绝对路径搜索的差别就是开头有无"/"】**
 *  **全文搜索（//子节点）**

如果我们要查找属性节点、文本节点、多条件的节点是这样写XPATH的

*  **属性节点：（先找到元素节点/@属性名）**
 *  **文本节点：（先找到元素节点/test()）**
 *  **有条件查询节点：（先找到元素节点/\[条件\]）**
 *  **多条件查询节点：（先找到元素节点/\[条件\]\[条件\]）【两个条件同时吻合】**
 *  **多条件查询节点：（先找到元素节点/\[条件\]｜先找到元素节点/\[条件\]）【或关系】**

我们之前使用dom4j的时候，是调用selectSingleNode()和selectNodes()方法来**获取任意深度的节点或多个节点**

我们想要在JavaScript中使用XPATH技术，那么我们也实现这两个方法，调用它就行了！

### **selectSingleNode()** ###

IE10,IE11下无法使用selectSingleNode()方法。解决参考：http://wenda.so.com/q/1458453513726662

**但是，我没有解决掉该问题。。。。。**

下面是JavaScript代码：

*  测试代码：

*  在fireFox，Chrome浏览器可以正常获取得到节点

![640?wx\_fmt=png][640_wx_fmt_png 7]

--------------------

### **selectNodes()** ###

由于上面IE问题我到现在还没有解决，**所以下面直接测试FireFox浏览器了**。

等我复习到Jquery的时候，再把这里的坑填了吧。。。

*  javaScript代码：

*  测试代码：

*  效果：

![640?wx\_fmt=png][640_wx_fmt_png 8]

--------------------

[640_wx_fmt_png]: /images/20210827/5b0485d361b8488e8f4382d5181aaf55.png?wx_fmt=png
[640_wx_fmt_png 1]: /images/20210827/bc79c2ed4add4df7ae36b908b725664a.png?wx_fmt=png
[640_wx_fmt_png 2]: /images/20210827/4d49015c719046dda34a3f9c277a2add.png?wx_fmt=png
[640_wx_fmt_png 3]: /images/20210827/06e40ffc37a845e3915100f63e269d24.png?wx_fmt=png
[640_wx_fmt_png 4]: /images/20210827/15eebefd048d420bb7ad05fd3e6fe65c.png?wx_fmt=png
[640_wx_fmt_png 5]: /images/20210827/90f73a8edb5f46ac8a78a63ace6b5e54.png?wx_fmt=png
[640_wx_fmt_png 6]: /images/20210827/a15fb4443ac84b4a876b694bfc48c315.png?wx_fmt=png
[640_wx_fmt_png 7]: /images/20210827/7e52f54f7b414a0ab27949d51bd5acbd.png?wx_fmt=png
[640_wx_fmt_png 8]: /images/20210827/48491ee55810455aa0cb9c450f86f7fc.png?wx_fmt=png