位置: 编程技术 - 正文

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的用法)

  • 整形医院有收费标准么
  • 购进货物未取得增值税专用发票可以抵扣进项税额吗
  • 有没有退股一说
  • 一般纳税人技术服务免税发票怎么开
  • 房地产开发企业资质证书
  • 债务重组损益的计算公式
  • 预付账款冲销其他应付款法人吗
  • 房地产开发企业销售自行开发的房地产项目
  • 转售水的税率
  • 出售无形资产的会计科目
  • 商业地产会计核算流程
  • 企业收到税务局退税分录
  • 一般纳税人进项发票认证操作流程
  • 会员卡退钱是退全额吗
  • 新会计准则要求
  • 餐饮公司收到的拍摄服务票做什么费用
  • 总资产周转率计算公式用不用乘100%
  • 季节工有工伤吗
  • 税负原则
  • 纳税人识别号在哪里能查到
  • 签订借款合同要遵守规则吗
  • 内部退养个税计算方式
  • 原材料损失计入
  • 抄税和申报是一回事吗
  • 分期收款销售的商品属于存货吗
  • 社保打的生育保险怎么做账
  • 增值使用费可取消吗?
  • win11windows键没反应
  • 会计管理制度范本
  • php开源软件
  • 生产运维是干什么的
  • 腾达ac9路由器怎么样
  • 研究院经营范围怎么写
  • 鸟瞰视野
  • js技术干货分享
  • 施工单位奖项名称大全
  • 零售业如何盈利
  • 分期收款企业所得税确认时间
  • 承包安装工程活怎么接
  • ps怎么抠的干净
  • 帝国cms使用手册
  • 分类信息有哪些网站
  • 帝国cms采集教程
  • 政府会计准则的双报告
  • 往来款项的含义
  • 以旧换新有发票抵扣吗
  • 公司处理旧车增值税怎么交
  • 境外服务费代扣代缴所得税怎么做账
  • 股权转让会计分录借银行存款
  • 预付账款是负数有什么税收风险
  • 银行承兑汇票收款人是谁
  • 服务行业收入会增加吗
  • 所得税汇算清缴前取得跨年发票
  • 淘宝卖家运费险为什么越来越贵
  • 银行存款日记账与银行对账单之间的核对属于
  • 资金结存属于资产类吗
  • 发票商品编码表
  • windows8.1分辨率
  • 升级win10后无法修改magicbook开机画面
  • Win10 Mobile 14342.1004快速预览版更新 提升电池续航
  • win7网上邻居怎么共享文件数据
  • windows10地图用不了
  • windows8截图保存在哪里
  • windows10直接安装
  • dosbox批处理
  • oracle sql mysql
  • 注册表cmd
  • perl sub
  • perl列表去重
  • html5字体闪烁
  • bat 批处理文件
  • unity3d课程
  • nodejs inspect
  • unity接收数据
  • python import ssl
  • 贵州省电子税务局操作手册
  • 河北电子税务局移动端
  • 银行税务代扣需要什么材料
  • 个人所得税申报怎么申报
  • 重庆投诉平台电话
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设