精华内容
下载资源
问答
  • document.getElementsByClassName(‘test’);
    document.getElementsByClassName('test');
    
    展开全文
  • 关于原生JS获取节点,一直是个头疼的问题,而且调用方法的名字又贼长了,所以我选择用JQ,好像跑题了--话不多说看代码获取父节点 及 父节点下所有子节点(兄弟节点)文本一文本二文本三文本四function jsCopy(ev){var ...

    关于原生JS获取节点,一直是个头疼的问题,而且调用方法的名字又贼长了,所以我选择用JQ,好像跑题了--

    话不多说看代码

    获取父节点 及 父节点下所有子节点(兄弟节点)

    • 文本一

    • 文本二
    • 文本三

    • 文本四

    function jsCopy(ev){

    var ele=ev.parentNode;

    //获取input的父级节点

    console.log(ele);

    //获取input的父级节点下的所有子节点(input及它的兄弟节点)

    console.log(ele.childNodes);

    //获取input的父级节点下的第一个子节点(我的目的就是获取到textarea,但是js就是这么坑)

    console.log(ele.firstChild);

    console.log('--------------------------分界线---------------------------------');

    }

    我们来运行一下

    我们 看看数据

    文本一:第一条console获取到了父级节点正常(很开心),第二条console返回的是父级元素下的所有节点元素(你会说:what?text?尼玛没有用到text标签啊!怎么出来的)不急,我们继续看,第三条console是获取父级节点下的第一个子节点(what?这是啥?我是获取第一个textatea啊,这尼玛获取的什么?我一口老血);继续->

    文本二:第一条console获取到了父级节点正常(很严肃),第二条console返回的是父级元素下的所有节点元素(你会说:更上面的文本一不是一样的吗?)仔细看!是不是少了个‘text‘,我们继续看,第三条console是获取父级节点下的第一个子节点(what?获取到了,开心,郁闷了为什么啊);继续->

    文本三:第二条console返回的是父级元素下的所有节点元素(跟文本一 差不多一样,只是中间少了个text,抓狂了,难道有什么规律?)我们继续看,第三条console是获取父级节点下的第一个子节点(跟文本一 差不多一样,获取的#Text);继续->

    文本三:第二条console返回的是父级元素下的所有节点元素(超级正常有没有,高兴地飞起--这是你们再回去看一下文本四的代码)我们继续看,第三条console是获取父级节点下的第一个子节点(一切正常,这是为啥呢!难道脸黑);

    总结下:我想有的人大概看出了规律,没错,你没猜错,就是标签与标签之间不能换行,每当你换行JS 默认会把换行当成text元素加入到数组中,这就是你获取不到想要的节点的原因。

    那么问题来了,这个如何解决呢?

    答:其实很简单 就是删除  数组中没必要的元素(text);

    (我知道你们再想什么,嘿嘿,尼玛讲了一堆有的没的,敢不敢上代码)

    好我就上代码:

    function jsCopy(ev){

    var ele=ev.parentNode;

    var elem_child = ele.childNodes;

    for(var i=0 in elem_child){ //遍历子元素数组

    if(elem_child[i].nodeName == "#text" && !/\S/.test(elem_child[i].nodeValue)) {

    //删除数组中的text

    ele.removeChild(elem_child[i]);

    }

    }

    console.log(ele.firstChild);

    console.log('---------------------分界线-----------------------');

    }

    运行一下

    一切正常有没有,终于获取到想要的了。

    这里我只做了获取父级节点,子节点,其他的获取雷同,所以一定要console,才能知道这些不为人知的秘密。

    为了方便大家我就把JS获取节点的方法粘出来:

    var a= document.getElementByIdx_x_x("dom");

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

    var g= a.lastChild;//获取a的最后一个子节点

    这次就写到这,如有更好的可以留言分享下,在下先谢谢了!

    展开全文
  • HTML内容 <div id="head"> <div class="head_wrapper">1&...div class="...原生JS获取节点 在这里推荐使用element元素的方法 因为节点得

    HTML内容

    <div id="head">
        <div class="head_wrapper">1</div>
        <div class="headBlock">2</div>
    </div>

    原生JS获取节点

    在这里推荐使用element元素的方法
    因为节点得到的是一个节点集合

    //得到全部子节点childNodes 
    document.getElementById('head').childNodes 
    //NodeList(5) [text, div.head_wrapper, text, div.headBlock, text]
    
    //得到父节点
    document.querySelector('.head_wrapper').parentNode
    //下一个兄弟节点
    document.querySelector('.head_wrapper').nextSibling
    //上一个兄弟节点
    document.querySelector('.headBlock').previousSibling
    //第一个子节点
    document.getElementById('head').firstChild 
    //最后一个子节点
    document.getElementById('head').lastChild
    //是否有子节点
    document.getElementById('head').hasChildNodes()
    
    //得到父级元素
    document.querySelector('.head_wrapper').parentElement
    //<div id="head"></div>
    
    //下一个兄弟元素
    document.querySelector('.head_wrapper').nextElementSibling
    //<div class="headBlock"></div>
    
    //上一个兄弟元素
    document.querySelector('.headBlock').previousElementSibling
    //<div class="head_wrapper"></div>
    
    //第一个子元素
    document.getElementById('head').firstElementChild
    //<div class="head_wrapper"></div>
    
    //最后一个子元素
    document.getElementById('head').lastElementChild
    //<div class="headBlock"></div>
    
    //是否有子元素
    document.getElementById('head').children.length == 0
    //false
    
    //获取该节点下的所有文本
    document.getElementById('head').textContent
    //1,2
    
    //获取该节点下的文本
    document.getElementById('head').innerText
    //1,2
    

    原生JS Class 增删改查

    //添加Class
    document.getElementById('head').classList.add('add') //('add1','add2')
    //<div id="head" class="add"></div>
    
    //删除Class
    document.getElementById('head').classList.remove('add')
    //<div id="head"></div>
    
    
    //切换class toggle
    document.getElementById('head').classList.toggle('add')
    //打印true 代表添加成功,<div id="head" class="add"></div>
    //打印false为删除成功, <div id="head"></div>
    
    //是否存在Class
    document.getElementById('head').classList.contains('add')
    //返回 true和false
    
    //返回类名在元素中的索引值。索引值从 0 开始。
    <div id="head" class="add remove"></div>
    document.getElementById('head').classList.item(1)
    //remove

    原生JS 属性设置和获取

    //属性元素
    document.getElementById('head').setAttribute('set', 'value');  
    //<div id="head" set='value'></div>
    
    //获取属性
    document.getElementById('head').getAttribute('set')
    //"value"  不存在为null

    原生JS DOM增删

    //已有元素前插入元素insertBefore
    <ul id="box">
      <li>001</li>
    </ul>
    var newItem=document.createElement("li")
    var lis=document.getElementsByTagName("li");
    var curItem = document.getElementById('box')
    newItem.innerHTML="002";
    curItem.insertBefore(newItem,lis[0]);
    //<ul id="box">
    //  <li>002</li>
    //  <li>001</li>
    //</ul>
    
    //已有元素内追加元素appendChild
    <ul id="box">
      <li>001</li>
    </ul>
    var newItem=document.createElement("li")
    var curItem = document.getElementById('box')
    newItem.innerHTML="002";
    curItem.appendChild(newItem);
    //<ul id="box">
    //  <li>001</li>
    //</ul>
    
    
    
    展开全文
  • 令人欣慰的是,使用JavaScript获取节点的方法有很多种,这里简单做一下总结:通过顶层document节点获取:document.getElementById(elementId)该方法通过节点的ID,可以准确获得需要的元素,是比较简单快捷的方法。...

    在Web应用程序特别是Web2.0程序开发中,经常要获取页面中某个元素,然后更新该元素的样式、内容等。如何获取要更新的元素,是首先要解决的问题。令人欣慰的是,使用JavaScript获取节点的方法有很多种,这里简单做一下总结:

    通过顶层document节点获取:

    document.getElementById(elementId)

    该方法通过节点的ID,可以准确获得需要的元素,是比较简单快捷的方法。如果页面上含有多个相同id的节点,那么只返回第一个节点。

    如今,已经出现了如prototype、Mootools等多个JavaScript库,它们提供了更简便的方法:$(id),参数仍然是节点的id。这个方法可以看作是document.getElementById()的另外一种写法,不过$()的功能更为强大,具体用法可以参考它们各自的API文档。

    document.getElementsByName(elementName)

    该方法是通过节点的name获取节点,从名字可以看出,这个方法返回的不是一个节点元素,而是具有同样名称的节点数组。然后,我们可以通过要获取节点的某个属性来循环判断是否为需要的节点。

    例如:在HTML中checkbox和radio都是通过相同的name属性值,来标识一个组内的元素。如果我们现在要获取被选中的元素,首先获取改组元素,然后循环判断是节点的checked属性值是否为true即可。

    document.getElementsByTagName(tagName)

    该方法是通过节点的Tag获取节点,同样该方法也是返回一个数组,例如:document.getElementsByTagName('A')将会返回页面上所有超链接节点。在获取节点之前,一般都是知道节点的类型的,所以使用该方法比较简单。但是缺点也是显而易见,那就是返回的数组可能十分庞大,这样就会浪费很多时间。那么,这个方法是不是就没有用处了呢?当然不是,这个方法和上面的两个不同,它不是document节点的专有方法,还可以应用其他的节点。

    通过父节点获取

    parentObj.firstChild

    如果节点为已知节点(parentObj)的第一个子节点就可以使用这个方法。这个属性是可以递归使用的,也就是支持parentObj.firstChild.firstChild.firstChild...的形式,如此就可以获得更深层次的节点。

    parentObj.lastChild

    很显然,这个属性是获取已知节点(parentObj)的最后一个子节点。与firstChild一样,它也可以递归使用。

    在使用中,如果我们把二者结合起来,那么将会达到更加令人兴奋的效果,即:parentObj.firstChild.lastChild.lastChild...

    parentObj.childNodes

    获取已知节点的子节点数组,然后可以通过循环或者索引找到需要的节点。

    注意:经测试发现,在IE7上获取的是直接子节点的数组,而在Firefox2.0.0.11上获取的是所有子节点即包括子节点的子节点。

    parentObj.children

    获取已知节点的直接子节点数组。

    注意:经测试,在IE7上,和childNodes效果一样,而Firefox2.0.0.11不支持。这也是为什么我要使用和其他方法不同样式的原因。因此不建议使用。

    parentObj.getElementsByTagName(tagName)

    使用方法不再赘述,它返回已知节点的所有子节点中类型为指定值的子节点数组。例如:parentObj.getElementsByTagName('A')返回已知的子节点中的所有超链接。

    通过临近节点获取

    neighbourNode.previousSibling

    获取已知节点(neighbourNode)的前一个节点,这个属性和前面的firstChild、lastChild一样都似乎可以递归使用的。

    neighbourNode.nextSibling

    获取已知节点(neighbourNode)的下一个节点,同样支持递归。

    通过子节点获取

    childNode.parentNode

    获取已知节点的父节点。

    上面提到的方法,只是一些基本的方法,如果使用了Prototype等JavaScript库,可能还获得其他不同的方法,例如通过节点的class获取等等。不过,如果能够灵活运用上面的各种方法,相信应该可以应付大部分的程序。

    展开全文
  • 原生js获取class

    2020-12-28 20:47:40
    //使用原生js时,通过class名称就可以得到相应的class名称标签组封装的函数//定义一个函数getClass(oParent,aClass);function getClass(oParent,aClass){ //oParent为要获取的className的父级元素对象var aEle = ...
  • 原生 JS 获取节点方法总结

    千次阅读 2019-01-26 10:42:28
    一、js获取节点的方式 1. 通过获取dom方式直接获取节点 其中test的父标签id的值,div为标签的名字。getElementsByTagName是一个方法。返回的是一个数组。在访问的时候要按数组的形式访问。 1 ...
  • 原生Js通过class属性值获取对象

    万次阅读 2016-01-04 15:03:31
    原生Js通过class属性值获取对象 window.onload = function(){ console.log(getElementByClassName("tag").length); console.log(getElementByClassName("tag")); } function getElementByClassName(classnames){ ...
  • 本篇文章记录了本人所知道的用原生JS获取到DOM元素节点的几种办法,做个记录,加深记忆,方便以后复习。 正文 本文所做演示基于下面的HTML结构: 本文内容通过个人理解的分类进行归纳总结,大致的目录骨架如下: ...
  • 那么样式表中的样式规则也应该可以被JS修改这篇主要是简单教大家如何读取样式表中的样式、以及如何修改样式表样式表(CSSStyleSheet)一般分为两种: 元素包含的样式表(HTMLLinkElement)// index.cssdiv {background-...
  • JS的方法会比JQUERY麻烦很多,主要则是因为FF浏览器,FF浏览器会把你的换行也当最DOM元素原生JS获取ID为test的元素下的子元素。可以用:var a = docuemnt.getElementById("test").getElementsByTagName("div"); ...
  • 现在我们讨论原生js获取DOM元素的CSS样式,注意是获取不是设置 在开始之前先说下获取最终应用在元素上的所有CSS属性对象的意思是,如果没有给元素设置任何样式,也会把浏览器默认的样式返回来。 1、ele.style 在...
  • div class="header-item" onclick='checked(this)'></div> function checked(even){ //获取所点击节点的父节点 const parent = even.parentNode; //获取所点击节点的父节点的所有子节点 const ...
  • 22 H5原生JS获取元素class属性值及操作 前面说到每一个预定义属性都有一个property与之对应。因为class是关键字因此attribute对应的property名称为className,通过className我们可以获取到元素class的属性值。 1...
  • <!... , initial-scale=1.0"> <title></title> ... <div id='box' class="a b c">...通过getAttribute('class')即可获取,或者是获取dom节点的className属性 运行上面的代码就会看到控制台输出对应的类名 a b c
  • 主要介绍了原生javascript实现获取指定元素下所有后代元素的方法,在进行web程序设计时是非常实用的技巧,需要的朋友可以参考下
  • 原生js获取body

    2021-01-14 19:34:12
    原生js获取鼠标坐标方法全面讲解-zmq原生js获取鼠标坐标方法全面讲解:clientX/Y,pageX/Y,offsetX/Y,layerX/Y,screenX/Y 一.关于js鼠标事件综合各大浏览器能获取到坐标的属性总共以下五种:eve ...兼容各版本浏览器&...
  • 大致看了一下,你的问题是下面这样的吗?...如果可以用jquery,直接用代理很少的代码就可以实现,如果用原生的话,可能就要写这么一堆代码了。初步用楼主提供的链接测试了一下,上面的代码应该可以达到目的。
  • 这些操作对于jquery来说很容易,但是对于原生js会稍微麻烦一些。 一、childNodes 子节点的操作,大部分人首先想到的肯定是“childNodes”。childNodes属性可以获取节点元素的子节点,并将获取到的子节点封装成一个...
  • 原生js获取class

    2019-09-24 07:24:38
    <script type="text/javascript"> window.onload=function(){ function getElementsClass(classnames){ var classobj= new Array();//定义数组 var classint=0;//定义数组的下标 var tags=...
  • 原生js获取DOM对象的几种方法

    万次阅读 多人点赞 2018-06-15 18:24:04
    通过id获取 &amp;amp;lt;div id=&amp;quot;box&amp;quot;&amp;amp;gt;&amp;amp;lt;/div&amp;amp;gt; &amp;amp;lt;script&amp;amp;gt; let box= document.getElementById(&...
  • 原生JS通过类名(className)获取dom元素

    千次阅读 2019-10-02 15:34:10
    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>test</title> </head> <...h2 class="test">class="example" 的标题&l...
  • 原生js获取元素: document.getElementById(‘idName’); document.getElementTagName(‘tagName’)[0]; document.getElementClassName(‘className’)[0]; 当然了,H5还出了两个获取元素的方法:(IE8以下不...
  • 一、js定位兄弟,父级,子级元素所有DOM方法var el = document.getElementById('xxx');var el = document.getElementByName('xxx');var els = document.getElementsByClassName('highlight');var els = document....
  • 一、原生JS获取DOM节点 获取节点的方式大致分querySelector系列和getElementsBy 系列,两种:querySelectorAll 属于 W3C 中的 Selectors API 规范 [1]。而 getElementsBy 系列则属于 W3C 的 DOM 规范 [2]。 ...
  • 在用vue框架写代码的时候,碰到个问题,想获取其中一个div的内容去做判断,html部分代码如下:{{presentContent}}js部分代码如下:presentClick(){let a=document.getElementsByClassName('present');let presentText=a[0...
  • //得到全部子节点childNodes document.getElementById(‘head’).childNodes //NodeList(5) [text, div.head_wrapper, text, div.headBlock, text] //得到父节点 document.querySelector(‘.head_wrapper’)....
  • * getParentTag - 获取传入标签的所有父级标签 * * @param { HTMLElement } startTag 初始dom节点 * @param {Array} parentTagList 初始dom节点的所有父级节点 * @return {type} 递归/初始dom节点的所有父级...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 20,671
精华内容 8,268
关键字:

原生js通过class获取节点