继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

【学习打卡】第11天 DOM操作方法

周帅帅Love
关注TA
已关注
手记 86
粉丝 5
获赞 96

课程名称:JavaScript进阶篇

课程章节: DOM对象,控制HTML元素

主讲老师:慕课官方号

课程内容:

今天学习的内容包括: 什么是DOM,以及DOM中的getElementsByNamegetElementsByTagNamegetElementByIDgetElementsByNamegetElementsByTagName以及getAttribute等方法的说明和使用。

课程收获:

DOM全称是Document Object Model,意思是文档对象模型DOM,用来定义访问和处理HTML文档的标准方法。DOMHTML文档呈现为带有元素、属性和文本的树结构(节点树)。

将HTML代码分解为DOM节点层次图如下:

HTML文档可以说由节点构成的集合,DOM节点有元素节点文本节点属性节点。其中节点属性有下面几种:

遍历节点树的方法有以下几种:

getElementsByName方法返回带有指定名称的节点对象的集合。使用方法document.getElementsByName(name),我们需要注意的是与getElementById() 方法不同的是,通过元素的 name 属性查询元素,而不是通过 id 属性。而且因为文档中的 name 属性可能不唯一,所有 getElementsByName() 方法返回的是元素的数组,而不是一个元素。 和数组类似也有length属性,可以和访问数组一样的方法来访问,从0开始。
图片描述

getElementsByTagName方法返回带有指定标签名的节点对象的集合。返回元素的顺序是它们在文档中的顺序。使用方法document.getElementsByTagName(Tagname),其中 Tagname是标签的名称,如paimg等标签名。和getElementsByName一样,和数组类似也有length属性,可以和访问数组一样的方法来访问,所以从0开始。

getElementByID相当于我们的身份证,每个身份证号都是唯一的。getElementsByName相当于我们的名字,是可以被重复使用的。getElementsByTagName用来获取相同类的人集合,相当于我们分为大人,小孩这几类,从而很容易区分这几类。

上面的方法都是区分大小写的。

getAttribute通过元素节点的属性名称获取属性的值。使用方法elementNode.getAttribute(name),其中 elementNode表示使用getElementById()getElementsByTagName()等方法,获取到的元素节点。name表示要想查询的元素节点的属性名字。
图片描述

setAttribute() 方法增加一个指定名称和值的新属性,或者把一个现有的属性设定为指定的值。使用方法elementNode.setAttribute(name,value),其中name表示要设置的属性名,value表示要设置的属性值。我们需要注意的是把指定的属性设置为指定的值。如果不存在具有指定名称的属性,该方法将创建一个新属性。而且setAttribute()方法只能通过元素节点对象调用的函数。

今天学习的DOM对象,控制HTML元素的前6小结,花费了60分钟,学到了获取DOM的元素中id和类以及标签。获取后我们可以对标签进行操作,我们还可以设置新的属性以及获取属性的值并且获取节点中的内容。

打开App,阅读手记
1人推荐
发表评论
随时随地看视频慕课网APP