DOM【介绍、HTML中的DOM、XML中的DOM】
什么是DOM？
DOM（Document Object Model）文档对象模型，是语言和平台的中立接口。
允许程序和脚本动态地访问和更新文档的内容。
为什么要使用DOM？
Dom技术使得用户页面可以动态地变化，如可以动态地显示或隐藏一个元素，改变它们的属性，增加一个元素等，Dom技术使得页面的交互性大大地增强。
HTML的DOM
HTML的DOM是一个内存对象树，在浏览器中只保存一份，HTML的DOM修改HTML的内容会直接反应到浏览器中
API
NODE对象API
在DOM眼中，HTML是由不同类型的节点组成的，这些节点都属性NODE对象。
NODE对象有一个nodeType的属性可用于判断节点类型
HTML不同类型的节点之间都是有联系的：
- 位于一个节点之上的节点是该节点的父节点(parent)
- 一个节点之下的节点是该节点的子节点（children）
- 同一层次，具有相同父节点的节点是兄弟节点（sibling）
- 一个节点的下一个层次的节点集合是节点后代(descendant)
- 父、祖父节点及所有位于节点上面的，都是节点的祖先(ancestor)
于是乎，NODE对象也有访问节点的属性和方法
属性：
总的来说就是：得到节点的信息(节点名字、节点值)以及访问节点的兄弟、父亲
方法：
总的来说就是：添加、替换、删除子节点，判断是否有子节点，克隆子节点
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()【移除属性】
当我们设置属性的时候，我们不是调用方法来设置，而经常会这样做：
var input = document.createElement("input");
input.value = "aa";
input.name = "bb";
XML的DOM
我们可能会用XML文件作为客户端和服务器的传输文件。于是我们需要学习在JavaScript代码中通过DOM操作XML文档
XML和HTML的API是十分类似的，这里就不赘述了。
装载XML
客户端和服务端如果是通过XML文件或者XML字符串进行交互数据的话。那么，我们需要装载服务器的XML文件或XML字符串到JavaScript中的DOM对象。
现在问题就是，IE和fireFox的装载XML方式是不一样的。因此，我们最好封装成一个方法来装载XML。
/**
* @param flag true代表的是文件，false代表的是字符串
* @param xmldoc 要封装成DOM对象的字符串或文件
* @return 返回的是根节点的元素节点
* 重点放在高版本上！！
* */
function loadXML(flag, xmldoc) {
//浏览器是低版本的IE
var objXml;
if (window.ActiveXObject) {
//是IE的话，有两种方式来创建ActiveXObject对象
var name = ["MSXML2.DOMDocument", "Miscrosoft.XmlDom"];
for (var i = 0; i < name.length; i++) {
objXml = new ActiveXObject(name);
break;
}
//设置为同步【装载XML文件成DOM对象，我们都是同步操作】
objXml.async = false;
//如果是字符串
if (flag == false) {
objXml.loadXML(xmldoc);
} else {
//如果是文件
objXml.load(xmldoc)
}
return objXml.documentElement;
//浏览器是fireFox或者高版本的IE
} else if (document.implementation.createDocument) {
//字符串
if (flag == false) {
//创建对象，解析XML字符串
objXml = new DOMParser();
//解析到根节点
var root = objXml.parseFromString(xmldoc, "text/xml");
return root.documentElement;
} else {
//由于安全问题，想要得到XML文件，需要通过XMLHttpRequest对象来获取
objXml = new XMLHttpRequest();
//同步
objXml.open("GET", "1.xml", false);
objXml.send(null);
//返回XML数据
return objXml.responseXML.documentElement;
}
//解析不了啦
} else {
alert("解析不了了");
}
}测试
去除空白字符
如果有需要就加这段功能吧！
function removeBlank(xml) {
if (xml.childNodes.length > 1) {
for (var loopIndex = 0; loopIndex < xml.childNodes.length; loopIndex++) {
var currentNode = xml.childNodes[loopIndex];
if (currentNode.nodeType == 1) {
removeBlank(currentNode);
}
if (((/^\s+$/.test(currentNode.nodeValue))) && (currentNode.nodeType == 3)) {
xml.removeChild(xml.childNodes[loopIndex--]);
}
}
}
}
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代码：
/**
*
* @param xmldoc 代表的是XML的根节点
* @param xpath 给出的XPATH表达式
* @return 返回的是对应的节点或多个节点
*
*
*
*/
function selectSingleNode(xmldoc,xpath) {
//如果是IE,IE10，IE11解决不了....会的人告诉我一声！！
if(navigator.userAgent.indexOf(".NET")>0) {
var value = xmldoc.selectNodes(xpath)
return value;
}else {
//如果是fireFox
var xpathObj = new XPathEvaluator();
var value = xpathObj.evaluate(xpath, xmldoc, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null);
return value.singleNodeValue;
}
}
- 测试代码：
<script type="text/javascript" src="loadXML.js" ></script>
<script type="text/javascript" src="xpath.js" ></script>
<script type="text/javascript">
function test() {
var file = loadXML(true, "1.xml");
var xpathValue = selectSingleNode(file, "//dd");
var value = xpathValue;
alert(value);
}
</script>- 在fireFox，Chrome浏览器可以正常获取得到节点
selectNodes()
由于上面IE问题我到现在还没有解决，所以下面直接测试FireFox浏览器了。
等我复习到Jquery的时候，再把这里的坑填了吧。。。
- javaScript代码：
/**
*
* @param xmldoc 代表的是XML的根节点
* @param xpath 给出的XPATH表达式
* @return 返回的是节点数组
*/
function selectNodes(xmldoc,xpath) {
var xpathObj = new XPathEvaluator();
//如果是多节点，返回的是迭代器
var iterator = xpathObj.evaluate(xpath, xmldoc, null, XPathResult.ORDERED_NODE_ITERATOR_TYPE, null);
//把迭代器的数据写到数组中
var arr = new Array();
var node;
while ((node=iterator.iterateNext())!=null) {
arr.push(node);
}
return arr;
}
- 测试代码：
function test() {
var file = loadXML(true, "1.xml");
var xpathValue = selectNodes(file, "//aa");
var value = xpathValue;
alert(value);
}
- 效果：
DOM【介绍、HTML中的DOM、XML中的DOM】的更多相关文章
- Andriod ADT v22.6.2版本中在Mainactivity.java中使用fragment_main.xml中TextView控件对象的问题
众所周知,我们既可以在 activity_main.xml文件中控制activity中的view,也可以使用java代码的set..()方法控制它.在学习过程中,发现在ADT新版本中,和以前版本有区别 ...
- struts2 在 Action 或 Interceptor 中获取 web.xml 中配置的 <context-param> 参数 （这是我的第一篇博文，哈哈。）
最近为了改一个问题,想加一个控制开关,就在web.xml 中配置了一个 <context-param> 参数,并在 Action 或 Interceptor 中获取参数值. 1.在 web ...
- 在springboot项目中获取pom.xml中的信息
最近做了一个新项目,用到了springboot.在搭建框架的过程中,需要读取pom.xml中version的值,本来想着是用自己用java解析xml来着.没想到maven提供了这么一个包,可以直接获取 ...
- 在springBoot中配置web.xml中配置的servlet
第一种 web.xml (截取的需要转换的) 当拦截到 /socke t时执行该servlet <servlet> <servlet-name>websocket</se ...
- ckplayer 中的style.swf 中的 style.xml 中的修改方法
style.swf ---- > style.zip ---- > 解压成文件夹 ---- > 打开style.xml ---- > 修改 最重要的是修改保存style.xml ...
- maven中的pom.xml中的scope的作用
pom.xml配置文件中, <dependency>中的<scope>,它主要管理依赖的生效范围.目前<scope>可以使用5个值: * compile,缺省值,适 ...
- 解决在Tomcat中的server.xml中修改了配置，启动后还原的问题
正确答案,你要在eclipse的项目Servers中,找到你的tomcat,打开有各种配置文件,在这里改,才会在使用eclipse启动tomcat后不会自动恢复.
- Struts2：MyEclippse中使用struts-default.xml中定义的拦截器（timmer,logger）
环境:MyEclipse 2015 Stable 2.0:struts2-core-2.3.16.1.jar等 struts.xml <struts> <package name=& ...
- SpringMVC中在web.xml中添加中文过滤器的写法
<filter> <filter-name>characterEncodingFilter</filter-name> <filter-class>or ...
- Android系列--DOM、SAX、Pull解析XML
您可以通过点击 右下角 的按钮 来对文章内容作出评价, 也可以通过左下方的 关注按钮 来关注我的博客的最新动态. 如果文章内容对您有帮助, 不要忘记点击右下角的 推荐按钮 来支持一下哦 如果您对文章内 ...
随机推荐
- How to make a simplest WCF service work on Win7 with VS2010
You know as a beginner to learn WCF, the first thing is to make a simplest WCF service work like a c ...
- Akka（20）： Stream：压力缓冲-Batching backpressure and buffering
akka-stream原则上是一种推式(push-model)的数据流.push-model和pull-model的区别在于它们解决问题倾向性:push模式面向高效的数据流下游(fast-downst ...
- Es6 类的关键 super、static、constructor、new.target
ES6引入了Class(类)这个概念,作为对象的模板,通过class关键字,可以定义类.基本上,ES6的class可以看作只是一个语法糖,它的绝大部分功能,ES5都可以做到,新的class写法只是让对 ...
- 微信小程序周报（第十三期）-极乐商店(store.dreawer.com)出品
重要:极乐商店域名变更:wxapp.dreawer.com/变更为store.dreawer.com/ 每周一笑 当年刚学打篮球的时候,疯狂地迷恋上了乔丹,然后迷恋上了NIKE,更熟记了NIKE的那句 ...
- ASP.NET Core MVC – Tag Helper 组件
ASP.NET Core Tag Helpers系列目录,这是第五篇,共五篇: ASP.NET Core MVC – Tag Helpers 介绍 ASP.NET Core MVC – Caching ...
- 堆排序—Java
堆排序: 一棵完全二叉树,如果父节点的值大于等于左右节点的值,则称此完全二叉树为小根堆(小顶堆):如果父节点的值小于等于左右节点的值,则次完全二叉树为大根堆(大顶堆). 堆排序是建立在大顶堆或小顶堆的 ...
- SoapUI中XML解析
From http://www.robert-nemet.com/2011/11/groovy-xml-parsing-in-soapui.html Introduction Since soapUI ...
- css预处理器之一---sass(一)
慕课学习笔记: CSS 预处理器定义了一种新的语言,其基本思想是,用一种专门的编程语言,为 CSS 增加了一些编程的特性,将 CSS 作为目标生成文件,然后开发者就只要使用这种语言进行编码工作. 通俗 ...
- [WPF]如何调试Data Binding
前言 在WPF开发中,将ViewModel中对象绑定到UI上时,会出现明明已经将数据对象Binding到UI,但是UI上就是不显示等等的问题.这篇博客将介绍WPF Data Binding相关的内容, ...
- 如何通过jmeter使用beanshell进行关联
关联,大多数都是通过响应的信息抓取部分信息,例如session或者hidden等 在jmeter中要使用关联,分为以下2步: Step 1. 在Sampler请求下添加正则表达式,获得信息,添加 &g ...