原生js学习 选择dom
连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的更多相关文章
- 原生js快速渲染dom节点
function renderDom(str){ var _div = document.createElement('div'); _div.innerHTML = str; var dom_tem ...
- [笔记]原生JS实现的DOM操作笔记
原生JS实现的DOM一系列操作参考: 原生JavaScript封装DOM库 siblings: 原生JS-查找相邻的元素-siblings方法的实现 addClass,removeClass,hasC ...
- js学习笔记--dom部分(一)
js 学习整理之Dom部分 前面我总结了我最近学习js基础部分,当时提到过js分了三大部分,第一部分ECMA基础也就是第一次写的基础部分, 第二部分也就是DOM部分,也就是这里要写的内容的,然后第三部 ...
- JS学习之DOM节点的关系属性封装、克隆节点、Dom中Style常用的一些属性等小结
JS DOM节点: 在JS DOM中节点的关系被定义为节点的属性: 通常有以下几种节点之间的关系: (这里的关系是所有浏览器都支持的) parentNode 父节点 childNodes ...
- 【京东详情页】——原生js学习之匿名函数
一.引言 在js模块中,要给每一个功能封装一个匿名函数.为了更好的理解什么是匿名函数,为什么要用匿名函数,我做了一些查阅和学习. 二.匿名函数 什么是:在创建时,不被任何变量引用的函数. 为什么:节约 ...
- 原生JS获取HTML DOM元素的8种方法
JS获取DOM元素的方法(8种) 通过ID获取(getElementById) 通过name属性(getElementsByName) 通过标签名(getElementsByTagName) 通过类名 ...
- 原生JS学习之秒表、日历
Tips:涉及知识点:Date setInterval DOM 秒表 效果图: 简单构造出草图 Html代码 1 <!DOCTYPE html> 2 <html> ...
- 原生js 学习之array 数组
Array的原生方法: concat(): 连接两个或更多的数组哦 join(): 把数组的所有元素放在一个字符串中 pop():删除并返回数组的最后一个元素 push():向数组的末尾添加一个元素 ...
- 原生js动态改变dom高度
item参数为要改变高度的dom,maxHight参数为dom的最大高度,speed参数为改变高度的速度function addHeight(item,maxHight,speed){ var ite ...
随机推荐
- SD: 关于价格过程的确定
在SD模块中,定价过程是一个非常重要的功能,在单据中使用哪个定价过程取决于三个因素 1)销售区域(sale Area) 该数据来自Sold-to Party的客户维护的销售数据. 2)客户主数据的定价 ...
- Java 创建线程/停止线程
继承 Thread 类 class MyThread1 extends Thread{ @Override public void run(){ System.out.println("继承 ...
- Android为TV端助力 转载:内存泄露与内存溢出的区别
内存溢出 out of memory,是指程序在申请内存时,没有足够的内存空间供其使用,出现out of memory:比如申请了一个integer,但给它存了long才能存下的数,那就是内存溢出. ...
- Java虚拟机(五)Java的四种引用级别
1.前言 HotSpot采取了可达性分析算法用来判断对象是否被能被GC,无论是引用计算法还是可达性分析算法都是判断对象是否存在引用来判断对象是否存活.如果reference类型的数据中存储的数值代表的 ...
- 【redis专题(7)】命令语法介绍之Pub/Sub
Redis 发布订阅(pub/sub)是一种消息通信模式:发送者(pub)发送消息,订阅者(sub)接收消息.主要的目的是解耦消息发布者和消息订阅者之间的耦合,这点和设计模式中的观察者模式比较相似.p ...
- [翻译]SQL Server等待事件—THREADPOOL
前言: 本文是对SQLSkills上一篇关于SQL Server中THREADPOOL等待的博客的翻译,本文也不是完全翻译,有些地方适当加入了自己的一些认知.如有翻译不对或不好的地方,敬请指出,大 ...
- python第一百六十九天,第十九周作业
FIRSTCRM 学员管理开发需求: 1.分讲师\学员\课程顾问角色, 2.学员可以属于多个班级,学员成绩按课程分别统计 3.每个班级至少包含一个或多个讲师 4.一个学员要有状态转化的过程 ,比如未报 ...
- 一套简单的git版本控制代码
对于博客来说,我还是直接实践比较好,理论过多,不方便以后的查看 废话不多,直接开干 功能需求: .公司需要将jenkins打包出来的压缩包通过git上传到git服务器 .而且通过版本控制上传的文件,即 ...
- c/c++ 线性表之单向循环链表
c/c++ 线性表之单向循环链表 线性表之单向循环链表 不是存放在连续的内存空间,链表中的每个节点的next都指向下一个节点,最后一个节点的下一个节点不是NULL,而是头节点.因为头尾相连,所以叫单向 ...
- c/c++柔性数组成员
柔性数组成员 定义和声明分离 #include <stdio.h> //只是告诉编译器,当编译到使用到这个函数的的代码时,虽然还没有找到函数定义的实体,但是也让它编译不出错误. exter ...