位置: 编程技术 - 正文

JavaScript DOM学习第一章 W3C DOM简介(js domcontentloaded)

编辑:rootadmin
在这一章我主要介绍已经被新一代的浏览器所支持的W3C 第一级的DOM。对他的运作做一个大概的了解并且让你知道你可以对他们做什么。 首先是对于DOM的一些建议和DOM设计的目的,然后我会告诉你什么是节点(nodes)并且怎样通过DOM树来遍历节点。接着是如何得到一个特定的节点,以及怎样改变他的值和属性。最后就是DOM的终极目标:怎么创建一个自己的新节点。 建议 Level 1DOM是W3C制定的用来提供给任何程序语言来访问XML文档的。不管你用什么语言程序来处理XML文档,只要是Level 1DOM里面的方法和属性就可以。不管是Perl、VBScript还是JavaScript你都可以读取任何你想读取的值并且修改他们。 你们可能会猜到,这段描述的是一种理想情况,差异还是存在的(比如浏览器)。然后这部分内容还是比较少,并且你在JavaScript里学习如何处理XML也对你在其它语言中的学习会有一定的帮助。 从某种程度上也可以讲HTML看做是一种XML文档。只要浏览器能够处理相应的脚本,那么Level 1 DOM也同样在HTML里面可以运行的很好。 你可以读取每一个HTML的标签的文本和属性,你可以删除每一个标签和他们的内容,你还可以实时的在现有的文档里面插入一个新的标签而不用在服务器上修改。 因为设计之初要考虑到修改XML的方方面面,所以对于一般的网页工程师来说有一些方法可能永远也用不上。比如,你可以用它来修改HTML的注释,但是我没有看出来问什么要这样做。同样的还有一些DOM处理DTD/Doctype的内容,你在你的网页设计中并不需要,所以忽略掉,集中注意力在你的日常所需上就好。 节点(Nodes) 文档对象模型是一种文档内的多个元素之间怎样相互联系的一种模型。在Level 1 DOM中,每一个对象都是一个节点。所以如果你写: 那么你就创建了两个节点:元素P和内容是"This is a paragraph”的文本节点。这个文本节点包含在P元素内,所以可以认为是p节点的子节点。反过来说,p元素就是文本节点的父节点。 如果你写成: 那么元素节点p就有两个子节点,其中一个还有他自己的子节点。 最后就是参数节点。(令人困惑的是,他们不算做元素节点的子节点。事实上,在我写这一章的过程中我做过一些测试,IE5根本就不把参数节点当做元素的子节点。)所以:

的结构可能是这样的:

<P> ---------------- -------------- ALIGN This is a <B> | | right paragraph

这就是元素节点,文本节点和参数节点。%的HTML页面都是由他们组成,你的主要任务也就是如何放置他们。当然还有很多的其他节点,暂且略过。

就像你所了解的,p元素也有他自己的父节点,通常就是document,有时候也可能是一个DIV。所以整个文档都可以看做是一颗由很多的节点组成的树,而且这些节点大多都有自己的子节点。

<BODY> |------------------------------------- <P> ---------------- lots more nodes -------------- ALIGN This is a <B> | | right paragraph遍历DOM树 知道了DOM树的结构,你就可以遍历他来找到你想要的元素。举个例子,假设元素节点p已经存储在变量x中(等一会介绍这是怎么做到的)。这时候如果我们想访问BODY那么: 我们就得到了x的父元素,然后就可以修改它了。这样可以到达B节点: childNode是一个包含所有x的子节点的数组。当然,数组是从0开始编号的,所以childNode[0]就是文本节点"This is a " childNode[1]就是B节点。 两个特别的:x.firstChild就表示x的第一个子节点;x.lastChild就表示x的最后一个子节点。 假设p是BODY的第一个子节点,BODY又是document的第一个子节点,所以为了到达B节点,你可以用下面的任意方法: 甚至是下面这个比较笨的: 得到一个元素 然而,这样遍历文档实在是太麻烦了。因为Level 1 DOM设计的目标就是允许你修改整个DOM树,所以你必须准确的知道DOM树的结构,这会很快导致一些问题。 所以还有一些方法能够很快的到达你想要的元素。只要你到达了这里,就可以遍历整个DOM树的每一个节点。 让我们继续前面的例子。你想要到达元素B。最简单的办法就是直接跳过去。通过document.getElementByTagName你就能很快的创建一个包含文档内的所有B标签的数组。假设我们的B是第一个,那么你就可以简单的写: x就包含了元素节点B。首先你命令浏览器得到整个文档的所有元素B(document.getElementByTagName(‘B')) ,然后你选择了第一个文档的第一个元素B([0]),就得到了你想要的。 你也可以写: 现在你先到了文档的第一个段落P(假设我们的P是第一个元素),然后到达p的最后一个子元素。 最好的能准确到达元素并且不需要DOM结构的办法就是给B一个ID: <P ALIGN="right">This is a <B ID="hereweare">paragraph</B></P>现在你就可以简单的写: 元素B就存储在了x里。 修改一个节点 现在我们已经到达了节点,就可以做一些修改了。假设我们想把加粗的文字部分修改为'bold bit of text'。我们需要访问正确的元素然后修改它的nodeValue。现在正确的元素不是元素B而是他的子元素text node:我们想改变的是文字,不是元素。所以可以写: 元素就改变了。 你可以通过nodeValue来修改任何文本节点或者参数。比如你可以修改段落的ALIGN参数。这也是非常的简单,先找到需要的元素(在这个例子中是B元素的父元素),然后使用setAttribute()方法来设置你想要的值: 创建和删除元素 修改元素固然有用,但是还是不如创建你需要的元素然后插入到现有的文档中。我可以很简单的在这个段落后面添加一个HR元素然后很简单的删除它。 创建元素使用下面的方法: var x=document.createElemnt(‘HR') 这样HR就创建并且存储在x中。第二步就是把x插入到文档之中。我写了一个ID是inserthere的SPAN,我们就把它插入到这。所以我们使用appendChild()方法: 删除它稍稍有点麻烦。我先创建一个临时变量node来存储SPAN,然后我告诉他移除他的第一个子元素: 同样的方法我们也可以创建一个新的元素然后添加在ID是hereweare的B元素上。 你可以试一试,你会注意到用老的办法可能不会移除新加的文本,那是因为他们已经成为分离的两部分了: <B> ------------ paragraph A new text node has been appended!(可以通过normalize()来把他们合并,但是IE5不支持) 我不打算告诉你怎么移除它,自己练习会比较有收获 翻译地址: 转载请保留以下信息 作者:北玉(tw:@rehawk)

推荐整理分享JavaScript DOM学习第一章 W3C DOM简介(js domcontentloaded),希望有所帮助,仅作参考,欢迎阅读内容。

JavaScript DOM学习第一章 W3C DOM简介(js domcontentloaded)

文章相关热门搜索词:javascript中的dom,js dom操作方法,javascript的dom操作,javascript的dom操作,javascriptdom编程,js domcontentloaded,js中dom的用法,javascript的dom,内容如对您有帮助,希望把文章链接给更多的朋友!

JavaScript DOM 学习第二章 编辑文本 例子这个页面就是个例子。点击一个段落,编辑,然后点Ready。你的修改就会呈现。问题遇到的第一个问题是:我想用文本框作为编辑区域。一开始我

JavaScript DOM 学习第三章 内容表格 如果你也想这么做,那么你还需要我的getElementByTagNames()函数。functioncreateTOC(){vary=document.createElement('div');y.id='innertoc';vara=y.appendChild(document.createElement('span

JavaScript DOM学习第四章 getElementByTagNames getElementByTagNames(注意是复数的names)会获得一些tag的元素,然后按照他们的顺序保存在一个数组中。这非常的有用,比如在上一章的TOCScript中,就需要

标签: js domcontentloaded

本文链接地址:https://www.jiuchutong.com/biancheng/381849.html 转载请保留说明!

上一篇:javascript 函数速查表(js函数详解)

下一篇:JavaScript DOM 学习第二章 编辑文本(js中dom的用法)

  • 旅游业成本具体有哪些
  • 企业的其他业务收入包括哪些
  • 律师事务所的所训
  • 应付职工薪酬期末余额怎么算
  • 多交的所得税如何做分录
  • 企业提供建筑服务,应向建筑服务发生地
  • 总公司可以给分公司买车吗
  • 退休工资的个人账户怎么算
  • 车子按揭利息
  • 结转销项税额至未交增值税的结转系数
  • 社保计入管理费用还是成本
  • 印花税已经缴纳了还需要申报
  • 营改增后建筑业税率变化情况
  • 简要回答建筑企业如何实现利润最大化
  • 营改增后甲供材税前扣除还是税后扣除?
  • 免税投资背后的风险,你都清楚吗?
  • 增值税专用发票校验码是哪个位置
  • 企业所得税减免税额计算公式
  • 笔记本恢复出厂设置后和新的一样吗
  • 企业纳税申报的流程
  • 其他应付款长期挂账税务处理
  • 银行与银行之间转账会计摘要
  • 用系统自带命令行安装WIN10
  • adb命令linux命令的区别
  • 减免税款账务处理
  • 出口企业要缴纳印花税吗
  • 激光雷达lidar特点
  • 公司注销实收资本退回需要交税吗
  • 先款还是先票
  • 个人所得税专项附加扣除标准一览表
  • 公司股东会和董事会
  • mongodb $nin
  • 应收处理的两大内容是什么
  • 临时聘用人员管理办法
  • 金蝶k3费用发票怎么生成凭证
  • 房屋租赁需要计提印花税吗
  • 小规模纳税人有几种税率
  • 基于stm32的毕业设计
  • sql按照日期范围查询
  • 中标的工程交易怎么处理
  • 土地使用权被政府收回要交个税吗
  • 教育行业税收优势分析
  • 制造费用账户在月末一般没有余额
  • 企业固定资产对应哪个科目
  • 收到银行电子汇票已入账怎么做账
  • 主营业务成本如何设置明细
  • 实际利率法如何理解
  • 失业保险稳岗返还计入什么科目
  • 更正申报所得税汇算清缴
  • 哪些业务可以开专票
  • 转账支票的密码需要填写吗
  • 怎么看懂自己的收入纳税
  • 生物性资产是什么科目
  • 税收奖励账务处理
  • sql server怎么执行
  • mysql数据库输入汉字是问号
  • mysql in的子查询
  • 分配服务器失败
  • win10禁用所有启动项
  • win10系统迅雷
  • 如何关闭safari
  • ubuntul
  • freebsd使用
  • linux怎么看历史记录
  • ati2plab.exe是什么进程 ati2plab进程安全吗
  • windows7调制解调器在在哪里打开
  • win7z
  • ubuntu20.04安装配置
  • android系统架构图
  • 趣谈 linux 操作系统
  • 日常办公常用的批处理脚本
  • perl实例
  • Node.js中Bootstrap-table的两种分页的实现方法
  • AndroidAnnotations框架Eclipse下的配置
  • android对话框setview用法
  • 北京中石化开增票各区网点
  • 河南新乡地税局罗姓病逝
  • 车船税完税证明开具如何开具
  • 发票 报销流程
  • 湖州市2020年最低生活保障
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设