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

时间: 2018-06-28阅读: 1844标签: 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.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

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

简述dom diff原理

关于react的虚拟dom以及每次渲染更新的dom diff,网上文章很多。但是我一直信奉一个原则,即:但凡复杂的知识,理解之后都只需要记忆简单的东西,而想简单、精确描述一个复杂知识,是极困难的事。

JavaScript DOM事件模型

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

JavaScript中易混淆的DOM属性及方法对比

ParentNode.children:该属性继承自ParentNode,返回值是一个HTMLCollection实例,成员是当前节点的所有元素子节点,该属性只读,且该属性是动态集合。Node.prototype.childNodes:该属性继承自Node,返回值是一个NodeList实例,成员是当前节点的所有子节点(包括但不限于元素子节点),该属性也是个动态集合。

js操作DOM对象

使用document.createElement()可以创建新元素。这个方法只接受一个参数,即要创建元素的标签名。这个标签名在HTML文档中不区分大小写,在XHTML中区分大小写。

实现虚拟DOM

该程序向全局暴露了一个Vdom对象,Vdom提供了两个方法,createElement(),render(),分别用于创建元素及把虚拟dom渲染到真实dom节点

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

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

virtual DOM是如何优化性能的?

浏览器接收到html文件,并转换成DOM树。如果有css还会生成css树。如果遇到script标签,会先判断是async或defer。如果是前者会并行下载并执行js,后者会先下载,等html解析完后顺序执行。 当构建后dom树和css树后

一段监视 DOM 的神奇代码

通过使用此模块,只需将鼠标悬停在浏览器中,即可快速查看DOM元素的属性。基本上它是一个即时检查器。将鼠标悬停在 DOM 元素上会显示其属性!

Vue 数据更新后调用nextTick更新DOM

如果你想基于更新后的 DOM 状态来做点什么,这就可能会有些棘手。虽然 Vue.js 通常鼓励开发人员使用“数据驱动”的方式思考,避免直接接触 DOM,但是有时我们必须要这么做。为了在数据变化之后等待 Vue 完成更新 DOM

React虚拟DOM

其中浏览器展示HTML经过了:构建DOM树,解析CSS构建CSSOM树,DOM与CSSOM结合成为RenderObject树,然后将RenderObject树渲染成页面(布局->重绘),这个过程是由渲染引擎做的

点击更多...

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