html 通过name选择器,用name方式获得选择器总结

摘要：DOM：Document Object Model，即文档对象模型。DOM指的是当前要操作的文档内容，在很多时候，我们需要获取文档中的元素，而使用DOM方法无疑会更规范且方便。在DOM中可以获取元素，主要有这五种常见的方法:1.      根据id选择元素;2.      根据name属性来获取元素

DOM：Document Object Model，即文档对象模型。DOM指的是当前要操作的文档内容，在很多时候，我们需要获取文档中的元素，而使用DOM方法无疑会更规范且方便。

在DOM中可以获取元素，主要有这五种常见的方法:

1.      根据id选择元素;

2.      根据name属性来获取元素;

3.      根据标签名Tag来获取元素;

4.      通过class属性选取元素;

5.      使用css选择器来获取元素。

由id选择元素时，可以使用id属性获取元素。给一带有id的标签，通过document.getElementById('id名')的方式来获取元素，为简化操作可以将之存放于一个自己设置的变量中，可以直接对从存放此id的变量进行样式的设计来控制相应的功能样式。若需要使用多个id来获取元素,可以通过函数来简化操作。

由name属性来获取元素时，因为拥有name属性的元素最常见的就是表单以及表单中的元素，再就是图像和内联框架。在表单中给对应标签相关的name名，同样先创建一个变量名，具体写法是let 变量1 = document.getElementsByName('name名')[0]，这样可以返回一个NodeList节点列表，不只是一个元素。还可以将name属性的值，当作docuemtn对象的属性来用，返回唯一元素。写法为let 变量2 = document.name值，再通过对变量2的控制以达到对相关元素的控制。

根据标签名Tag来获取元素使用getElementsByTagName()的方式，这样会返回一个元素集合，有length属性,可以当数组来访问。元素集合是一个对象，可以用item()方法获取指定元素。getElementsByTagName()不仅在document对象上有定义，在Element元素对象上也有定义。可以在父级元素调用该方法，获取自己元素并控制其功能。

使用标签名和name属性选择有几种快捷方式，仅用于极少数标签，有images标签、forms标签、a 链接、body、head、html以及doctype。可以直接在用如document.images[0].style.color= 'pink';的方式，这样特殊的标签使用这样的快捷方式会更简单。

通过class属性选取元素时，可以通过document.getElementsByClassName('class名')的方式获取元素。返回一个html元素集合，与根据标签名获取的返回数据类型完全一样。该方法也支持在父元素上调用也同样支持多个class属性值。

由使用css选择器来获取元素时，在选择页面的时候，很多时候使用css选择器获取元素，使用querySelector返回第一个元素和querySelectorAll返回节点列表数组的方式获得相关元素，这种方法也可以在元素中调用，类似与根据标签和class名获取元素。

批改老师：查无此人批改时间：2019-03-14 09:18:33

老师总结：写的不错。js一定要学扎实，因为不管前端还是后端工程师，基本都要用。继续加油