原生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 ...
随机推荐
- JS中的柯里化(currying)
何为Curry化/柯里化? curry化来源与数学家 Haskell Curry的名字 (编程语言 Haskell也是以他的名字命名). 柯里化通常也称部分求值,其含义是给函数分步传递参数,每次传递参 ...
- eclipse中maven项目jar包不会自动下载解决办法
Eclipse中maven从远程仓库中下载jar包有时会很慢,有些甚至进度停止不动,这个时候我们可能会终止当前下载,但是终止jar包下载后会出现一个问题,再次打开Eclipse时,你会发现提示你项目中 ...
- 如何训练AI
如何训练AI让其更加智能,而不是用特定的代码控制AI逻辑! AI守则 首先应该为机器人设置几个必要信息: 目标 规则 能力 目标,规定机器人要做到什么. 规则,规定机器人的限制,不能做什么. 能力,规 ...
- JSON基础知识点
一.介绍: JSON是一种轻量级的数据交换格式.易于人阅读和编写.同时也易于机器解析和生成. 二.数据格式: 1.JSON建构于两种数据格式: “名称/值”对(键值对)的集合,不同的语言中,它被理解为 ...
- js时间戳转化时间格式
// 判断是否前面补0 add0 (m) { return m < 10 ? '0' + m : m }, // 时间转化 timeFormat (timestamp) { // timesta ...
- oracle中print_table存储过程介绍
一直以来,觉得MySQL中使用\G参数改变输出结果集的显示方式非常好用,尤其是在命令行界面.但是ORACLE数据库没有这个功能,今天在搜索到Tom大师的一篇博文时,发现大师用一个存储过程print_t ...
- java质数判断
import java.util.Scanner; /** * Created by Admin on 2017/3/25. */ public class test01 { public stati ...
- 移动端 input样式在安卓与ios上不同的解决方案
input{ -webkit-appearance:none; }
- c/c++ 函数模板初探
函数模板初探 1,由来:有时候,函数的逻辑是一样的,只是参数的类型不同,比如下面 int Max(int a, int b){ return a > b ? a : b; } double Ma ...
- 基数排序python实现
基数排序python实现 基数排序 基数排序(英语:Radix sort)是一种非比较型整数排序算法,其原理是将整数按位数切割成不同的数字,然后按每个位数分别比较.由于整数也可以表达字符串(比如名字或 ...