JS 获取dom元素下的某个子元素

2024-11-03

JavaScript DOM查询，原生js实现元素子节点的获取

在网页网页开发中,经常会需要获取某个网页元素的子元素,然后对其进行事件绑定.或样式修改等行为.这些操作对于jquery来说很容易,但是对于原生js会稍微麻烦一些,这里将介绍四种方法获取元素的子元素(本文推荐第四种方法,如果时间有限,请直接把把滚轮滑到底↓↓↓↓↓) 一.childNodes childNodes属性可以获取节点元素的子节点,并将获取到的子节点封装成一个对象: <div class="test" id="test"> <p>&l

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

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

css如何让父元素下的所有子元素高度相同

小颖最近做的项目中要实现一个样式 ,小颖怕自己忘记了,写个随笔记下来需求父元素下有多个子元素,并且子元素过多时要实现自动换行,给每个子元素都加了右边框,而每个子元素里的内容多少不一定,这就会产生右边框的高度不一致,长的长短的短,为了解决这个问题,那就必须让父元素下的子元素都是等高的,并且高度决定于最高的那个子元素的高度. 其实就只需要给父元素加如下样式就好了: display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; 先来看下效果吧: 代码:小颖

js jquery获取当前元素的兄弟级上一个下一个元素 jquery如何获取第一个或最后一个子元素

var chils= s.childNodes; //得到s的全部子节点 var par=s.parentNode; //得到s的父节点 var ns=s.nextSbiling; //获得s的下一个兄弟节点 var ps=s.previousSbiling; //得到s的上一个兄弟节点 var fc=s.firstChild; //获得s的第一个子节点 var lc=s.lastChile; //获得s的最后一个子节点 JS获取节点父级,子级元素先说一下JS的获取方法,其

JS获取DOM元素的八种方法

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

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

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

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

jquery如何获取第一个或最后一个子元素

jquery如何获取第一个或最后一个子元素? 通过children方法,children("input:first-child") $(this).children("input:first-child").val(); $(this).children("input:last-child").val(); 通过>选择器,$(".items>input:first") 在这里转一篇<jQuery选择元素的

JS中如何删除某个父元素下的所有子元素？

JS中如何删除某个父元素下的所有子元素?这里我介绍几种方法: 1.通过元素的 innerHTML 属性来删除这种方式我觉得是最有方便的,直接找到你想要的父元素,直接令其 element.innerHTML = ""; 举例说明: <input type="button" value="按钮" id="btn"> <div id="dv"> <p>1</p>

js获取键盘按下的键值event.keyCode,event.charCode,event.which的兼容性

js获取键盘按下的键值有event.keyCode,event.charCode和event.which 其中: 谷歌浏览器对event.keyCode,event.charCode和event.which都兼容. 火狐浏览器对event.keyCode部分键值有效,如上下左右键(37,38,39,40),enter键(13),PgUp(33),PgDn(34)等部分有效,对数字键,字母键无效. event.which也是部分键值有效,如字母键,数字键,enter键,Backspace键等有效,

原生JS获取DOM 节点到浏览器顶部的距离或者左侧的距离

关于js获取dom 节点到浏览器顶/左部的距离,Jquery里面有封装好的offset().top/offset().left,只到父级的顶/左部距离position().top/position().left: 原生写的话就是用获取节点,do while循环就可以了.代码如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta

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的第一个子节点

JS获取DOM元素

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

jquery如何获取第一个或最后一个子元素？

通过children方法,children("input:first-child") 1 2 $(this).children("input:first-child").val(); $(this).children("input:last-child").val(); 通过>选择器,$(".items>input:first") 在这里转一篇<jQuery选择元素的方法大全> 1. 先说说通过位置选择

js 获取DOM的style属性

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>计算元素样式</title>

js获取dom对象style样式的值

js获取到的dom对象的style通常是没有值得,因为我们都写在外部文件中,从慕课网上见到讲师封装的一个方法,挺不错.特此记录下来. function getStyle(obj,attr){ if(obj.currentStyle){//兼容IE return obj.currentStyle[attr]; }else{ return getComputedStyle(obj,false)[attr]; } }

js获取给定时间的下一天

//获取给定时间的下一天 yyyy-MM-dd格式 function getNextDay(d){ d = new Date(d); d = +d + 1000*60*60*24; d = new Date(d); var yy=d.getFullYear(); var mm=d.getMonth()+1; var dd=d.getDate(); var nextday=yy+"-"; if (mm<10){nextday+="0"} nextday+=mm+

[原]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

javascript获取dom的下一个节点方法

需求说明: 获取当前节点左节点或者右节点(兄弟节点): css: <style type="text/css"> a:focus { outline: none; } .panel { background: #69C7F7; height: 220px; display: none; } .slide { margin: 0; padding: 0; border-top: solid 4px #F27613; } .btn-slide { background: #F2

js获取dom节点

var s= document.getElementById("test");del_ff(s); //清理空格var chils= s.childNodes; //得到s的全部子节点var par=s.parentNode; //得到s的父节点var ns=s.nextSbiling; //获得s的下一个兄弟节点var ps=s.previousSbiling; //得到s的上一个兄弟节点var fc=s.firstChild; //获得s的第一个子节点var lc=s.lastCh

js获取dom节点之 id 获取

在JavaScript中,标准的id选择器调用语法是: document.getElementById('myid').style.width = pc + "%"; 但是,今天发现,直接用id名字调用竟然也可以正确运行: myid.style.width = pc+"%"; 最后找度娘问了问. 看到Mrcxt的博客里面有这个问题,问题的答案是: 这个最初是 IE 里面的,后来 firefox chrome 好像也支持了. 不建议使用,这个不是标准里面的,将来不一定

JS 获取dom元素下的某个子元素

热门专题