原生js的html方法,原生JS获取HTML DOM元素的8种方法

JS获取DOM元素的方法(8种)

通过ID获取(getElementById)

通过name属性(getElementsByName)

通过标签名(getElementsByTagName)

通过类名(getElementsByClassName)

通过选择器获取一个元素(querySelector)

通过选择器获取一组元素(querySelectorAll)

获取html的方法(document.documentElement)

document.documentElement是专门获取html这个标签的

获取body的方法(document.body)

document.body是专门获取body这个标签的。

1.通过ID获取(getElementById)

document.getElementById('id')

上下文必须是document。

必须传参数，参数是string类型，是获取元素的id。

返回值只获取到一个元素，没有找到返回null。

2.通过name属性(getElementsByName)

document.getElementsByName('name')

上下文必须是document。内容

必须传参数，参数是是获取元素的name属性。

返回值是一个类数组，没有找到返回空数组。

3.通过标签名(getElementsByTagName)

var obj = document.getElementsByTagName('div');

for(let i = 0; i

obj[i].onclick = function(e){

console.log(i)

}

}

上下文可以是document，也可以是一个元素，注意这个元素一定要存在。

参数是是获取元素的标签名属性，不区分大小写。

返回值是一个类数组，没有找到返回空数组

4.通过类名(getElementsByClassName

var obj1 = document.getElementsByClassName('animated')

// console.log

0:div.app.animated

1:div#login.login.animated.rubberBand

2:div#reg.reg.animated.shake

3:div#kefu.kefu.animated.swing

4:div#LoginState.state.animated.bounce

5:div.loginState.animated

6:div.regState.animated

7:div.pop.animated

上下文可以是document，也可以是一个元素。

参数是元素的类名。

返回值是一个类数组，没有找到返回空数组。

5.通过选择器获取一个元素(querySelector)

document.querySelector('.animated')

上下文可以是document，也可以是一个元素。

参数是选择器，如：”div .className”。

返回值只获取到第一个元素。

6.通过选择器获取一组元素(querySelectorAll)

document.querySelector('.animated')

上下文可以是document，也可以是一个元素。

参数是选择器，如：”div .className”。

返回值是一个类数组。

JS获取HTML DOM元素的8种方法

什么是HTML DOM 文档对象模型(Document Object Model),是W3C组织推荐的处理可扩展置标语言的标准编程接口.简单理解就是HTML DOM 是关于如何获取.修改.添加或删除 ...

原生js获取 一个dom元素距离页面可视区域的位置值 -- getBoundingClientRect

getBoundingClientRect() 这个方法返回一个矩形对象,包含四个属性:left.top.right和bottom.分别表示元素各边与页面上边和左边的距离. var box=docum ...

JS获取HTML DOM元素的方法

JS获取HTML DOM元素有八种方法: 1.根据id获取标签元素: document.getElementById("id名"); 2.根据标签名获取标签列表: document ...

原生JS—实现图片循环切换的两种方法

今天我们主要讲讲如何使用原生JS实现图片的循环切换的方法.多余的话我们就不多说了,我们一个一个开始讲吧. 1  原生JS实现图片循环切换 -- 方法一 在上栗子之前我们先简单介绍一下所用的一些知识点. ...

js中常用追加元素的几种方法

...

JS获取URL中参数值的4种方法

方法一:正则法 function getQueryString(name) { var reg = new RegExp('(^|&)' + name + '=([^&]*)(&amp ...

【JS新手教程】JS获取当前星期几的几种方法

该文通过获取星期几的几种方法,介绍JS里的数组,判断,和字符串截取,可以当作新手教程看,小白也看的懂.获取星期几,可通过Date()对象的getDay()获取,获取的是一个数字,对应的是0,1,2,3 ...

js获取屏幕以及元素宽高的方法

一.window相关 网页正文部分上:window.screenTop 网页正文部分左:window.screenLeft 屏幕分辨率的高:window.screen.height 屏幕分辨率的宽:w ...

js中删除数组元素的几种方法

1:js中的splice方法 splice(index,len,[item])    注释:该方法会改变原始数组. splice有3个参数,它也可以用来替换/删除/添加数组内某一个或者几个值 inde ...

随机推荐

公用表表达式(CTE)引发的改变执行顺序同WHERE条件顺序引发的bug

以下模拟一下CTE出错 /*测试环境 Microsoft SQL Server 2008 R2 (RTM) - 10.50.1600.1 (X64) Apr 2 2010 15:48:46 Copyr ...

zoj 2334 Monkey King/左偏树+并查集

原题链接:http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemId=1389 大致题意:N只相互不认识的猴子(每只猴子有一个战斗力值) 两只 ...

WPF 渐隐渐现切换背景图片

最近学习WPF,尝试着自己做一些小玩意,也遇到了一些问题,于是整理记录以便日后查阅. 我们都知道WPF可以实现一些很炫的效果,然而有时候为达到这个目的却并不是一件很容易的事情.比如:在软件中我希望能够 ...

重启VirtualBox里面的系统提示VT-x features locked or unavailable in MSR错误

有次不小心设置了一下virtualbox里面的一些配置,然后启动系统时出现了如下提示 在网上找了一些资料尝试了一些方法偶然有一次成功 原来是自己把那个cpu个数设置成了2,改成1就好了,不知道为什么做 ...

Libev学习笔记2

这一节根据官方文档给出的简单示例,深入代码内部,了解其实现机制.示例代码如下: int main (void) { struct ev_loop *loop = EV_DEFAULT; ev_io_i ...

每周分享一 之 webSocket

一:什么是webSocket ? webSocket是HTML5出的新协议,WebSocket协议支持,在受控环境中运行不受信任代码的客户端与选择了该代码通信的远程主机之间进行双向通信. 简单翻译一下 ...

[模拟赛] T2 不等数列

Description 将1到n任意排列,然后在排列的每两个数之间根据他们的大小关系插入">"和"

【DFS】n皇后问题

回溯: 递归调用代表开启一个分支,如果希望这个分支返回后某些数据恢复到分支开启前的状态以便重新开始,就要使用到回溯技巧,全排列的交换法,数独,部分和,用到了回溯.下一个状态在开始之前需要利用到之前的状 ...

【原创】研发应该懂的binlog知识(下)

引言 这篇是的下半部分.在本文,我会阐述一下binlog的结构,以及如何使用java来解析binlog. 不过,话说回来,其实严格意义上来说,研发应该 ...

【leetcode】2-AddTwoNums

problem: Add Two Numbers 需要学习的是单向链表的基础使用: