关闭

原生js获取DOM对象的几种方法

时间: 2018-06-28阅读: 1649标签: dom

1.通过id获取  

<div id="box"></div>
<script>
    let box= document.getElementById("box");
</script>

注意:getElementById()括号中的不需要在前面加“#”,因为方法就决定了括号中的值是一个元素的id值。该方法返回一个DOM对象。 


2. 通过class获取

<div class="box"></div>
<div class="box"></div>
<script>
    let boxCollection= document.getElementsByClassName("box");
    let box1 = boxList[0];
    let box2 = boxList[1];
</script>

注意:getElementsByClassName()括号中的不需要在前面加 “.” ,因为方法就决定了括号中的值是一个元素的class值。该方法返回一个集合。不能直接给集合绑定事件,需要获取到集合中的某一个元素,然后再为元素绑定事件。 

3. 通过标签名获取

<div id="box">
    <p>段落1</p>
    <p>段落2</p>
    <p>段落3</p>
    <p>段落4</p>
    <p>段落5</p>
    <p>段落6</p>
</div>
<script>
    let pCollection= document.getElementsByTagName("p");
</script>

注意: 该方法返回的也是一个集合。 


4. 通过name属性获取

<div id="box">
    <input type="text" name="user" />
</div>
<script>
    let userInput= document.getElementsByName("user");
</script>

注意:只有含有name属性的元素(表单元素)才能通过name属性获取 


5. 通过querySelector获取

<div id="box"></div>
<script>
    let box= document.querySelector("#box");
</script>

注意:querySelector()方法括号中的值是元素的选择器,所以前面加了”#”符号,使用的是id选择器。此方法直接返回DOM对象本身。 

6. 通过querySelectorAll获取

<div class="box">box1</div>
<div class="box">box2</div>
<div class="box">box3</div>
<div class="box">box4</div>
<div class="box">box5</div>
<script>
    let box1= document.querySelector(".box");
    let boxes= document.querySelectorAll(".box");
</script>

注意:querySelector()和querySelectorAll()方法括号中的取值都是选择器,但从图中我们可以看出,两个方法是有区别的。当有多个class相同的元素时,使用querySelector()方法只能获取到第一个class为box的元素,而querySelectorAll()获取到了所有class为box的元素集合。


总结:

  1. 所有获取DOM对象的方法中,只有getElementById()和querySelector()这两个方法直接返回的DOM对象本身,可直接为其绑定事件。
  2. getElementXXX类型的方法,除了通过Id获取元素,其他都返回一个集合,如果需要取到具体的DOM元素,需要加索引,如:document.getElementsByClassName(“box”)[0] =>获取class为box的所有元素中的第一个DOM元素。
  3. querySelector()与querySelectorAll()两者的联系与区别: 
    联系: 两者括号中的取值都是选择器 
    区别: 当有多个class相同的元素时,使用querySelector()方法只能获取到第一个class为box的元素,而querySelectorAll()获取到了所有class为box的元素集合。


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/901

为什么虚拟DOM更优胜一筹

我们回顾传统MVC框架,如backbone,它是将某个模板编译成模板函数,需要更新时,是自己手动将数据整体传入模板函数, 得到一个字符串,使用innerHTML刷新某个容器!注意,这里其实可以优化,但由于是手动,是体力活

JavaScript DOM事件模型

早期由于浏览器厂商对于浏览器市场的争夺,各家浏览器厂商对同一功能的JavaScript的实现都不进相同,本节内容介绍JavaScript的DOM事件模型及事件处理程序的分类。

javascript中DOM是什么?

DOM(document object model)文档对象模型,是一项W3C 标准,是针对HTML和XML的一个API(应用程序接口)。它允许程序和脚本动态地访问、更新文档的内容、结构和样式。

从 React 历史的长河来聊如何理解虚拟DOM

最近我发现很多面试题里面都有「如何理解虚拟 DOM」这个题,我觉得这个题应该没有想象中那么好答,因为很多人没有真正理解虚拟 DOM 它的价值所在,我这篇从虚拟 DOM 的诞生过程来引出它的价值以及历史地位,帮助你深入的理解它。

HTML文档解析和DOM树的构建

浏览器解析HTML文档生成DOM树的过程,以下是一段HTML代码,以此为例来分析解析HTML文档的原理.解析HTML文档构建DOM树的理解过程可分为两个主要模块构成,即标签解析、DOM树构建

js实现DOM遍历_遍历dom树节点方法

遍历DOM节点常用一般用节点的 childNodes, firstChild, lastChild, nodeType, nodeName, nodeValue属性。在获取节点nodeValue时要注意,元素节点的子文本节点的nodeValue才是元素节点中文本的内容。

详解 HTML attribute 和 DOM property

在大多数的文章中,attribute 一般被翻译为“特性”,property 被译为“属性”。把结论写在最前面,如果你全都懂,后面就不用看了。当我们书写 HTML 代码的时候

如何遍历DOM

在本文中,我们了解了DOM 是如何构造成节点树的,节点树通常是HTML元素、文本或注释,我们创建了一个脚本,允许用户修改网站,而不必手动在开发人员控制台中输入代码。

什么是DOM及DOM操作?

DOM(文档对象模型)是针对于xml但是扩展用于HTML的应用程序编程接口,定义了访问和操作HTML的文档的标准。W3C文档对象模型是中立于平台和语言之间的接口

JavaScrip之DOM

HTML 文档的骨干是标签。根据文档对象模型(DOM),每个HTML标签都是一个对象,同样标签内的文本也是一个对象。因此这些对象都可通过 JavaScript 操作,如果文档中有空格(就像任何字符一样)

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!