连bootstrap5 都抛弃jquery了,重新使用原生js来写,所以最近在学习原生js。

一、选择dom元素:

id

 let sure=document.getElementById('sure');

返回值:是一个dom元素,因为id在一个文档(document)中,是唯一,所以返回一个dom对象。

class

  let mask=document.getElementsByClassName('mask')[]

返回值:类数组的元素集合

因为className在一个文档中并不是唯一,我们在使用document查找是从文档的根节点进行查找,返回是类数组对象,即nodeList 类数组有length 以及可以根据下标获取元素。

我们也可以修改查找的起点。比如上面的是document开始,我们可以从div或者更小的局部元素进行查找。

querySelector

上面的方法并不灵活,有时候我们根据css选择器来进行选择。我们可以使用querySelector(css选择器);来进行选择元素。

 let clkBtns=document.querySelector('.wrap button');

返回值:匹配的第一个html元素。

querySelectorAll()

如果我们查找一组元素使用如上方法。返回的也是类数组。

二、dom元素的特性都包含在属性中。

let box=document.querySelector('#box');
reset.onclick=function (e) {
box.style.cssText="background:'white',height:'100px',width:'100px'";
}

包含事件以及样式以及style等等。

原生js学习 选择dom的更多相关文章

  1. 原生js快速渲染dom节点

    function renderDom(str){ var _div = document.createElement('div'); _div.innerHTML = str; var dom_tem ...

  2. [笔记]原生JS实现的DOM操作笔记

    原生JS实现的DOM一系列操作参考: 原生JavaScript封装DOM库 siblings: 原生JS-查找相邻的元素-siblings方法的实现 addClass,removeClass,hasC ...

  3. js学习笔记--dom部分(一)

    js 学习整理之Dom部分 前面我总结了我最近学习js基础部分,当时提到过js分了三大部分,第一部分ECMA基础也就是第一次写的基础部分, 第二部分也就是DOM部分,也就是这里要写的内容的,然后第三部 ...

  4. JS学习之DOM节点的关系属性封装、克隆节点、Dom中Style常用的一些属性等小结

    JS DOM节点: 在JS DOM中节点的关系被定义为节点的属性: 通常有以下几种节点之间的关系: (这里的关系是所有浏览器都支持的) parentNode    父节点 childNodes     ...

  5. 【京东详情页】——原生js学习之匿名函数

    一.引言 在js模块中,要给每一个功能封装一个匿名函数.为了更好的理解什么是匿名函数,为什么要用匿名函数,我做了一些查阅和学习. 二.匿名函数 什么是:在创建时,不被任何变量引用的函数. 为什么:节约 ...

  6. 原生JS获取HTML DOM元素的8种方法

    JS获取DOM元素的方法(8种) 通过ID获取(getElementById) 通过name属性(getElementsByName) 通过标签名(getElementsByTagName) 通过类名 ...

  7. 原生JS学习之秒表、日历

    Tips:涉及知识点:Date   setInterval    DOM    秒表 效果图: 简单构造出草图 Html代码 1 <!DOCTYPE html> 2 <html> ...

  8. 原生js 学习之array 数组

    Array的原生方法:  concat(): 连接两个或更多的数组哦 join(): 把数组的所有元素放在一个字符串中 pop():删除并返回数组的最后一个元素 push():向数组的末尾添加一个元素 ...

  9. 原生js动态改变dom高度

    item参数为要改变高度的dom,maxHight参数为dom的最大高度,speed参数为改变高度的速度function addHeight(item,maxHight,speed){ var ite ...

随机推荐

  1. JS中的柯里化(currying)

    何为Curry化/柯里化? curry化来源与数学家 Haskell Curry的名字 (编程语言 Haskell也是以他的名字命名). 柯里化通常也称部分求值,其含义是给函数分步传递参数,每次传递参 ...

  2. eclipse中maven项目jar包不会自动下载解决办法

    Eclipse中maven从远程仓库中下载jar包有时会很慢,有些甚至进度停止不动,这个时候我们可能会终止当前下载,但是终止jar包下载后会出现一个问题,再次打开Eclipse时,你会发现提示你项目中 ...

  3. 如何训练AI

    如何训练AI让其更加智能,而不是用特定的代码控制AI逻辑! AI守则 首先应该为机器人设置几个必要信息: 目标 规则 能力 目标,规定机器人要做到什么. 规则,规定机器人的限制,不能做什么. 能力,规 ...

  4. JSON基础知识点

    一.介绍: JSON是一种轻量级的数据交换格式.易于人阅读和编写.同时也易于机器解析和生成. 二.数据格式: 1.JSON建构于两种数据格式: “名称/值”对(键值对)的集合,不同的语言中,它被理解为 ...

  5. js时间戳转化时间格式

    // 判断是否前面补0 add0 (m) { return m < 10 ? '0' + m : m }, // 时间转化 timeFormat (timestamp) { // timesta ...

  6. oracle中print_table存储过程介绍

    一直以来,觉得MySQL中使用\G参数改变输出结果集的显示方式非常好用,尤其是在命令行界面.但是ORACLE数据库没有这个功能,今天在搜索到Tom大师的一篇博文时,发现大师用一个存储过程print_t ...

  7. java质数判断

    import java.util.Scanner; /** * Created by Admin on 2017/3/25. */ public class test01 { public stati ...

  8. 移动端 input样式在安卓与ios上不同的解决方案

    input{ -webkit-appearance:none; }

  9. c/c++ 函数模板初探

    函数模板初探 1,由来:有时候,函数的逻辑是一样的,只是参数的类型不同,比如下面 int Max(int a, int b){ return a > b ? a : b; } double Ma ...

  10. 基数排序python实现

    基数排序python实现 基数排序 基数排序(英语:Radix sort)是一种非比较型整数排序算法,其原理是将整数按位数切割成不同的数字,然后按每个位数分别比较.由于整数也可以表达字符串(比如名字或 ...