JavaScipt中对DOM的理解
一.理解DOM
浏览器通过文档对象模型DOM使JavaScript程序可以访问页面上的元素,而DOM是页面上XHTML中文档正文标题、段落、列表、样式ID、class以及所有其他出现的数据的一个内部表示。
DOM的主要思想是HTML上每一个元素分别对应于DOM中的一个节点。DOM定义了许多种节点类型来表示节点的多个方面:
1.文档节点Document-----最顶层的节点或者说是各节点,它代表整个XHTML文档,所有的其他节点都是附属于它的。
2.文档类型节点DocumentType------DTD引用(使用<!DOCTYPE >语法)的对象表现形式。
3.文档片段节点DocumentFragment-----可以像Document一样来保存其他节点。
4.元素节点Element-----表示起始标记和结束标记之间的内容。
5.文本节点Text----代表XHTM文档中元素的起始标记和结束标记之间,或者CDataSection内容包含普通文本。
6.属性节点Attr-----d代表元素节点开始标记内指定的属性。
7.CDataSection节点----<![CDATA]>的对象表现形式。
8.注释节点Comment----代表注释。
二.使用DOM
1.访问相关的节点
要访问<html/>元素,我们可以使用document的documentElement特性:
Var oHead=oHtml.firstChild;
Var oBody=oHtml.lastChild;
也可以使用childNodes特性来完成同样的工作,使用方括号标记:
Var oHead=oHtml.childNodes[0];
Var oHead=oHtml.childNodes[1];
实际上,正式的从childNodes列表中获取子节点的方法是使用item()方法:
Var oHead=oHtml.childNodes.item(0);
Var oHead=oHtml.childNodes.item(0);
2.检测节点类型
元素节点的attributes属性其实是NameNodeMap,它提供一些用于访问和处理其内容的方法,包括:
(1).getNameItem(name)---返回nodeName属性值等于name的节点
(2).removeNameItem(name)----删除nodeName属性值等于name的节点
(3).setNameItme(node)----将node添加到列表中,按其 nodeName属性进行索引
(4).itme(pose)----像NodeList一样,返回在位置pos的节点
3.访问指定节点
(1).getElementByTagName()方法
DOM定义了getElementByTagName()方法,用来返回一个包含所有的tagName(标记名)特性等于某个指定值得元素的NodeList。如:
Var oImgs=document.getElementsByTagName(“img”);
上一行代码返回文档中所有<img/>元素的列表。
(2).getElementByName()方法
DOM定义了getElementByName()方法,用来获取所有name属性等于指定值得元素,如:
Var oRadios=document.getElementByName”radColor”);
(3).getElementById()方法
Var=oDiv=document.getElementById(“div1”);
4.创建和操作节点
(1) 创建节点createElement( )、createTextNode( )、appendChild( ) 如:
先创建节点名称
Var op=document.createElement(“p”);
再创建text文本节点
Var text=document.createTextNode;
把text值加到p元素中
Op.appendChild(text);
把元素加到页面上
Document.Body appendChild(op);
(2)删除、替换节点removeChild( )、replaceChild( )、insertBefore( )
删除节点
Var op=document.body.getElementByName(“p”)[0]
Op.parentNode.removeChild(op)
替换节点
Var newp=document.createElement(“p”)
Var text=document.createTextNode
Newp.appendChild(text);
Var oldp=document.getElementByName(“p”)[0];
Oldp.parentNode.replaceChild(newP,oldP);
5.操作文本节点
AppenData(string)将字符添加在文本节点尾部
DeleteData(offset,count)删除文本节点中从指定位置开始的指定数量的字符
InsertData(offset,string)将指定字符添加到指定位置
ReplaceData(offset,count,string)用给的字符串替换文本节点指定位置数量的文本数
Splittext(offset)将文本分为两个部分右边返回为新节点,左边留在原始位置
SubstringData(offset,count)从文本节点中数据返回指定位置指定数目的字符串
三.HTML DOM特征功能
1.table方法
使用DOM来创建HTML 表格
var table=document.creatElement(“table”)
var tbody=createElement(“tbody”);
table.appendChild(tbody)
var otr1= document.creatElement(“tr”);
tbody. appendChild(otr1)
var otd1= document.creatElement(“td”);
otd1. appendChild(document.creatTextNode(“Cell 1,1”));
otr1. appendChild(otd1);
四.innerHTML
将HTML的字符串赋值给一个元素
代码<div><b>hello</b>WORLD</div> innerHTML <b>hello</b>WORLD
JavaScipt中对DOM的理解的更多相关文章
- javascipt中的DOM对象
1.HTML中DOM对象的概念 HTML Document Object Model(文档对象模型) HTML DOM定义了访问和操作HTML文档的标准方法 HTML DOM把HTML文档呈现为带有元 ...
- jQuery中的DOM操作总结
jQuery中的DOM操作 DOM是Document Object Medel的缩写,它的意思是文档对象模型,根据W3C的官方说法,DOM是一种跟浏览器,平台以及语言都没有关系的一种规范,也就是一种接 ...
- html5中的dom中的各种节点的层次关系是怎样的
html5中的dom中的各种节点的层次关系是怎样的 一.总结 一句话总结:Node节点是所有节点的基类,所以都继承它的方法 1.dom提供在js中动态修改html标签的作用 比如增加修改标签等,并且是 ...
- Vue中diff算法的理解
Vue中diff算法的理解 diff算法用来计算出Virtual DOM中改变的部分,然后针对该部分进行DOM操作,而不用重新渲染整个页面,渲染整个DOM结构的过程中开销是很大的,需要浏览器对DOM结 ...
- DOM的理解
https://www.cnblogs.com/djtang/p/11538420.html dom的理解 https://blog.csdn.net/jiuqiyuliang/article/de ...
- React中diff算法的理解
React中diff算法的理解 diff算法用来计算出Virtual DOM中改变的部分,然后针对该部分进行DOM操作,而不用重新渲染整个页面,渲染整个DOM结构的过程中开销是很大的,需要浏览器对DO ...
- 借助JavaScript中的Dom属性改变Html中Table边框的颜色
借助JavaScript中的Dom属性改变Html中Table边框的颜色 -------------------- <html> <head> <title>我是页 ...
- 【Java EE 学习 32 下】【JQuery】【JQuey中的DOM操作】
一.JQuery中的DOM操作. 什么是DOM:DOM是一中和浏览器.平台.语言无关的接口,使用该接口可以轻松访问页面中所有的标准组件.DOM简称文档对象模型,是Document Oject Mode ...
- javascript 获取iframe中的dom
太扯了,一个多小时都没搞定,获取不到iframe中的dom元素. <div id="one"> this is one </div> <div> ...
随机推荐
- js地址下拉列表中全职工作
/******************************************************************* *输出全国各省辖市下拉列表项writeCitys() *输出企 ...
- 应用程序框架实战十三:DDD分层架构之我见(转)
前面介绍了应用程序框架的一个重要组成部分——公共操作类,并提供了一个数据类型转换公共操作类作为示例进行演示.下面准备介绍应用程序框架的另一个重要组成部分,即体系架构支持.你不一定要使用DDD这样的架构 ...
- Maven学习笔记(四):协调和依赖
Maven协调具体的解释: Maven定义了这样一组规则:世界上不论什么一个构件都能够使用Maven坐标唯一标识.Maven坐标的元素包含groupId.artifactId.version ...
- Sky数 2097
Problem Description Sky从小喜欢奇特的东西,而且天生对数字特别敏感,一次偶然的机会,他发现了一个有趣的四位数2992,这个数,它的十进制数表示,其四位数字之和为2+9+9+2=2 ...
- HDU 1248 冰封王座(dp)
Problem Description 不死巫妖王拉工资,死亡骑士得到N美元的钞票(记,只有一个纸币),战斗中频繁的死掉,他决定给自己买一些道具,于是他来到了地精商店前. 死亡骑士:"我要买 ...
- sql server 更新表,每天的数据分固定批次设置批次号sql
按表中的字段 UpdateTime 按每天进行编号,每天的编号都从1开始编号,并附带表的主键 cid,把数据存入临时表中 WITH temp AS (SELECT cid,updatetime, RO ...
- 运用TWaver 3D 矢量图形处理能力
的确,提起TWaver,大家想到的首先是"电信拓扑图组件".事实上.因为其灵活的MVC架构.矢量化设计.方便定制等特点.TWaver能够做的还有非常多.比如房地产行业常见到的&qu ...
- MIFARE系列6《射频卡与读写器的通信》
1. ATR(Answer to request) 读写器呼叫磁场内的卡片.卡片对呼叫做出应答. 对刚进入磁场得到电复位处于休闲状态的卡片,卡请求(REQA,0x26):对于已进行过读写操作并进入休眠 ...
- python_在windows下安装配置python开发环境及Ulipad开发工具
最近开始学习Python,在网上寻找一下比较好的IDE.因为以前用C#做开发的,用Visual Studio作为IDE,鉴于用惯了VS这么强大的IDE,所以对IDE有一定的依赖性. Python的ID ...
- SDUT 1124-飞跃荒野(三维BFS)
飞跃原野 Time Limit: 5000ms Memory limit: 65536K 有疑问?点这里^_^ 题目描写叙述 勇敢的法里奥出色的完毕了任务之后.正在迅速地向自己的基地撤退.但因为 ...