javascript 原生得到document.Element的方法

　　今天这里写这个博客的主要目的是记录一下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选择符出错，则会抛出错误。

转载于:https://www.cnblogs.com/cmxwt/p/7110393.html

javascript 原生得到document.Element的方法相关推荐

document,element,node方法
document方法: getElementById(id) 返回指定结点的引用 getElementsByTagName_r(name) ...
javascript原生事件句柄、BOM、DOM对象属性方法总结
javascript原生事件句柄.BOM.DOM对象属性方法总结 JS事件句柄事件句柄类型说明 onabort 事件句柄图像加载被中断 onblur 事件句柄元素失去焦点 onfocus 事 ...
javascript写css样式,原生javascript实现读写CSS样式的方法详解
原生javascript实现读写CSS样式的方法详解发布于 2017-05-24 15:05:31 | 120 次阅读 | 评论: 0 | 来源: 网友投递 JavaScript客户端脚本语言Jav ...
JavaScript原生添加移除class的方法
转载自 JavaScript原生添加移除class的方法 1.JavaScript原生移除class方法 window.onload = function () {var stamp = docum ...
javascript 原生类 DOMParser 把字符串格式的HTML文档源码转换成 document DOM对象
文章目录 Intro QA DOMParser 在 console 的使用 cheerio 在 node 项目中的使用 Reference 测试 sum Intro 有一天我在写爬虫. 其实也说不上是 ...
JavaScript核心之Document对象详解（document属性，方法）
目录 1 Document节点概述 2 document节点的属性 2.1 doctype,documentElement,defaultView,body,head,activeElement 2. ...
php拼图游戏开发,原生javascript制作的拼图游戏实现方法详解
本文实例讲述了原生javascript制作的拼图游戏实现方法.分享给大家供大家参考,具体如下: 实现方法 //1.让所有的li(在ul里)可以拖拽 //2.交换li的位置计算背景图位置 //1.让 ...
vue 加载页面时触发时间_5.6 vue更新数组时触发视图更新的方法，熟记JavaScript原生方法...
问题:vue更新数组时触发视图更新的方法变异方法: Vue 包含一组观察数组的变异方法,所以它们也将会触发视图更新.什么是变异方法呢?简单理解就是改变了原来的数组,可能包括数组长度length,或者 ...
javascript 原生
引入JS 引入外部js代码存放在assets包中,因为android打包 H5 对assets 不进行编译默认用户代理从上至下读 ,正常 js 放置最低端 ,css 放置前面如果想要js放前面需要 ...

javascript 原生得到document.Element的方法

javascript 原生得到document.Element的方法相关推荐

最新文章

热门文章