DOM元素选择

最新推荐文章于 2023-05-04 12:03:45 发布
最新推荐文章于 2023-05-04 12:03:45 发布
阅读量408 收藏 1
点赞数 1
分类专栏： JavaScript 文章标签： dom
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u013710486/article/details/69664284
版权

1.通过HTML选择元素

1.通过ID选取元素

document.getElementById('id')
在当前DOM树中根据ID选择某一子元素

2.通过标签名选取元素

parent.getElementsByTagName('标签名')
在当前DOM树中根据标签名选取一组元素(类数组对象)

3.通过name属性选取元素

document.getElementsByName('name属性值')
返回DOM树中具有指定name属性值的所有子元素集合

2.通过CSS选取元素

1.通过CSS类选取元素

parent.getElementsByClassName('className')
IE9+、Firefox3+、Safari3.1+、Chrome、Opera9.5+可用

2.通过CSS选择器选取元素

（jQuery的核心）
parent.querySelector('selector');//返回第一个匹配的
parent.querySelectorAll('selector');//返回所有的

3.其他选取

1.document.all

2.document.documentElement

document.documentElement对象是整个HTML文档的根元素(<html>元素)的引用
document.documentElement===document.lastChild

3.document.head

document.head对象是HTML文档中<head>元素的引用
document.head===document.lastChild.firstChild

4.document.body

document.body对象是HTML文档中<body>元素的引用
document.body===document.lastChild.lastChild
淼先生
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Javascript Dom元素获取和添加详解
01-19
1.Dom元素的获取 document.getElementById()：通过id获取一个Dom元素 document.getElementsByClassName()：通过class名字获取一个或多个Dom元素（伪数组） document.getElementsByTagName()：通过标签名字获取一...
选取DOM对象
drawlessonsfrom的博客
03-01 130
document对象由HTML元素构成，HTML元素用于描述网页的结构，一个元素包含起始标签和结束标签以及标签内的内容。起始标签可以包含属性，属性通常描述该元素的更多信息，全局属性适用于每个元素，例如class、id、title属性。属性有名称和值，值通常包含在一对双引号中。 用于选取单个元素的方法有getElementById()、querySelector()，用于多个元素选择的方法有getElementsByClassName()、getElementsByTagName()和querySelecto
DOM定义的5种选取元素方式
l_Irene的博客
06-09 1253
大多数客户端JavaScript程序运行时总是在操作一个或多个文档元素。当这些元素启动时，可以使用全局变量document来引用Document对象。为了操作文档中的元素，我们可以通过以下5种方式获得或选取这些引用文档元素的Element对象。 一、通过ID选取元素       任何一个HTML元素都有一个独一无二的ID属性，可以用Document对象的getElemenById()方法选取一
js选取DOM节点元素
TXW6666的博客
08-30 520
DOM中选取文档元素的方法总共有5种： 1.通过id值。 2.通过name属性值。 3.通过指定的标签名。 4.通过class类。 5.通过css选择器 <div id="box">box</div> <div class="top">top</div> <div class="top">top</div> <div class="top">top</div> <div class="t
获取dom元素6种实现方式
qwyio的博客
03-29 6945
querySelector document.querySelector('选择器') querySelectorAll document.querySelectorAll('选择器') getElementById document.querySelectorAll('id名') getElementsByClassName document.getElementsByClassName('类名') getElementsByName document.getElementsB
jQuery之选择DOM元素
qq_42837380的博客
10-10 886
jQuery之选择DOM元素 jQuery的选择器非常强大，下面总结了一下jQuery选择器的常用类型。 jQuery选择器的类型 基本选择器 层级选择器 属性选择器 表单元素选择器 基本过滤选择器 子代过滤选择器 内容过滤选择器 可见性过滤选择器 基本选择器 基本选择器包括 *（通配符选择器）、.calss (类名选择器) 、Tag(标签选择器) 、#id（id选择器） jQuer...
jQuery 创建Dom元素
10-29
jQuery 创建Dom元素代码，需要的朋友可以参考下。
vue获取dom元素注意事项
08-28
主要介绍了vue获取dom元素注意事项及vue获取dom元素的内容,需要的朋友可以参考下
快速解决js动态改变dom元素属性后页面及时渲染的问题
10-22
下面小编就为大家带来一篇快速解决js动态改变dom元素属性后页面及时渲染的问题。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
JS选取DOM元素的简单方法
11-23
摘自JavaScript权威指南（jQuery根据样式选择器查找元素的终极方式是 先用getElementsByTagName(*)获取所有DOM元素，然后根据样式选择器对所有DOM元素进行筛选） 今天试了下各种选取元素的方法的速度，用原生的方法...
JavaScript--13 DOM 选择符(id、class) 和元素替换
邪人君子的博客
10-21 646
本节目录一、选择符1.1 querySelector() 方法1.2 querySelectorAll() 方法 一、选择符 1.1 querySelector() 方法 querySelector()方法接收一个CSS 选择符，返回与该模式匹配的第一个元素，如果没有找到匹配的元素，返回 null。 获取文档中第一个 <p>元素： document.querySelector("p...
DOM编程（1）选择器
hgc2020的博客
04-14 215
文章目录一、DOM对象模型二、选择器1.元素选择器(1) id 选择器(2) 标签 选择器(3) class 选择器(4) name 选择器(5) CSS 筛选器(6) 获取特殊元素2.节点/元素 选择器(1) 子节点选择器(2) 节点属性(3) 节点元素获取3获取元素属性总结 一、DOM对象模型 DOM对象全称是Document Object Model，当页面加载时，浏览器就会会创建页面文档模型，它是window五大对象之一。 一个html文档是由DOM树构成。 DOM树如下： 二、选择器 1.
js 获取指定属性的所有dom元素
weixin_41463944的博客
08-14 1250
let dataCodeList = [] let obj = document.querySelectorAll('[data-code]') for (let i = 0; i < obj.length; i++) { dataCodeList.push(obj[i].dataset.code) }
document.querySelectorAll根据元素属性值选择元素
个人博客
05-04 2197
在这个选择器中，我们使用了属性选择器 [attribute=value]，其中 attribute 是 HTML 元素的属性名称，value 是属性值。所以这个选择器的意思是选择所有拥有 οnmοuseοver=“top.ShowTip_YC(evt)” 属性的 text 元素。使用选择器来选择指定的 HTML 元素，然后对其应用样式或操作。
正则表达式匹配dom元素指定包含特定id
oliverpeng1521314的博客
08-11 4761
  今天碰到项目一个需求，需要通过用户输入保存实时更新预览 其中就碰到如何匹配更新最新的内容，首先得匹配成对dom元素，我们先用span标签包裹，后的根据不同得id值更新不同得数据， 经过自己的不断反复实验总结出了匹配正则表达式如下： 首先先写出匹配特定属性值的正则是    正则表达式为reg = /\s+\@([\w-_]*)([\.\w]*)\s*=/ig //匹配含有@属性 如@id...
HTML DOM中通过id，类名，标签名，选择器获得元素
需要更努力的博客
10-19 1550
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div class="p1"></div> <script> p1 =...
2020-09-27
m0_49986452的博客
09-27 183
### 代码 e.target 触发事件的节点 .mouseenter 事件类型:鼠标悬浮上时(hover) .click 事件类型:点击 .addEventListener(事件类型,事件处理函数,Boolean) 例 arEle.addEventListener("click", function () {},
34 Dom id选择器
wwwshengbo的博客
02-17 258
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"/&gt; &lt;title&gt; &lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;p id="p1"&gt; DOM 选择器
JavaScript-dom选择器||节点
wust_cyl的博客
04-15 625
dom选择器。我们知道document表示文档，我们就是通过document里面的方法选择标签。1：document.getElementById();通过选择Id选择器，来选择标签。 &lt;div id="demo"&gt;123 &lt;/div&gt; &lt;div &gt; 456&lt;/div&gt; &lt;script type='...
DOM元素
最新发布
05-27
使用JavaScript可以直接访问和操作DOM元素。例如，我们可以使用document.getElementById()函数来获取具有指定ID的元素，然后可以使用其他函数来更改元素的样式、内容或属性。 下面是一个简单的HTML代码示例，其中...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值