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

课程名称：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和类以及标签。获取后我们可以对标签进行操作，我们还可以设置新的属性以及获取属性的值并且获取节点中的内容。