讲给Android程序员看的前端教程(34)——DOM编程

来源：互联网发布：二代身份证阅读软件编辑：程序博客网时间：2024/06/05 18:41

自定义View系列教程00–推翻自己和过往，重学自定义View
自定义View系列教程01–常用工具介绍
自定义View系列教程02–onMeasure源码详尽分析
自定义View系列教程03–onLayout源码详尽分析
自定义View系列教程04–Draw源码分析及其实践
自定义View系列教程05–示例分析
自定义View系列教程06–详解View的Touch事件处理
自定义View系列教程07–详解ViewGroup分发Touch事件
自定义View系列教程08–滑动冲突的产生及其处理

探索Android软键盘的疑难杂症
深入探讨Android异步精髓Handler
详解Android主流框架不可或缺的基石
站在源码的肩膀上全解Scroller工作机制

Android多分辨率适配框架（1）— 核心基础
Android多分辨率适配框架（2）— 原理剖析
Android多分辨率适配框架（3）— 使用指南

版权声明

本文原创作者：谷哥的小弟
作者博客地址：http://blog.csdn.net/lfdfhl
本文视频教程：http://www.stay4it.com/my/course/37

DOM简介

其实，一提到DOM，大家并不陌生，面试的时候也经常问到Android常用的xml解析方式SAX、DOM、PULL；做java开发的童鞋也时常使用dom4j。DOM即文档对象模型(Document Object Model)的简称，DOM解析就是将结构化文档(比如:XML和HTML)转换成设备内存中的DOM树，请看下图：

这里写图片描述

所以，可通过JavaScript代码访问、修改、新增、删除DOM树里的节点；而且一旦我们修改了DOM树，浏览器中的HTML也会立马随之改变！这就有趣多了，之前我们写的那些前端代码很少有与浏览器之间的交互，现在终于迈出新的步伐了。嗯哼，来吧，现在我们就来利用window的document对象操作DOM树实现对HTML文档的简单操作。

访问标签

在此通过DOM操作，访问HTML中的标签；请看如下示例：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>DOM</title>    <script type="text/javascript">        var getByID=function(){            var nameValue=document.getElementById("name").innerHTML;            var introduceValue=document.getElementById("introduce").value;            alert("nameValue="+nameValue+" , introduceValue="+introduceValue);        }        var getBySelector=function(){            var nameValue=document.querySelector("#name").innerHTML;            var introduceValue=document.querySelector("#introduce").value;            alert("nameValue="+nameValue+" , introduceValue="+introduceValue);        }        var getByNode=function(){            var currentNode=document.getElementById("java");            var previousNode=currentNode.previousSibling.previousSibling;            var previousNodeVaule=previousNode.innerHTML;            var nextNode=currentNode.nextSibling.nextSibling;            var nextNodeVaule=nextNode.innerHTML;            alert("previousNodeVaule="+previousNodeVaule+" , nextNodeVaule="+nextNodeVaule);        }    </script></head><body>    <p id="name">谷哥的小弟</p>    <textarea id="introduce" cols="20" rows="3">坚持原创，热衷分享</textarea>    <br>    <br>    <input type="button" value="依据ID访问标签" onclick="getByID();">    <br>    <br>    <input type="button" value="依据选择器访问标签" onclick="getBySelector();">    <br>    <br>    <ol>        <li>Android</li>        <li id="java">Java</li>        <li>Python</li>    </ol>    <input type="button" value="依据节点关系访问标签" onclick="getByNode();">    <br>    <br></body></html>

运行后效果图如下所示：

这里写图片描述

在该实例中用了三种方式访问HTML中的标签，详解如下：

依据ID访问标签

利用方法document.getElementById( )依据元素的id获取标签，请参见代码第7-11行。在此请注意：HTML中大部分标签(比如div、p、td)的内容都可通过属性innerHTML获取到；但是有些标签(比如input、textarea)的内容则是通过属性value获取的。

依据选择器访问标签

利用方法document.querySelector( )依据元素的选择器获取标签，请参见代码第13-17行。它和刚才的依据ID访问标签非常类似，不再赘述。

依据选择器访问标签

利用节点之间的关系(比如父子关系、兄弟关系)获访问标签，请参见代码第19-26行。在此，请注意每两个li标签之前的回车换行也是ol标签的子节点！

修改标签

在此通过DOM操作，修改HTML中的标签；请看如下示例：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>DOM</title>    <script type="text/javascript">        var updateValue=function(){            var javaNode=document.getElementById("java");            javaNode.innerHTML="J2EE";            var introduceNode=document.getElementById("introduce");            introduceNode.value="积累技术，沉淀生活";        }    </script></head><body>    <ol>        <li>Android</li>        <li id="java">Java</li>        <li>Python</li>    </ol>    <textarea id="introduce" cols="20" rows="3">坚持原创，热衷分享</textarea>    <br>    <br>    <input type="button" value="修改标签的内容" onclick="updateValue();"></body></html>

对于标签的修改挺简单：先找到标签再修改其innerHTML或value即可；请参见代码第7-12行

添加标签

在JavaScript中可用如下方式新增节点：

appenChild( ) 将节点添加成父节点的最后一个子节点
insertBefore( ) 在某个节点之前插入新的节点
replaceChild( ) 将老节点替换成新节点

在此通过第二种方式向HTML中添加新的标签；请看如下示例：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>DOM</title>    <script type="text/javascript">        var addNode=function(){            var courseNode=document.getElementById("course");            var osNode=document.createElement("li");            osNode.innerHTML="操作系统";            courseNode.insertBefore(osNode,courseNode.firstChild);        }    </script></head><body>    <ol id="course">        <li>数据结构</li>        <li>计算机网络</li>        <li>计算机组成原理</li>    </ol>    <input type="button" value="新增标签" onclick="addNode();"></body></html>

运行后效果如下所示：

这里写图片描述

代码解析如下：

利用document.createElement( )创建新的节点，请参见代码第9行
为新节点设置内容，请参见代码第10行
将新节点添加至父节点，请参见代码第11行

删除标签

在此通过DOM操作，删除HTML中的标签；请看如下示例：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>DOM</title>      <script type="text/javascript">        var deleteNode=function(){            var netNode=document.getElementById("net");            var courseNode=document.getElementById("course");            courseNode.removeChild(netNode);        }    </script></head><body>    <ol id="course">        <li>数据结构</li>        <li id="net">计算机网络</li>        <li>计算机组成原理</li>    </ol>    <input type="button" value="删除标签" onclick="deleteNode();"></body></html>

代码解析如下：

获得待删节点，请参见代码第8行
获得待删除节点的父节点，请参见代码第9行
利用removeChild( )从父节点中删除子节点，请参见代码第10行

阅读全文

1 0