javascript 原生得到document.Element的方法

Posted 2020-09-26 不是一般的菜

　　今天这里写这个博客的主要目的是记录一下javascript原生的选择dom的集中方法。

　　1.document.getElementById。这个方法接收1个参数，就是DOM元素的id（区分大小写），改这也是平时用的最多的方法，并且用这种方法DOM查找的效率是最高的，所以如果能用id查找的dom元素尽量用id来查询，返回的类型是DOM ELEMENT。

　　2.document.getElementsByTagName。这个方法接收1个参数，需要查询的元素标签（不区分大小写）。返回的是一个 htmlCollection集合。由于HTMLCollection中存在方法item()和namedItem()这两个方法，所以需要取到特定的元素就有2种方法，例：var tags = document.getElementsByTagName("div");

• 1 通过item取值。传入的是一个数值型的参数,代表在集合中的位置。var div1 = tags.item(0)。取得tags中的第一个元素。当然也可以用tags[0]来表示。
• 2 通过namedItem来取值。传入的1个参数，可以是需要查找元素的id或者是name。var div1 = tags.namedItem("name")。取到id或者name为“name”的元素。也可以用tags["name"]来表示，结果相同。

　　3.document.getElementsByName。该方法接收1个参数，查找元素的name特性，不是id（区分大小写）。返回的是一个NodeList类型的集合。其中带有方法item。使用的方法和方法2类似，但是由于没有namedItem方法，所以不能通过namedItem和["name"]来获取到相关元素。

　　4.document.getElementsByClassName。该方法接收1个参数，需要查找元素的class名。可以包含一个或多个类型的字符串，返回的类型也是HTMLCollection集合。比如需要查找带有red、blue类的元素，可以用document.getElementsByClassName("red blue")。类名的先后顺序无所谓。然后用与方法2相同的方式选择某个元素。

　　5.querySelector。该方法接收1个参数，一个css选择符。如果没有找到匹配的元素返回的就是null，如果找到匹配的元素就返回第一个匹配的元素。比如var body = document.querySelector("body")。如果传入的css选择符出错，则会抛出错误。

　　6.querySelectorAll。接收的参数也是一个css选择符。返回的类型是一个NodeList集合。底层实现则类似于一组元素的快照，并非不断对文档进行搜索的动态查询。如果传入的css选择符出错，则会抛出错误。