课程名称:JavaScript进阶篇
课程章节: DOM对象,控制HTML元素
主讲老师:慕课官方号
课程内容:
今天学习的内容包括: 什么是DOM,以及DOM中的getElementsByName
、getElementsByTagName
、getElementByID
、getElementsByName
、getElementsByTagName
以及getAttribute
等方法的说明和使用。
课程收获:
DOM
全称是Document Object Model
,意思是文档对象模型DOM
,用来定义访问和处理HTML
文档的标准方法。DOM
将HTML
文档呈现为带有元素、属性和文本的树结构(节点树)。
将HTML代码分解为DOM节点层次图如下:
HTML文档可以说由节点构成的集合,DOM节点有元素节点
、文本节点
、属性节点
。其中节点属性有下面几种:
遍历节点树的方法有以下几种:
getElementsByName
方法返回带有指定名称的节点对象的集合。使用方法document.getElementsByName(name)
,我们需要注意的是与getElementById()
方法不同的是,通过元素的 name
属性查询元素,而不是通过 id
属性。而且因为文档中的 name
属性可能不唯一,所有 getElementsByName()
方法返回的是元素的数组,而不是一个元素。 和数组类似也有length
属性,可以和访问数组一样的方法来访问,从0
开始。
getElementsByTagName
方法返回带有指定标签名的节点对象的集合。返回元素的顺序是它们在文档中的顺序。使用方法document.getElementsByTagName(Tagname)
,其中 Tagname
是标签的名称,如p
、a
、img
等标签名。和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和类以及标签。获取后我们可以对标签进行操作,我们还可以设置新的属性以及获取属性的值并且获取节点中的内容。