js获取DOM元素的几种方法和性能比较

2024-10-17

JS获取DOM元素的八种方法

JS获取DOM元素的方法(8种) 通过ID获取(getElementById) 通过name属性(getElementsByName) 通过标签名(getElementsByTagName) 通过类名(getElementsByClassName) 获取html的方法(document.documentElement) 获取body的方法(document.body) 通过选择器获取一个元素(querySelector) 通过选择器获取一组元素(querySelectorAll) 1.通过ID获

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

什么是HTML DOM 文档对象模型(Document Object Model),是W3C组织推荐的处理可扩展置标语言的标准编程接口.简单理解就是HTML DOM 是关于如何获取.修改.添加或删除 HTML 元素的标准.我们用JavaScript对网页进行的所有操作都是通过DOM进行的. 这篇文章不做深入研究,只把各种用法和坑做一个总结. JS获取DOM元素的方法(8种) 通过ID获取(getElementById) 通过name属性(getElementsByName) 通过标签名(getE

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

JS获取DOM元素的方法(8种) 通过ID获取(getElementById) 通过name属性(getElementsByName) 通过标签名(getElementsByTagName) 通过类名(getElementsByClassName) 通过选择器获取一个元素(querySelector) 通过选择器获取一组元素(querySelectorAll) 获取html的方法(document.documentElement) document.documentElement是专门获取htm

JS1 js获取dom元素方法

js获取dom元素方法 1.通过ID选取元素(getElementById) 1)使用方法:document.getElementById("domId") 其中,domId为要选取元素的id属性值 2)兼容性:低于IE8版本的IE浏览器对getElementById方法的实现是不区分元素ID号的大小写的,并且会返回匹配name属性的元素. 2.通过名称name选取元素(getElementsByName) 1)使用方法:document.getEle

js获取隐藏元素宽高的方法

网上有一些js获取隐藏元素宽高的方法,但是可能会存在某些情况获取不了. 例如: <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <title>test</title> </head> <bo

关于Echarts的原生js获取DOM元素与动态加载DOM元素的冲突问题

1.前言: 最近在做的看板项目,因为需要循环加载后台数据,并且用Echarts做数据呈现,所以jQuery和angular等库统统靠边站,Echarts用的是原生js获取DOM元素,至于诸多不兼容等深水坑我就不多赘述了. 2.问题引入: 当我通过Ajax从后端取到需要展示的数据,拿过来动态渲染到页面上,增加Dom元素是常有的事,这个时候就会报错说Echarts没有获取到元素id. 3.解决方案: 至于要在外面包一个延时器,当然我试了一下即使把延时时间改到0也是能够顺利加载的. 暂时就这么解决了这

javascript 获取html元素的三种方法

操作HTML元素你首先找到该元素. 三种方法来做这件事: 通过id找到HTML元素通过标签名找到HTML元素通过类名找到HTML元素通过id查找HTML元素在DOM中查找HTML元素的最简单的方法,是通过使用元素的id. 本列: var x=document.getElementById("intro"); 如果找到该元素,则该方法将以对象(在 x 中)的形式返回该元素. 如果未找到该元素,则 x 将包含 null. 通过标签名查找HTML元素本例查找 id="m

JS动态创建元素（两种方法）

前言创建元素有两种方法 1)将需要创建的元素,以字符串的形式拼接:找到父级元素,直接对父级元素的innnerHTML进行赋值. 2)使用Document.Element对象自带的一些函数,来实现动态创建元素(创建元素 => 找到父级元素 => 在指定位置插入元素) 一.字符串拼接形式为了更好的理解,设定一个应用场景. 随机生成一组数字,将这组数据渲染为条形图的形式,放在div[id="container"]中,如下图 <div id="container

使用JS控制伪元素的几种方法

一. 缘由: 本文源于在OSC社区中,有人提问如何用jq获取伪元素.我第一想法是强大的CSS Query应该可以获取伪元素吧. 然而事实上,CSS Query并不能.即我们不能通过$(":before").$(dom).find(":before")或document.querySelector(":before")来获取:before伪元素. 为此,我不得不重新了解伪元素(Pseudo-elements).为什么不能用JS直接获取伪元素呢? 譬

js获取url参数的两种方法

js获取参数,在以前我都是用正在去拆分,然后获取,这种方式感觉是最简单的方式1: function QueryString(item) { var sValue=location.search.match(new RegExp("[\?\&]"+item+"=([^\&]*)(\&?)","i")) return sValue?sValue[1]:sValue } //使用方法 //url=http://www.xxx.

Javascript获取html元素的几种方法

1.通过id获取html元素 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <div id="mydiv" style="border:1px solid red">我是div,我

JS获取DOM元素

1.childNodes:获取节点,不同浏览器表现不同: IE:只获取元素节点: 非IE:获取元素节点与文本节点: 解决方案:if(childNode.nodeName=="#text") continue 或者 if(childNode.nodeType != '3') continue 2.children:获取元素节点,浏览器表现相同.因此建议使用children. childNodes返回的是节点的子节点集合,包括元素节点.文本节点还有属性节点.children返回的只是节点的

js获取dom元素的子元素,父元素,兄弟元素小记

原生jsvar a = document.getElementById("dom"); del_space(a); //清理空格 var b = a.childNodes; //获取a的全部子节点: var c = a.parentNode; //获取a的父节点: var d = a.nextSibling; //获取a的下一个兄弟节点 var e = a.previousSibling; //获取a的上一个兄弟节点 var f = a.firstChild; //获取a的第一个子节点

jQuery -> 获取后代元素的三种方法

假设我们有内容例如以下的html文件,那么怎样选取包括在<p>元素内的<i>元素呢? 邪馬台国の謎と弥生時代紀元前1000年ごろ.水稲工作の技術をもつ集団が大挙して日本に移住してきた.これによって弥生時代が始まった. 縄文人も南方から伝わった稲を栽培していたが.彼らは原野を開いて大掛かりな水田をつくる発想を持たなかった.しかし.北九州に新たな文化を持って集団が来たのを知った彼らは次第に.水稲工作を受け入れ弥生人へとか分かっていた. html源代码例如以下 <h1>邪馬

js获取对象属性的两种方法，object.属性名，[‘属性名’ ]

1.通过点的方式 2.通过括号的方式例: <input type="text" value="hello" id="text"/> var oText = document.getElementById("text") (1)通过点的方式 oText.property 注意的是:(a)点要查找的是JS中本来就存在的属性名,不能找到变量或者函数的参数,比如下面: var name = "value&q

[原]js获取dom元素的实际位置及相对坐标

关键API: Element.getBoundingClientRect() mdn:https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect 用法: var rect = element.getBoundingClientRect(); console.log(rect.top, rect.right, rect.bottom, rect.left); 获取相对位置: var bodyRect

js获取当前时间戳的三个方法

var time1 = Date.parse(new Date()); var time2 = new Date().valueOf(); var time3 = new Date().getTime(); 其中需要注意的是: 第一种方法: Date.parse(new Date()) 获取的时间戳是把毫秒改成000显示,例:1512122108000 第二种方法: new Date().valueOf() 和第三种方法: new Date().getTime() 是获取了当前毫秒的时间戳,例:

JS基础入门篇（三）—使用JS获取页面中某个元素的4种方法以及之间的差别（一）

1.使用JS获取页面中某个元素的4种方法 1.通过id名获取元素 document.getElementById("id名"); 2.通过class名获取元素 document.getElementsByClassName("class名"); 3.通过元素标签去获取元素 document.getElementsByTagName("标签名"); 4.通过css选择器去获取元素 document.querySelectorAll("cs

Jquery取得iframe中元素的几种方法Javascript Jquery获取Iframe的元素、内容或者ID

query取得iframe中元素的几种方法在iframe子页面获取父页面元素代码如下: $('#objId', parent.document);// 搞定... 在父页面获取iframe子页面的元素代码如下: $("#objid",document.frames('iframename').document) 显示iframe中body元素的内容. $(document.getElementById('iframeId').contentWindow.document.body)

JS操作DOM元素属性和方法

Dom元素基本操作方法API,先记录下,方便以后使用. W3C DOM和JavaScript很容易混淆不清.DOM是面向HTML和XML文档的API,为文档提供了结构化表示,并定义了如何通过脚本来访问文档结构.JavaScript则是用于访问和处理DOM的语言.如果没有DOM,JavaScript根本没有Web页面和构成页面元素的概念.文档中的每个元素都是DOM的一部分,这就使得JavaScript可以访问元素的属性和方法. DOM独立于具体的编程语言,通常通过JavaScript访问DOM

js获取DOM元素的几种方法和性能比较

热门专题