JS的dom操作基础——获取元素
系统提供的方法
在H5之前的技术:
1、getElementById("目标元素的id值") 通过标签的id获取,如果未找到返回null。
2、getElementsByClassName("目标元素的class属性值") 通过标签的class类名获取,获取的元素放在的类数组中返回,如果没找到返回空的类数组。
3、getElementsByTagName("目标元素的标签") 通过标签名获取 获取的元素放在的类数组中返回,如果没找到返回空的类数组。
4、getElementsByName("目标元素的name属性值") 通过标签的name属性的值获取 获取的元素放在的类数组中返回,如果没找到返回空的类数组。
注意:这些获取元素的方法的取元素时,小括号内记到加引号,传入的是字符串格式。
接下来我们实际操作一下用以上方法,获取一下网页元素。
<div id="box"><div class="box1">box1</div><div class="box2">box2</div><div class="box3">box3</div><div class="box3">box4</div></div><a name="a1" href="">111</a><a name="a1" href="">222</a><a href="">333</a><script>var box = document.getElementById("box")console.log(box);var box3 = document.getElementsByClassName("box3")console.log(box3);var boxx = document.getElementsByTagName("div")console.log(boxx);var a0 = document.getElementsByTagName("a")console.log(a0);var a1 =document.getElementsByName("a1")console.log(a1);</script>
控制台的打印情况:
在H5时,新出了两个获取元素的方法:
1、querySelector() 返回符合选择器的第一元素,如果没找到返回null
2、querySelectorAll() 返回符合选择器的所有元素,如果没找到返回空的类数组。
这两个方法在实际开发用的最多,因为它可以综合了以前获取元素的方式,小括号内填写如写css样式的选择器写法。即我们可以通过id、class、标签名等方式在这个方法中获取元素。
代码展示:
<div id="box"><div class="box1">box1</div><div class="box2">box2</div><div class="box3">box3</div><div class="box3">box4</div>
</div><script>//三种方式都可以获取到这个div var box = document.querySelector("#box")console.log(box);var boxs = document.querySelector(".box")console.log(boxs);var boxz = document.querySelector("div")console.log(boxz); //因为返回的是找到的第一个元素//要获取全部div节点 就需要用到querySelectorAllvar boxsz = document.querySelectorAll("div")console.log(boxsz);</script>
控制台打印情况 :
总结H5的技术很好用,但是getELementById的速度是最快的。
官方还提供了一些直接获取的方式:
document.body 获取body标签
document.forms 获取form表单们
document.anchors 获取a标签们
document.images 获取图片们
document.links 获取链接们
document.URL 获取当前文档的网址
通过关系获取元素:
获取父元素的方法:parentElement、parentNode
parentElement和parentNode的区别:
parentElement获取父元素;
parentNode获取父节点。
在平时使用时两者并无区别,唯一的区别是:在获取根部document节点是,parentElement找的是元素,返回null,而parentNode获取的是节点,返回的是#document。
代码展示:
<div class="b"><div class="b1"></div><div class="b2"><div class="b21"></div></div><div class="b3"></div></div><script>var b21 = document.querySelector(".b21")//分别用两者 console.log(b21.parentElement);console.log(b21.parentNode);//获取一下document节点看一下 console.log(b21.parentElement.parentElement.parentElement.parentElement.parentElement);
console.log(b21.parentNode.parentNode.parentNode.parentNode.parentNode);</script>
控制台打印结果:
获取子元素的方法:children、childNodes
children:获取所有子元素;
childNodes:获取所有子节点。
相同点:他们的结果都是装在类数组中返回,如果未找到就返回空的类数组。
不同点:childNodes会把换行等都找出来,而children不会。
代码说明:
<div class="b"><div class="b1"></div><div class="b2"><div class="b21"></div></div><div class="b3"></div></div><script>var b = document.querySelector(".b")console.log(b.children);console.log(b.childNodes);</script>
打印结果:
childNodes把行换看成一个text文本加到类数组中。
在实际开发中,我们可以通过下标选取我们需要的子元素,代码展示:
<div class="b"><div class="b1"></div><div class="b2"><div class="b21"></div></div><div class="b3"></div></div><script>var b = document.querySelector(".b")var son1 = b.children[0] //获取第一个子元素var son2 = b.childNodes[1]//获取第一个子元素console.log(son1,son2);</script>
打印结果:
关于获取子节点,官方还提供了firstElementChild获取第一个子元素、firstChild获取第一个子节点;lastElementChild获取最后一个子元素、lastChild获取最后一个子节点。
获取兄弟元素的方法:
获取弟元素:nextElementSibling、nextSibling
nextElementSibling:获得弟元素,未找到返回null
nextSibling:获得弟节点,未找到返回null
注意:他们只返回离他们最近的一个结果,用nextSibling时空格、换行也会被当作一个子节点
代码演示:
<div class="b"><div class="b1"></div><div class="b2"><div class="b21"></div></div><div class="b3"></div></div><script>var b1=document.querySelector(".b1")console.log(b1.nextElementSibling);console.log(b1.nextSibling);</script>
打印结果:
获取兄元素:previousElementSibling、previousSiblin
用法与获取弟元素相似,不再多做说明。
拓展:我们在对象的原型上添加一个可以知道获取的元素是同胞中的第几个的方法。
<script>Object.prototype.indexof01 = function(){var arr = this.parentElement.childrenfor (let i = 0; i < arr.length; i++) {if(arr[i]==this){return i;}}}</script>
JS的dom操作基础——获取元素相关推荐
- JS的DOM操作1--获取元素与修改元素(附带动图案例)
1.获取元素与修改元素 https://blog.csdn.net/TroyeSivanlp/article/details/120580055 2.创建自定义属性和节点 https://blog.c ...
- js进阶 11-8 jquery如何获取元素相对于父元素的位置
js进阶 11-8 jquery如何获取元素相对于父元素的位置 一.总结 一句话总结:用jquery的position方法,但是使用这个方法的前提是父元素相对定位,子元素绝对定位,否则和offset ...
- js if for 详解 获取元素方式 及一些js 基础知识
##获取元素的新方法## --document.querySelector('Css Selector{css选择器}') 接收一个css选择器(通配,群组,类,包含,id....等) 若这个选择器对 ...
- DOM对象,节点,获取元素的非行间样式,元素的偏移量等属性词
获取页面中的元素的方法 作用: 通过各种方式获取页面中的元素 以前我们说过, id 可以直接使用 这个方法只能通过 id 获取 今天学的就是使用各种方式 比如: id, 类名, 标签名, 选择器 的方 ...
- js hover 触发事件_为什么说JS的DOM操作很耗性能
想问这样的问题,其实是自己心中没有个谱,一直用 js 计算性能来衡量 浏览器dom 操作性能.js性能和浏览器性能其实是两码事. 这个问题很抽象,它里面涉及挺多个小的知识点. 重申一点,js 操作 D ...
- angularjs获取上一个元素的id_DOM(1)-DOM概念和获取元素
1. 概念 JavaScript共有三部分组成:ECMAScript.DOM.BOM,其中DOM和BOM成为Web API,可以被包括ECMAScript在内的Web编程语言使用,现在就来开始学习DO ...
- 原生js循环展示dom_为什么说JS的DOM操作很耗性能
想问这样的问题,其实是自己心中没有个谱,一直用 js 计算性能来衡量 浏览器dom 操作性能.js性能和浏览器性能其实是两码事. 这个问题很抽象,它里面涉及挺多个小的知识点. 重申一点,js 操作 D ...
- DOM基本操作(获取元素、节点的创建和添加、节点的替换和删除)
获取元素 document.getElementById通过id名字获取节点 <div id="box"><ul><li>1</li> ...
- 失去jQuery Bloat —使用NodeList.js进行DOM操作
p.tip {background-color: rgba(128,128,128,0.05);border-top-right-radius: 5px;border-bottom-right-rad ...
最新文章
- Sprinig泛型依赖注入
- 网站内链为什么要做上下文链接?对网站优化有什么帮助?
- [ ZooKeeper]ZooKeeper 的功能和原理
- 超级计算机 26010,全球最强超级计算机搭载的SW26010处理器解析
- vbs隐藏cmd命令窗口调用bat程序执行class
- 不规则动词的一般过去时
- bex64 java 贴吧,Windows Web Server 2008 R2 x64上的BEX错误
- todo: 网口驱动
- ubuntu用virtualbox安装windows
- Wireshark捕获IP报文——分片与不分片
- iastora怎么改成ahci_WIN7系统IDE改成AHCI就蓝屏怎么办_win7硬盘模式ide改成ahci蓝屏处理方法-win7之家...
- flutter 报错 No MediaQuery widget ancestor found.
- C/S模式与P2P模式的对比
- 20系列显卡服务器,RTX20系列被严重低估,他不仅是一张游戏显卡
- CSP-S 蒟蒻啊qaq
- c语言题库-1012循环结构习题:公式求π值
- 全国天气预报查询接口
- Verilog 实现斐波那契数列
- mysql reorg_生产数据库性能优化之reorg和表重建
- 天梯赛习题:直捣黄龙(Dijsk算法 + dfs + 路径状态存储)
热门文章
- Python贪吃蛇简单的代码
- 解决“VMware Station无法检测此光盘映像中的操作系统。您需要指定要安装的操作系统。”
- 【雷达检测】基于matlab模拟海洋监视雷达检测仿真【含Matlab源码 2268期】
- web socket+node.js+mysql实现网页在线对战棋牌游戏(超级适合情侣玩)
- 组队和公会系统的功能实现
- Spring Boot一次关于本地图片无法访问的怪异事件
- 【小猫爪】AUTOSAR学习笔记01-AUTOSAR架构简介
- linux xampp开始伪静态,Linux XAMPP下启用WordPress的自定义文件名(伪静态)功能
- 公务员计算机考试警察考什么时候开始,2017年公务员招考,全市公安机关招录78名人民警察,3月1日起报名(附职位表)...
- APMServ相关(AllowOverride)