关闭

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

时间: 2018-06-28阅读: 1449标签: 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

要构建自己的虚拟DOM,需要知道两件事。你甚至不需要深入 React 的源代码或者深入任何其他虚拟DOM实现的源代码,因为它们是如此庞大和复杂——但实际上,虚拟DOM的主要部分只需不到50行代码。

为什么虚拟DOM更优胜一筹

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

通过编写简易版本的虚拟DOM,来理解虚拟DOM 的原理

要构建自己的虚拟DOM,需要知道两件事。你甚至不需要深入 React 的源代码或者深入任何其他虚拟DOM实现的源代码,因为它们是如此庞大和复杂

彻底搞懂虚拟Dom到真实Dom的生成过程

再有一棵树形结构的JavaScript对象后,我们现在需要做的就是将这棵树跟真实的Dom树形成映射关系,首先简单回顾之前遇到的mountComponent方法:

JavaScript的基础语法及DOM元素和事件

JavaScript简称:js,是一种浏览器解释型语言,嵌套在HTML文件中交给浏览器解释执行。主要用来实现网页的动态效果,用户交互及前后端的数据传输等。

JS中的DOM

$(document).ready():简写为$(function(){}) DOM结构绘制完成执行,而无需等到图片或其他媒体下载完毕;window.onload=function(){}:必须等到页面内包括图片的所有元素加载完毕后才能执行;

你知道虚拟Dom是怎么生成的吗?

在经过初始化阶段之后,即将开始组件的挂载,不过在挂载之前很有必要提一下虚拟Dom的概念。这个想必大家有所耳闻,我们知道vue@2.0开始引入了虚拟Dom,主要解决的问题是

全面理解虚拟DOM,实现虚拟DOM

DOM是很慢的,其元素非常庞大,页面的性能问题鲜有由JS引起的,大部分都是由DOM操作引起的。虚拟的DOM的核心思想是:对复杂的文档DOM结构,提供一种方便的工具,进行最小化地DOM操作。

vue的虚拟DOM有什么好处?

vue 中的虚拟DOM有什么好处?快!首先了解浏览器显示网页经历的5个过程 :1、解析标签,生成元素树(DOM树)2、解析样式,生成样式树3、生成元素与样式的关系

vue 使用 html2canvas将DOM转化为图片

现在项目开发中将DOM转化为图片是一个很常见的需求。于是决定使用html2canvas这个插件。PS:版本比较多,这里介绍最新版。生成出来的图片有白色边框,有图片显示不出来并有报错

点击更多...

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