一.理解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的理解的更多相关文章

  1. javascipt中的DOM对象

    1.HTML中DOM对象的概念 HTML Document Object Model(文档对象模型) HTML DOM定义了访问和操作HTML文档的标准方法 HTML DOM把HTML文档呈现为带有元 ...

  2. jQuery中的DOM操作总结

    jQuery中的DOM操作 DOM是Document Object Medel的缩写,它的意思是文档对象模型,根据W3C的官方说法,DOM是一种跟浏览器,平台以及语言都没有关系的一种规范,也就是一种接 ...

  3. html5中的dom中的各种节点的层次关系是怎样的

    html5中的dom中的各种节点的层次关系是怎样的 一.总结 一句话总结:Node节点是所有节点的基类,所以都继承它的方法 1.dom提供在js中动态修改html标签的作用 比如增加修改标签等,并且是 ...

  4. Vue中diff算法的理解

    Vue中diff算法的理解 diff算法用来计算出Virtual DOM中改变的部分,然后针对该部分进行DOM操作,而不用重新渲染整个页面,渲染整个DOM结构的过程中开销是很大的,需要浏览器对DOM结 ...

  5. DOM的理解

    https://www.cnblogs.com/djtang/p/11538420.html  dom的理解 https://blog.csdn.net/jiuqiyuliang/article/de ...

  6. React中diff算法的理解

    React中diff算法的理解 diff算法用来计算出Virtual DOM中改变的部分,然后针对该部分进行DOM操作,而不用重新渲染整个页面,渲染整个DOM结构的过程中开销是很大的,需要浏览器对DO ...

  7. 借助JavaScript中的Dom属性改变Html中Table边框的颜色

    借助JavaScript中的Dom属性改变Html中Table边框的颜色 -------------------- <html> <head> <title>我是页 ...

  8. 【Java EE 学习 32 下】【JQuery】【JQuey中的DOM操作】

    一.JQuery中的DOM操作. 什么是DOM:DOM是一中和浏览器.平台.语言无关的接口,使用该接口可以轻松访问页面中所有的标准组件.DOM简称文档对象模型,是Document Oject Mode ...

  9. javascript 获取iframe中的dom

    太扯了,一个多小时都没搞定,获取不到iframe中的dom元素. <div id="one"> this is one </div> <div> ...

随机推荐

  1. atittit.表单验证性质的原则和实施,以及选择和定义自己的兼容easyui dsl窗体身份验证规则

    atittit.表单验证性质的原则和实施,以及选择和定义自己的兼容easyui dsl规则的表单验证 1. 需求,表单验证须要弹框式,但眼下easyui ms绑定死了tooltip式样 1 2. 表单 ...

  2. IOS开发——Protocol使用协议

    protocol ['prəutəkɔl] (样例:http://blog.sina.com.cn/s/blog_6aafe9c90100yozz.html ) 一.说明  两个类进行通讯,用协议就比 ...

  3. 为网站添加IE6升级提示

    原文 为网站添加IE6升级提示 IE6的是一款横跨十年的浏览器,作为一枚前端,对其已经失望透顶,但其在中国的市场比仍旧很高,中国大量的PC上安装的都是盗版Windows XP,而Windows XP上 ...

  4. c# webbrowser  获取用户选中文字

    原文:c# webbrowser  获取用户选中文字 最近一直被一个问题困扰,有一个文本框,一个webbrowser控件,一个上下文菜单, webbrowser  获取用户选中文字" tit ...

  5. 单机部署redis主从备份

    redis为了避免单点故障,也支持主从备份.个人在做主从备份的实验时,因为机器数量有限,一般非常少有多台机器做支撑. 本文就将叙述怎样在一台电脑上实现redis的主从备份. 同一台机器上部署多个red ...

  6. SQL Server 服务器磁盘测试之SQLIO篇

    原文:SQL Server 服务器磁盘测试之SQLIO篇 数据库调优工作中,有一部分是需要排查IO问题的,例如IO的速度或者RAID级别无法响应高并发下的快速请求.最常见的就是查看磁盘每次读写的响应速 ...

  7. hdu4705 Y 简单树形DP 2013多校训练第十场 J题

    题意:求一棵树中不在一条链中的三个点的对数. 转化一下,用总对数减去在一条链上的三点对数即可. 考虑经过根节点,然后可能是不同的子树中各选一个:或者是子树中选一个,然后当前节点为根的子树以外的节点选一 ...

  8. android 环境使用smack 必须注冊的组件

    // Private Data Storage pm.addIQProvider("query", "jabber:iq:private",new Privat ...

  9. 经典算法题每日演练——第十一题 Bitmap算法

    原文:经典算法题每日演练--第十一题 Bitmap算法 在所有具有性能优化的数据结构中,我想大家使用最多的就是hash表,是的,在具有定位查找上具有O(1)的常量时间,多么的简洁优美, 但是在特定的场 ...

  10. 仅当使用了列的列表,并且 IDENTITY_INSERT 为 ON 时,才能在表中为标识列指定显式值问题

    今天在处理数据库过程中碰到这样的问题在插入一条数据到表中 系统报这样的错误 仅当使用了列的列表,并且 IDENTITY_INSERT 为 ON 时,才能在表中为标识列指定显式值问题 表有一列是自增长的 ...