JS---DOM---总结获取元素的方式

原生JS与JQ获取元素的区别

刚学JQ不久,有时候可能会把JS和JQ获取元素的方式搞错,接下来获取属性方法什么的就一发不可收拾了,现在把两者获取获取元素的代码整理下. 一.原生JS获取元素. 1.常用的三种方式获取元素对象(将指定的元素封装成DOM对象): (1)通过元素ID获取:document.getElementById(),示例如下: 我们在控制台输出,结果如下: 可以看到我们获取到了id为div1的元素代码了 (2)通过元素标签名获取:document.getElementsByTagName(),它以数组的形式返…

从零开始学 Web 之 DOM（二）对样式的操作，获取元素的方式

大家好,这里是「 Daotin的梦呓」从零开始学 Web 系列教程.此文首发于「 Daotin的梦呓」公众号,欢迎大家订阅关注.在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识点,期间也会分享一些好玩的项目.现在就让我们一起进入 Web 前端学习的冒险之旅吧! 1.对样式的操作 1.1.点击按钮设置 div 的宽高和背景颜色 <body> <input type="button" value="显示颜色" id="…

JS---DOM---总结获取元素的方式

总结获取元素的方式 1. 根据id属性的值获取元素,返回来的是一个元素对象 document.getElementById("id属性的值"); document.getElementById("btn"); 2. 根据标签名字获取元素,返回来的是一个伪数组,里面保存了多个的DOM对象 document.getElementsByTagName("标签名字"); document.getElementsByTagName("li&quo…

Appium获取元素的方式

1.apk包名和launcherActivity 1.1.获取包名所有应用包名列表 adb shell pm list packages 第三方应用包名列表 adb shell pm list packages -3 系统应用包名列表 adb shell pm list packages -s 正在运行应用包名 adb shell dumpsys window | findstr mCurrentFocus 注意:若多开某款应用,则多开端包名一般为原端包名+后缀,如崩坏3: 1.2.获取已安装…

DOM——获取元素的方式

document.getElementById("id属性的值"): //可以通过元素的 id 来获取元素,返回的是一个元素对象 document.getElementByName("name属性的值"): //通过元素的 name 属性获取元素集合,返回来的是一个伪数组,里面保存了多个DOM对象 document.getElementByTagName("标签名字"): //通过标签名获取元素,返回来的是一个伪数组,里面保存了多个DOM…

App自动化之dom结构和元素定位方式（包含滑动列表定位）

900×383 38 KB 先来看几个名词和解释: dom: Document Object Model 文档对象模型 dom应用: 最早应用于html和js的交互.界面的结构化描述, 常见的格式为html.xml.核心元素为节点和属性 xpath: xml路径语言,用于xml 中的节点定位,XPath 可在 xml 文档中对元素和属性进行遍历如下我们再来看一个App的dom: 控件的基础知识和selenium一样,appium为移动端抽象出了一个控件模型,称为dom结构:会把所有的控件都理解为…

JavaScript中几种获取元素的方式

1.根据id获取元素 document.getElementById("id属性的值"); 2.根据标签名字获取元素 document.getElementsByTagName("标签的名字"); 3.根据name属性的值获取元素 document.getElementsByName("name属性的值"); 4.根据类样式的名字获取元素 document.getElementsByClassName("类样式的名字"); 5…

JavaScript的DOM操作获取元素实际大小

clientWidth 和 clientHeight 这组属性可以获取元素可视区的大小,可以得到元素内容及内边距所占据的空间大小. 返回了元素大小,但没有单位,默认单位是 px,如果你强行设置了单位,比如 100em之类,它还是会返回 px 的大小.(CSS 获取的话,是照着你设置的样式获取). <script type="text/javascript"> window.onload = function(){ var box = document.getElementB…

原生js来写获取元素距离顶部距离，以及滚动条滚动指定距离和时间控制

这是我在写vue项目里封装的一个公共js类里面还有一些其他的方法,一并拿过来了 class Public { isDesktop(){ //判断是否为pc端 return (window.screen.width > 1023) ? true : false; } /* * formatMoney(s,type) * 功能:金额按千位逗号分隔 * 参数:s,需要格式化的金额数值. * 参数:type,判断格式化后的金额是否需要小数位. * 返回:返回格式化后的数值字符串. */ formatM…

javascript的DOM操作获取元素

一.document.getElementById() 根据Id获取元素节点 <div id="div1"> <p id="p1"> 我是第一个苹果</p> <p id="p2"> 我是第二个苹果</p> </div> <script> window.onload = function () { var str = document.getElementBy…

dom操作------获取元素的若干方法

// 1,getElementById:返回元素节点document.getElementById(); // 2,getElementsByClassName:返回HTMLCollection对象(IE9以下不支持.)document.getElementsByClassName(); // 3,getElementsByTagName:返回HTMLCollection对象document.getElementsByTagName(); // 4,getElementsByTagName:返回…

js通过class获取元素

<!doctype html> <html> <head> <meta charset="utf-8"> <meta charset="utf-8"> <title>通过class获取元素</title> <style> #box div { width:100px; height:100px; border:1px solid red; margin:10px; } #…

JavaScript的DOM操作获取元素的大小

通过 style 内联获取元素的大小需要注意的是style 获取只能获取到行内 style 属性的 CSS 样式中的宽和高,如果有获取:如果没有则返回空. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <script type="…

JavaScript的DOM操作获取元素周边大小

一.clientLeft 和 clientTop 这组属性可以获取元素设置了左边框和上边框的大小,目前只提供了 Left 和 Top 这组,并没有提供 Right 和 Bottom. <script type="text/javascript"> window.onload = function(){ var box = document.getElementById("box"); alert(box.clientLeft); alert(box.cl…

JS——通过标签获取元素、循环语句、数组去重

通过标签获取元素: var aLi = document.getElementsByTagName('Li'); aLi[0].style.backgroundColor = 'gold'; 选中部分li操作: var oList = document.getElementById('list01'); var aLi = oList.getElementByTagName('li'); alert(aLi.length); for循环: var oList = document.getElem…

jQuery获取元素的方式

一.通过id选择器获取并操作元素--------$("#id属性的值") <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script> <script> $(function(){ //根据id选择器获取按钮,添加点击事件,修改按钮的value属性值 $("#btn").click(function(){ $(this).va…

js动画之获取元素属性

首先我们要介绍一些知识 offsetWidth element.offsetWidth = width + padding + border; width 我们也知道element.style.width 这个属性一般用来修改属性,那么在获取这个属性的时候, 如果这个元素的的样式是定义在css的文件或者头样式中,都是获取不到的,只有行内样式才是获取到 <!DOCTYPE html> <html lang="en"> <head> <meta c…

js dom操作获取节点的一些方法

在复习javascript基础的时候,整理了一下js中获取节点的一些常用的方法,见代码: //js获取下一个兄弟节点 function getNextSibling(eleObj){ var next = eleObj.nextSibling; if(next.nodeType == 3){ // 文本节点 return next.nextSibling; } return next; } //js获取上一个兄弟节点 function getPreviousSibling(eleObj){ va…

dom节点获取文本的方式

1. innerHTML innerHTML可以作为获取文本的方法也可以作为修改文本内容的方法 element.innerHTML 会直接返回element节点下所有的HTML化的文本内容 <body> <div>文本</div> <div>文本</div> </body> document.body.innerHTML //返回"<div>文本</d…

DOM: 如何获取元素下的第一个子元素

Element.firstChild ?,是的,这是第一种方法,当然,通常来说支持 W3C 规范的浏览器,如 Firefox 等取到的应该是 TEXT_NODE.很早之前,或者说现在最流行的方法可能是: // 让我们假设要将它抽象出来,变成一个 util 对象的方法 var util = {}; util.first = function(element) { if(!element) return; var first= element.firstChild; // 处理 w3c 浏览器中第一…

js通过class获取元素时的兼容性解决方案

1:::::方法代码如下:function getByClass(sClass){ var aResult=[]; var aEle=document.getElementsByTagName('*'); for(var i=0;i<aEle.length;i++){ /*当className相等时添加到数组中*/ if(aEle[i].className==sClass){ aResult.push(aEle[i]); …

DOM中获取元素的节点兼容IE6-8封装，带jquery源码分析children

<ul id="box"> <li>第一个节点</li> <li>第二个节点</li> <li>第三个节点</li> <li>第四个节点</li> </ul> var box = document.getElementById('box'); //标准浏览器(非IE6-8)中会把空格和换行当做文本节点处理 console.log(box.childNodes); //…

jQuery-少见获取元素的方式

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript" src="js/jquery-1.11.0.js"></script></head><…

js根据className获取元素封装

虽然有了getElementsByClassName,但是ie低版本不支持,所以我们需要单独定义一个getByClass function getByClass(className,parent){ var oParent=parent?document.getElementById(parent):document; // 判断parent参数是否存在,不存在,使用document选区文档所有class eles=[]; elements=oParent.getElementsByTagNam…

7.关于一些dom&&获取元素

1. 测试点击的是否是span 标签 <span onClick={this.select.bind(this)}>点击</span> select( e ){ console.log(e.target.matches(`${'span'}`)) } 注:` `位EMC5字符串模板 `${xx}(${xx})`相当于 var xx , xx + ' ( ' + xx +' ) ' `${'span'}`表示选择标签名span 2. js的有些获取元素方式没有效果,一下实测有…

常用数组、字符串方法总结&获取元素、DOM操作

字符串的方法.返回值.是否改变原字符串:1 charAt() 方法可返回指定位置的字符. 不改变原始字符串 JavaScript并没有一种有别于字符串类型的字符数据类型,返回的字符是长度为 1 的字符串: 注释:字符串中第一个字符的下标是 0.如果参数 index 不在 0 与 string.length 之间,该方法将返回一个空字符串. 2 concat() 方法用于连接两个或多个字符串并返回连接后的字符串不改变原始字符串语法:stringObject.concat(stringX,str…

DOM中的获得元素的方式

获取元素的方式:分为俩种: 1.直接获取:直接获取分为三种: a,获取单个元素: function demo1(){ var uid=document.getElementById("username"); alert(uid); } b,获取部分元素: function demo3(){ var name=document.getElementsByName("sexn"); alert(name); } c,获取全部元素(同一类型的元素): function d…

获取元素节点 & 操作属性节点

1.html 文档编写 js 代码的位置: window.onload事件在整个html文档被完全加载完再执行, 所以可以获取html文档的任何节点 js-window-onload.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <script type="t…

Js之Dom学习-三种获取页面元素的方式、事件、innerText和innerHTML的异同

一.三种获取页面元素的方式: getElementById:通过id来获取 <body> <input type="text" value="请输入一个值:" id="txt"/> <input type="button" value="按钮" id="btn"/> <script> var txt=document.getElementB…

js 获取元素在页面上的偏移量的最佳方式

使用js制作效果时,我们常常要获取某个元素在页面上的偏移量(例如tip提示框功能).而获取偏移量可以直接获取相对于document的偏移量,也可以获取相对与视口的偏移量(viewpoint)加上页面滚动量(scroll)获得. 1.获取相对与document的偏移量 function getOffsetSum(ele){ var top= 0,left=0; while(ele){ top+=ele.offsetTop; left+=ele.offsetLeft; ele=ele.offsetP…

【JS---DOM---总结获取元素的方式】的更多相关文章