您的位置：首页 > 职场人生

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

2017-12-04 09:47 1081 查看

版权声明

本文原创作者：谷哥的小弟

作者博客地址：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行

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航