dom操作------获取元素的若干方法
// 1,getElementById:返回元素节点
document.getElementById(); // 2,getElementsByClassName:返回HTMLCollection对象(IE9以下不支持。)
document.getElementsByClassName(); // 3,getElementsByTagName:返回HTMLCollection对象
document.getElementsByTagName(); // 4,getElementsByTagName:返回nodeList对象,第0项为元素节点
document.getElementsByName(); // 5,querySelector:返回选择器匹配到的第一个元素节点(选择器同css用法一致,支持由外到内的嵌套写法)
document.querySelector('#box em'); // 6,querySelectorAll:返回nodeList对象(类似数组对象,每个值为选中元素节点)
document.querySelectorAll(); // 7,获取子元素集合
// childNodes(IE:只获取元素节点;非IE:获取元素节点与文本节点;)
document.getElementById().childNodes;
// children(只获取元素节点,浏览器表现相同)
document.getElementById().children; // 8,获取最后一个元素节点:lastElementChild(IE<9不支持)
document.getElementById().lastElementChild; // 9,获取第一个元素节点:firstElementChild(IE<9不支持)
document.getElementById().firstElementChild; // 10,获取后一个兄弟元素节点
// nextSibling(IE<9:后一个兄弟元素节点;非IE6,7,8:后一个兄弟节点,文本节点或者元素节点)
document.getElementById().nextSibling;
// nextElementSibling(IE<9不支持)
document.getElementById().nextElementSibling; // 11,获取前一个兄弟元素节点
// previousSibling(IE<9前一个兄弟元素节点;非IE6,7,8:前一个兄弟节点,文本节点或者元素节点)
document.getElementById().previousSibling;
// previousElementSibling(IE<9不支持)
document.getElementById().previousElementSibling; // 12,parentNode:获取父元素节点(parentElement用法一致,仅IE支持)
document.getElementById().parentNode; // offsetParent:获取第一个设置定位的上级元素,返回元素节点
console.log(document.getElementById().offsetParent) // 14,获取指定的某个上级元素的方法
let el = document.getElementById();
getParents(el, {id: 'box'}) function getParents (el, option) {
let ele = null;
while (el.tagName !== 'BODY') {
const attr = Object.keys(option)
if (el[attr].toUpperCase() === option[attr].toUpperCase()) {
ele = el;
break;
}
el = el.parentNode;
}
return ele
}
dom操作------获取元素的若干方法的更多相关文章
- JavaScript的DOM操作获取元素周边大小
一.clientLeft 和 clientTop 这组属性可以获取元素设置了左边框和上边框的大小,目前只提供了 Left 和 Top 这组,并没有提供 Right 和 Bottom. <scri ...
- javascript的DOM操作获取元素
一.document.getElementById() 根据Id获取元素节点 <div id="div1"> <p id="p1"> ...
- JavaScript的DOM操作获取元素的大小
通过 style 内联获取元素的大小 需要注意的是style 获取只能获取到行内 style 属性的 CSS 样式中的宽和高,如果有获取:如果没有则返回空. <!DOCTYPE html> ...
- JavaScript的DOM操作获取元素实际大小
clientWidth 和 clientHeight 这组属性可以获取元素可视区的大小,可以得到元素内容及内边距所占据的空间大小. 返回了元素大小,但没有单位,默认单位是 px,如果你强行设置了单位, ...
- js dom操作获取节点的一些方法
在复习javascript基础的时候,整理了一下js中获取节点的一些常用的方法,见代码: //js获取下一个兄弟节点 function getNextSibling(eleObj){ var next ...
- javascript DOM和DOM操作的四种基本方法
在了解了javascript的语言特性后,javascript真正大放光彩的地方来了——这就是javascript DOM Javascript DOM DOM(Document Object Mod ...
- dom操作------获取长/宽/距离等值的若干方法
1.offsetLeft:获取元素边框以外至文档顶的距离:若其祖先元素有定位属性position则返回值为元素到该定位元素的距离,不包括祖先元素的三宽(padding,border,margin),且 ...
- javascript dom编程艺术笔记第三章:DOM操作的5个基本方法
JavaScript的 DOM操作,主要是对DOM这三个字母中D.O.M的操作.D代表的是document(文档),即我们可以使用javascript对文档进行操作,O代表的是object(对象),对 ...
- jQuery使用(六):DOM操作之元素包裹、克隆DOM与data的综合应用
包裹 wrap() wrapInner() wrapAll() unwrap() clone() 数据缓存机制 data 文档处理(包裹) 1.1.wrap()--将所匹配的元素用其他元素结构化标签包 ...
随机推荐
- 关于CentOS下 yum包下载下的rpm包放置路径
在CentOS下用yum安装,回发现在/var/cache/yum/下的base.extrs和updates下的packages下都没有发现下载的RPM 原来在/etc/yum.conf下没有设置下载 ...
- php支付宝手机网页支付类实例
<?php $alipayConfig = array( 'key' => 'xxxxx', //买卖安全校验码,用于签名的32位密钥 'transport' => 'https', ...
- 软件测试思维导图[ZZ]
原文链接 全图
- 检查.net dll构建的目标平台是any cpu、x86、x64
有时候,需要检查构建的dll是否针对正确的平台 可以使用CorFlags.exe(它是.NET Framework SDK的一部分)从dll中查找此信息.运行CorFlags.exe将产生以下输出: ...
- [C#]Dapper学习笔记
1.安装,直接用nuget搜索Dapper就行,不过只支持框架4.5.1 2.数据库测试表 CREATE TABLE [dbo].[Student]( [ID] [bigint] NULL, ) NU ...
- [JSOI2018]列队(主席树)
跟上次那道列队不一样,但都是九条可怜...(吉老师太强了) 在主席树上统计答案,因为值域只有 \(10^6\) 甚至不用离散化... \(Code\ Below:\) #include <bit ...
- mysql查询语句分析 explain/desc用法
explain或desc显示了mysql如何使用索引来处理select语句以及连接表.可以帮助选择更好的索引和写出更优化的查询语句. explain 数据表 或 desc 数据表 显示数据表各字段含义 ...
- 全屏使用swiper.js过程中遇到的坑
概述 swiper.js确实是一个很好用的插件,下面记录下我在全屏使用过程中遇到的一些坑和解决办法,供以后开发时参考,相信对其他人也有用. 通用方案 一般来说,swiper需要放在body的下一层,虽 ...
- MySQL 排名统计(常用功能函数)
select actor_id,@curr_cnt:=cnt as cnt , ,@rank) as rank, @prev_cnt:=@curr_cnt as dummy from( select ...
- Swift 里 Array (二)初始化
init() 函数 在 Array 里 public init() { _buffer = _Buffer() } 以Buffer 是 _ContiguousArrayBuffer 为例. 即初始化了 ...