JavaScript系列(六:DOM编程)
来源:互联网 发布:centos vim 中文乱码 编辑:程序博客网 时间:2024/06/10 15:27
引言:
DOM编程是JavaScript的重要内容,学习DOM从基础学起。
概述:
文档对象模型(Document Object Model,DOM)是W3C组织推荐的处理可扩展标记语言XML的标准编程接口。它是一种与平台和语言无关的应用程序接口(API),可以作为网站内容与JavaScript互通的接口。
内容:
本次内容主要包括:XML回顾、DOM编程基础、如何进行DOM编程。DOM主要就是为了处理XML文本的一种接口,其实也算是一种规范。
XML回顾:
XML语言,全称是:可扩展标记语言。它是由SGML(标准通用标记语言)发展而来的一种简单,灵活的文本形式的标记语言,可提供跨平台、跨网格、跨程序语言的数据描述方式。专门用来在Web上传递信息,和HTML功能表现形式相似。那么这俩种语言的区别在哪里?这俩种语言是不同用途的语言,XML主要用来存放数据,被设计用来描述数据,关键点在于什么数据,如何存放数据。然而HTML主要是用来显示数据,关键点在于显示数据以及如何更好的显示数据。
XML的组成部分看下图:
这里要提高一个XML解析器的概念。XML是一种解析语言,需要匹配的解释器才能处理XML文件的数据。XML除了被浏览器内部调用,还可以在脚本中或者程序中调用。例如JavaScript就可以实现XML到HTML的转换,显示XML文件的数据。实例如下:
<script language="javascript">var xml = new AcitveXObject("Microsoft.XMLDOM") //建立一个Micosoft.XMLDOM对象xml.async =false //关闭同步载入xml.load("XML 文档") //使用load载入XML文档var xsl = new AcitveXObject("Microsoft.XMLDOM")xsl.async = falsexsl.load("XSL 文档") //使用load载入XSL文档document.write(xml.transformNode(xsl)) //使用XSL文档转换XML文档</script>
DOM编程基础:
DOM编程的基础就是DOM的属性和方法。
DOM的属性:
DOM的方法:
使用DOM编程:
1 创建新节点:
var newElement = document.createElement("name"); //创建新的元素节点<pre name="code" class="html"> var newText = document.createTextNode("text"); //创建新的文本节点<pre name="code" class="html"> //创建属性节点 var newatt = xmlDoc.createAttribute("id"); newatt.value = "liming";2 添加节点:
Node.appendChild(newchild); //Node表示当前节点,newchild表示新添加节点,缺陷:将这个 新节点添加到当前节点数组的末端。
3 插入节点:
var beforeNode = parentNode.insertBefore(newChild,beforeChild); //在某个现有节点之前添加一个新节点<pre name="code" class="html"> var newTextNode = parentNode.insertData(start,string); //start表示插入文本的起始位置,string表示要插入的文本字符串
4 删除节点:
removeChild(node); //删除某个指定的节点,参数node为被移除的节点对象。 deleteData(start,n); //删除文档文本节点中的字符串,start表示起始位置,n表示字符串长度 removeAttribute(name); //删除指定的属性节点。
5 访问节点:
var x = xmldocumentObject.getElementsByTagName("tagname"); //访问文档中某个特定节点,返回指定名称的元素集合。
总结:
DOM模型作为一种跨语言的规范,是一种W3C标准,目前所有Web浏览器在不同程度上都支持DOM。这里只是总结了JavaScript的DOM基础使用,在jQuery中DOM的写法与这里的不同,但是原理都是一样的,敬请关注后续博客。
- JavaScript系列(六:DOM编程)
- Javascript Dom编程艺术读书笔记(六)
- javascript之Dom编程艺术六
- javaScript-DOM操作(六)
- javascript(六)HTML DOM
- 深入浅出JavaScript (六)分析DOM模型
- 深入浅出JavaScript (六)分析DOM模型
- javascript基础六 (DOM优化)
- JavaScript DOM编程艺术 学习笔记(六)图片库改进版
- JavaScript(三)-- DOM编程
- JavaScript(含DOM编程)
- javascript DOM 编程(读书笔记)
- DOM编程之六
- 【JavaScript】JavaScript DOM 编程
- 【JavaScript】JavaScript DOM 编程
- Javascript(六)Javascript基础(DOM事件)
- 【JavaScript DOM编程艺术】- DOM
- javascript学习六:DOM模型
- 还是决定在这里留下自己的足迹
- KVM 存储虚拟化 - 每天5分钟玩转 OpenStack(7)
- Java编程语法——compartator在sort中的使用
- iOS开发-进阶:开启Remote notifications
- Python基础--使用字符串
- JavaScript系列(六:DOM编程)
- 了解
- 某年某月的天数
- iOS开发-进阶:JPush设置标签与别名的API
- VS2005编译PJSIP库
- 简述const关键字的作用
- [2016-3-13 Test]
- HDU 2186--
- 【LeetCode】107. Binary Tree Level Order Traversal II