位置: 编程技术 - 正文

JavaScript中对DOM节点的访问、创建、修改、删除(js domcontentloaded)

编辑:rootadmin

推荐整理分享JavaScript中对DOM节点的访问、创建、修改、删除(js domcontentloaded),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:JavaScript中对象方法的创建,js中dom的用法,js对dom的操作,js dom操作方法,JavaScript中对象中声明的变量成为对象的,JavaScript中对象方法的创建,javascript中对象一般由什么组成,JavaScript中对象方法的创建,内容如对您有帮助,希望把文章链接给更多的朋友!

DOMDOM就是Document object Model的缩写。文档对象模型是把XML或HTML以树节点为表现形式的文档。用DOM方法和属性,你可以访问,修改,删除页面上任意一个元素,也是可以添加一个元素。DOM是独立于语言的API,可以被任意语言所实现,当然也包括了Javascript看看下面的一个文本。

我们来看看第二段

可以看到这是个p标签。它被包含在body标签中。所以说body是p的父节点,p是子节点。第一段和第三段也是body的子节点。它们都是第二段的兄弟节点。这个em标签是第二段p的子节点。因此p就是它的父节点。父子节点关系能描绘出像树一样的关系。所以叫做DOM结构树(DOM tree). Core DOM 和 HTML DOM我们已经知道DOM可以描绘出HTML和XML文档。事实上HTML文档就是XML文档,只不过更为规范些。因此作为DOM Level 1的一部分,Core DOM规范适用于所有XML文档以及HTML DOM规范扩展了Core DOM.当然HTML DOM不能适用于所有的XML文档,仅仅适用于HTML文档。让我们来看看Core DOM和HTML DOM的构造器。 构造器关系

访问DOM节点当要验证表单或者更换图片之前,我们要知道怎么样访问元素(element.)。有很多方法获取元素。 Document节点通过document我们可以访问当前的文档。我们可以通过firebugs(火狐插件),来查看document的属性和方法。 所有的节点都有nodeType,nodeName,nodeValue的属性。我们来看看document的nodeType是什么

一共有节点类型。document是9。常用的是元素(element:1),属性(attribute:2),文本(text:3)。节点还有名称。对于HTML标签。节点名称就是标签名称。文本节点(text)的名字是#text.文档节点(document)的名字是#document. 节点也有值。对于文本节点,值就是文本。document的值为null documentElementXML都会有个ROOT节点来包文档包含起来。对于HTML文档。ROOT节点就是html标签。访问root节点。可以用documentElement的属性。

Child Nodes为了确定是否包含子节点我们可以用如下方法

HTML有两个子节点。

也可以通过子节点访问父节点

我们把body的引用赋值变量

让我们看看body的结构

为什么子节点个数为9个呢。 首先是4个P还有一个注释一共4个。 4个节点包含了3个空白的节点。这就7个。 第8个在body和第一个p之间的空白节点。 第9个就是在注释与</body>之间的空白节点。 一共9个节点。 属性因为第一节点是空白节点,所以第二个节点才是第一个p标签。

可以查看它是否有属性

也可以查看attributes的个数

访问标签里的内容让我们看看第一个标签p你可以用textContent属性来访问。要注意的是,在IE浏览器中并不存在textContent,请用innerText来替换,结果都是一样的。

还有一个属性是innerHTML.这并不是DOM的规范。但是主流浏览器都支持这个属性。它返回的是HTML代码。

第一段没有html代码,所以结果和textContent(IE里是innerText)是一样的。来看下第二段包含HTML代码的标签

另一种方法可以获取文本节点,然后再取nodeValue属性,代码如下

快速访问DOM通过childNodes,parentNode,nodeName,nodeValue以及attributes,可以访问文档任意的节点了。但是在实际运用过程中,文本节点是比较讨厌的。如果文本改变了,有可能就影响脚本了。还有如果DOM树足够的深入,那么访问起来的确有些不方便。幸好我们可以用更为方便的方法来访问节点。这些方法是

首先说下getElementsByTagName()通过一个标签名称(tag name)来获取一个html元素的集合。例子如下

因为返回的是个集合,我们可以用过数组下标的形式来访问或者通过item方法。比较一下还是推荐用数组的访问方法。更简单一些。

访问元素的属性,可以用attributes集合。但是更简单的方法是直接作为一个属性来访问就行。看个例子

要注意的是,class属性不能正常的使用。。要用className。因为class在javascript规范中是保留字。

我们可以用如下方法访问页面所有元素

注意:在IE早期的版本不支持上述方法。可以用document.all来取代。IE7已经支持了,但是返回的是所有节点(node),而不仅仅是元素节点(element nodes)。 Siblings, Body, First, Last ChildnextSibling和previousSibling是两个比较方便访问DOM的方法。用来访问相邻的节点的。例子如下

JavaScript中对DOM节点的访问、创建、修改、删除(js domcontentloaded)

body 用来访问body元素的。

firstChild 和lastChild 。firstChild是和childNodes[0]一样.lastChild和 childNodes[childNodes.length - 1]一样。 遍历DOM通过以上的学习,我们可以写个函数,用来遍历DOM

修改节点下面来看看DOM节点的修改。先获取要改变的节点。

非常容易更改这个元素的属性。我们可以更改innerHTML.

因为innerHTML可以写入html,所以我们来修改html。

em标签已经成为dom树的一部分了。我们可以测试一下

我们也可以通过nodeValue来改变值。

修改样式大部分修改节点可能都是修改样式。元素节点有style属性用来修改样式。style的属性和css属性是一一对应的。如下代码

CSS属性很多都有破折号("-"),如padding-top,这在javascript中是不合法的。这样的话一定要省略波折号并把第二个词的开头字母大写,规范如下。 margin-left变为marginLeft。依此类推

我们还可以修改其他的属性,无论这些属性是否被初始化。

创建节点

为了创建一个新的节点,可以使用createElement和createTextNode.如果新建完成,可以用appendChild()把节点添加到DOM树中。创建一个元素P,并把设置innerHTML属性

元素P建完成了,就可以随意修改添加属性了

接下来可以用appendChild把新的节点添加到DOM树中的。

使用DOM的方法用innerHTML方法的确很简单,我们可以用纯的dom方法来实现上面的功能。

新建一个文本节点(yet another) 新建一个段落 把文本节点添加到段落中。 把段落添加到body中

另一种新建节点的方法是,我们可以用cloneNode来复制一个节点。cloneNode()可以传入一个boolean参数。如果为true就是深度复制,包括他的子节点,false,仅仅复制自己。 首先获取要复制的元素。

先不用深度复制。

我们发现页面并没有变化,因为仅仅复制的是元素p。和下面的效果一样。

如果用深度复制,包括p下面所有的子节点都会被复制。当然包括文本节点和EM元素。

insertBefore()用appendChild,就是把元素添加到最后。而insertBefore方法可以更精确控制插入元素的位置。

实例

意思就是新建一个文本节点,把它作为body元素的第一个节点。 删除节点

要从DOM树删除一个节点,我们可以使用removeChild().我们来看看要操作的HTML

来看看下面代码,删除第二段

removed节点就是删除的节点。以后还可以用这删除的节点。 我们也可以用replaceChild()方法。这个方法是删除一个节点,并用另一个节点替代。当执行上个删除节点操作之后,结果如下

我们来看看replaceChild的使用。我们把上一个删除节点来替代第二个p

和removeChild返回一样。replaced就是移除的节点。现在结果为

举例讲解JavaScript中关于对象操作的相关知识 从数组到对象varmyarr=['red','blue','yellow','purple'];myarr;//["red","blue","yellow","purple"]myarr[0];//"red"myarr[3];//"purple'数组大家都很熟悉吧,我们可以理解为一个Key对

JavaScript函数学习总结以及相关的编程习惯指南 null和undefinedUndefined相当于一个变量并没有明确的被赋值(是否被赋值,可能无心忽略,逻辑问题)JS的怪异之处就在于undefined真的是一个可以使用的值。varfoo;

举例说明如何为JavaScript的方法参数设置默认值 你是否遇到过这样的情况,写了个function,无参数。functionshowUserInfo(){alert("你好!我是小明。");}functionshowUserInfo(){alert("你好!我是小明。");}调用:showUse

标签: js domcontentloaded

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

上一篇:为何JS操作的href都是javascript:void(0);呢(下眼角疼痒)

下一篇:举例讲解JavaScript中关于对象操作的相关知识(举例讲解水生花卉栽培管理)

  • 长期待摊费用一般指什么
  • 公司租的库房应该计入什么科目
  • 农机企业所得税税率
  • 合伙企业投资收益做账
  • 更改增值税申报表有退税会很麻烦吗
  • 小微企业免税收入有哪些
  • 以应税消费品抵偿债务的计税依据
  • 企业取得5%的房产增值税发票是否可以抵扣呢?
  • 以前年度多交所得税,跨年退回怎么做会计分录
  • 股权转让是把公司卖了吗
  • 无票收入应附什么单据
  • 过路费是地税还是国税
  • 增值税专用发票开错了咋办
  • 个人付款可以开发票吗
  • 房地产企业增值税预缴
  • 企业所得税清算是什么意思
  • 混凝土增值税政策
  • 所得税费用什么时候结转到本年利润
  • 税号里面字母是大写吗
  • 一般纳税人施工安装税点
  • 土地使用税每个月都要计提吗
  • 建筑物占用的土地怎么算
  • 增值税抵扣联退税多少
  • 工程施工纳税
  • 个人银行卡流水达到多少要交税
  • 存货折扣怎样做账
  • 筹建期间的广宣费
  • win10文件用什么打开
  • win10无法登录微信
  • 开了红字发票销售方应怎么账务处理?
  • 记账金额如何处理账户
  • 合伙企业利润分配个人所得税
  • 个人股权转让如何申报个人所得税
  • 电脑管家lol修复
  • 测速网在线测速
  • iphone中的照片如何找回
  • 如何制作win7系统u盘安装盘
  • 支付厂房租金计入什么科目
  • 最高像素的镜头是多少
  • 虚开发票的管理办法是什么?
  • PHP:mdecrypt_generic()的用法_Mcrypt函数
  • php throw
  • oss使用场景
  • php面向对象和面向过程
  • 金蝶怎么加人
  • 工商年报基本养老保险缴费基数
  • 织梦改logo
  • 公司银行销户钱转到哪里去
  • 开具利息收入发票需不需要有经营范围
  • 公司小规模纳税人转为一般纳税人,需要签补充协议吗
  • mysql 的load data infile
  • 年末已经结账了怎么入账
  • 信用证保证金的计算公式
  • 公司参赛获奖交啥税
  • 开公司合理避税的方法
  • 咨询费开发票应该选哪一项?
  • 预收物业费预收什么意思
  • 融资租赁的固定资产视为企业自有固定资产管理
  • winxp电脑显示器亮度怎么调
  • 加载dll错误是什么意思
  • 电脑怎么换系统教程
  • 手机用xp系统
  • macbookpro登陆
  • qbupdate.exe - qbupdate是什么进程 有什么作用
  • win7 windows检测到ip地址冲突怎么解决
  • win7任务管理器怎么调回原来样子
  • sendmail邮件服务器
  • win10系统怎么卸载ie浏览器
  • cocos2dx4.0入门
  • js message事件
  • 教你三招让电脑打字
  • css滚动条设置
  • unity物理引擎原理
  • js能实现的简单效果
  • jquery动态添加div
  • 国企巡查都巡查哪些内容
  • 张江税务所地址
  • 浙江增值税电子普通发票用支付宝怎么开
  • 内蒙古国家税务总局官网
  • 服务类发票 如何入账
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设