从零开始学WEB前端——JavaScript-DOM操作，干货满满

用name属性获取

HTML的name属性最初打算为表单元素分配名字，在表单数据提交到服务器时使用该属性的值。类似id属性，name是给元素分配名字，但是区别于id，name属性的值不是必须唯一：多个元素可能有同样的名字，在表单中，单选和复选按钮通常是这种情况。而且，和id不一样的是name属性只在少数HTML元素中有效，包括表单、表单元素、和元素。基于name属性的值选取HTML元素，可以使用Document对象的getElementsByName（）方法。

getElementsByName（）定义在HTMLDocument类中，而不在Document类中，所以它只针对HTML文档可用，在XML文档中不可用。它返回一个NodeList对象，后者的行为类似一个包含若干Element对象的只读数组。在IE中，getElementsByName（）也返回id属性匹配指定值的元素。为了兼容，应该小心谨慎，不要将同样的字符串同时用做名字和ID。

用标签获取

Document对象的getElementsByTagName（）方法可用来选取指定类型（标签名）的所有HTML或XML元素。例如，如下代码，在文档中获得包含所有元素的只读的类数组对象：

获取属性

HTML元素由一个标签和一组称为属性（attribute）的名/值对组成。例如，元素定义了一个超链接，它的href属性值作为链接的目的地址。HTML元素的属性值在代表这些元素的HTMLElement对象的属性（property）中是可用的。DOM还定义了另外的API来获取或设置XML属性值和非标准的HTML属性。

比如下面的获取图片标签的属性。

获取元素内容

在DOM中我们可以通过innerHTML 或者 innerText 来获取内容。操作如下：

同时我们也可以使用这两个属性给标签设置内容，但是我们需要知道这两个属性在设置内容上的区别，innerHTML 如果设置的内容含有标签的话会渲染，而 innerText 则不会渲染。

具体如下：

获取表单数据

我们可以使用value 属性来获取表单的数据。

具体代码如下：

用户名：

密码：

性别：男

女

创建节点

---

创建新的Element节点可以使用Document对象的createElement（）方法。给方法传递元素的标签名：对HTML文档来说该名字不区分大小写。

让我们来看一个案例：

• 123

• 具体效果如下：

  

  插入节点

  ---

  我们再来看一个留言发布的案例

  

  具体代码如下：

  发布

  删除节点

  ---

  在上面插入节点的案例上，我们来引入删除节点。点击删除的时候，留言的内容会被删除掉。

  

  发布

  事件

  ---

  事件本身并不是一个需要定义的技术名词。简而言之，事件就是Web浏览器通知应用程序发生了什么事情。

  常见的事件：

  • 文档加载和准备就绪事件

  • 鼠标事件

  • 鼠标滚轮事件

  • 拖放事件

  • 键盘事件

  • 文本输入事件

  我们之前使用到的onclick 就是点击事件。接下来我们用两个案例来介绍一下事件。

  当我们在浏览器按下键盘的s 的时候会聚焦到输入框中。

  

  第二个案例：当我们在输入框里输入内容的时候，上方会出现一个文本框，里面输出我们输入的内容。