精华内容
下载资源
问答
  • 有些时候,在一个网页的ul li中,存在左右两个部分的内容,但是右边元素内容又是不固定,左边元素相对应的不能用固定宽度,所有需要我们动态的获取右边元素宽度,来赋值给左边元素的marginRight值。 HTML结构: ...
  • 有些时候,在一个网页的ul li中,存在左右两个部分的内容,但是右边元素内容又是不固定,左边元素相对应的不能用固定宽度,所有需要我们动态的获取右边元素宽度,来赋值给左边元素的marginRight值。 HTML结构: ...

    有些时候,在一个网页的ul li中,存在左右两个部分的内容,但是右边元素内容又是不固定,左边元素相对应的不能用固定宽度,所有需要我们动态的获取右边元素宽度,来赋值给左边元素的marginRight值。

    HTML结构:

    <ul class="itemCon">
        <li class="item">
            <div class="leftMess">
                <div class="leftCon">
                    <span>头像</span>
                    <p>名字名字名字名字名字名字名字名字名字名字名字名字名字名字名字名字</p>
                </div>
            </div>
            <div class="rightMess">
                <span>工具1</span>
                <span>工具2</span>
                <span>工具3</span>
            </div>
        </li>
        <li class="item">
            <div class="leftMess">
                <div class="leftCon">
                    <span>头像</span>
                    <p>名字名字名字名字名字名字名字名字名字名字名字名字名字名字名字名字</p>
                </div>
            </div>
            <div class="rightMess">
                <span>工具2</span>
                <span>工具3</span>
            </div>
        </li>
        <li class="item" id="test">
            <div class="leftMess">
                <div class="leftCon">
                    <span>头像</span>
                    <p>名字名字名字名字名字名字名字名字名字名字名字名字名字名字名字名字</p>
                </div>
            </div>
            <div class="rightMess">
                <span>工具3</span>
            </div>
        </li>
    </ul>

    配上CSS:

    html,body{padding:0;margin:0}
    ul,li{list-style:none;padding:0;margin:0}
    p{margin:0;padding:0}
    .itemCon{width:450px;height:auto; margin:100px auto; background:#ccc; overflow:hidden}
    .item{width:100%; float:left;height:60px;border-bottom:solid 1px #f00; position:relative}
    .leftMess{ height:60px;}
    .leftCon{ float:left; height:60px; overflow:hidden;width:100%}
    .leftMess span{ display:inline-block;width:50px;height:50px; border-radius:50%; background:#f00; text-align:center; line-height:50px; margin:5px; float:left}
    .leftMess p{ margin-left:60px}
    .rightMess{width:auto;height:60px; position:absolute;right:0;top:0}
    .rightMess span{width:50px; height:50px; line-height:50px; text-align:center; margin:5px; float:left; background:#f00}

    最后JS代码:

    <script type="text/javascript">
        var divs = document.getElementsByClassName('item');
        for (var i = 0; i < divs.length; i++) {
            var lastW = divs[i].children[1].offsetWidth;
            divs[i].children[0].style.marginRight=lastW+"px"
        }
    </script>

    最终效果图:

    是不是很方便!

    转载于:https://www.cnblogs.com/studycc/p/6179696.html

    展开全文
  • 由于JS内置获取子元素节点方法(children)不兼容低版本浏览器(ie 6-8),通过获取所有子节点(childNodes)方法获取所有子节点,循环判断取出元素子节点,存储在数组里,循环数组判断取出数组元素和传递元素相同的...

    好几天没有写博客了,今天分享下JS如何获取指定元素下指定的子元素。

    原理:

    由于JS内置获取子元素节点方法(children)不兼容低版本浏览器(ie 6-8),通过获取所有子节点(childNodes)方法获取所有子节点,循环判断取出元素子节点,存储在数组里,循环数组判断取出数组元素和传递元素相同的元素节点,具体见下面代码。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>获取指定元素下指定子元素children兼容写法</title>
        <style type="text/css">
        #create{width: 500px;height: 500px;margin:50px auto;border:1px solid red;}
        p{background: blue;border-bottom: 1px solid #fff;width: 100%;height: 20px;}
        </style>
        
    </head>
    <body>
        <div id="create">
           <p></p>
           <p></p>
           <div></div>
           <div>
             <p></p>
             <p></p>
           </div>
           <p></p>
        </div>
        <script>
           var creat = document.getElementById("create");
    
           function children(curEle,tagName){
                   var nodeList = curEle.childNodes;
                   var ary = [];
                   if(/MSIE(6|7|8)/.test(navigator.userAgent)){
                       for(var i=0;i<nodeList.length;i++){
                           var curNode = nodeList[i];
                           if(curNode.nodeType ===1){
                              ary[ary.length] = curNode;
                           }
                       }
                   }else{
                       ary = Array.prototype.slice.call(curEle.children);
                   }
                   
                   // 获取指定子元素
                   if(typeof tagName === "string"){
                       for(var k=0;k<ary.length;k++){
                         curTag = ary[k];
                         if(curTag.nodeName.toLowerCase() !== tagName.toLowerCase()){
                          ary.splice(k,1);
                          k--;
                         }
                       }
                   }
    
                   return ary;
           }
           console.log(children(create,"div"));
        </script>
    </body>
    </html>

     

    转载于:https://www.cnblogs.com/wenjiajia/p/6003729.html

    展开全文
  • 关于原生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的最后一个子节点

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

    展开全文
  • 这里我介绍几个原生js获取元素子节点的方法:一、通过标签的属性值获取后代节点以getElementBy开头的方法,可以根据具体的属性获取元素的后代节点。这些方法不只会获取节点,他也会获取到所...

    每个网页都是一个dom树,网页中所有的内容都是这个树上的一个节点。JavaScript的工作就是操作这些节点,对节点进行查增删改操作,或是给节点绑定事件。

    网页

    dom树

    要操作dom节点,首先要获取到dom节点。这里我介绍几个原生js获取元素子节点的方法:

    一、通过标签的属性值获取后代节点

    以getElementBy开头的方法,可以根据具体的属性获取元素的后代节点。这些方法不只会获取子节点,他也会获取到所有符合条件的后代节点。

    方法

    依据属性

    兼容性

    其他

    getElementById

    id

    兼容性好,推荐使用

    如果存在多个id相同的元素,只会返回第一个

    getElementsByTagName

    标签名

    不兼容ie8及以下版本

    返回所有符合条件的元素的集合

    getElementsByName

    name

    不兼容ie8及以下版本

    返回所有符合条件的元素的集合

    getElementsByClassName

    class

    不兼容ie8及以下版本

    返回所有符合条件的元素的集合

    以getElementById为例,尽管有两个id为’Jan‘的元素,但是只会获取到第一个:

    1

    2

    3

    varj=document.getElementById('Jan');

    console.log(j);

    需要注意的是,在同一个文件中出现重复id是不符合规范的,应当尽量避免这样使用。

    如果将上面代码中的getElementById('Jan')换成 getElementsByTagName('p')或者是getElementsByClassName('test')将会获取到符合条件的结果集。

    二、child属性

    每个dom元素都是一个对象,在dom元素对象中有四个专门用于获取子元素的属性:

    属性名

    作用

    其他

    childNodes

    获取所有子节点

    不推荐使用,如果有空格,会作为文本节点获取到

    child

    获取所有子节点

    推荐使用

    firstChild

    获取首个子节点

    推荐使用

    lastChild

    获取最后一个子节点

    推荐使用

    这四个属性都不存在兼容性问题,除了childNodes之外都是比较好用的。

    1. childNodes

    childNodes属性可以获取元素的所有子节点,并封装到一个数组中,可以通过下标来获取某个子元素:

    1

    3

    5

    展开全文
  • 需求:在vue中使用v-for循环出来的元素,设置动态id,之后获取下面的所有textarea标签 template: <table cellpadding = 2 v-for="(item, index) in arrData" :key="index" cellspacing = 0 :id="'table' + ...
  • 1、parentElement获取父元素节点var box=document.getElementById("box").parentElement;...2、children获取所有子元素节点var childs=document.getElementById("box").children;返回一个数组,childre
  • 展开全部找父元素节点的方法有:1)原生方法元素.parentNode 返回元素的第一32313133353236313431303231363533e59b9ee7ad9431333337613839个父节点2)Jquery方法(记得导包)元素.parent() 返回元素的第一个父节点元素....
  • 原生js元素历遍

    2013-05-07 09:57:00
    父元素: parentNode;(没有兼容性问题); offsetParent;... 标准的,它返回指定元素的子元素集合,包括HTML节点,所有属性 文本。可以通过nodeType来判断是哪种类型的节点,只有当nodeType==1时才是元素...
  • 键盘事件监听@keyup.native @keyup.native="tdItem.onKeyUp($event, trItem, trIndex)"  (item , row , index)    .native在父组件中给组件绑定一个原生的事件,就将组件...// 获取所有input let inpu...
  • 原生JS节点操作

    2018-02-23 11:34:00
    获取子元素的元素节点(只包括元素节点) 注意:在IE中,children包含注释节点。 2. childNodes 是标准属性。返回所有子节点。包括文本节点。 注意:  (1)nodeType 返回节点类型的值,一般是整数  常用的...
  • js原生递归获取,直接源码: <script>  var child = document.children;  var arr = [];//用来存放获取到的所有的标签  function fn(obj){  for(var i=0;i<obj.length;i++){  if(obj[i].children)...
  • 【注意】原生js的引入需要放到最下方,因为需要等整个dom加载完后,才加载js jquery可以随处写 二、步骤分解 1.获取元素 // 针对navline只需改变offsetleft和width即可 // 1.获取元素 var nav = document.query...
  • 引子:原生JS貌似没有获取元素已绑定事件的方法,查了查实在没找到,只能自个儿写一个了 有人说让用Chrome的window.getEventListeners(elemObj)去获取,可是我的还是报错,实在没辙了,用最笨的办法一劳永逸吧,懒人...
  • 很久没有用原生js了,所以误以为childNodes是获得当前元素所有子节点,后来才发现只是获取当前元素的直接子节点。。。如果能一下子获取所有节点那太简单了,直接统计就行了。可是这个只能获取直接子节点,所以还得...
  • attribute 是原生js dom 对象上的一个属性,这个属性有很多属性,比如 isId(判断属性是否是Id) , name (获取属性名称) , value(获取属性值),attributes 用来获取dom元素所有属性集合。 话不多说,上例子...
  • innerText,innerHTML,value是dom对像 ...innerHTML和html()获取指定元素内的所有子元素(包含标签) this.value是js原生代码对浏览器中的元素的访问方式; $(this).val()是针对原生访问做的封装,一般是访问标签中...
  • jQuery(3)-选择器

    2020-03-25 20:20:59
    原生JS获取元素的方式很多很杂,且兼容性不一致,因此jQuery做了封装,是获取元素统一标准 1.基础选择器 $("选择器"); 2.层级选择器 //代选择器 $("ul>li") //后代选择器 $("ul li"); 3.隐式迭代(重要) 遍历...
  • 前端面试六

    2019-03-21 16:27:04
    26、用js或jQuery获取id为container的div里边... 这里主要是第几个子元素使用css属性nth-child(index),index从1开始 27、请用jquery和原生js分别实现创建、添加、复制、移除、移动、和查找DOM结点 ●js 创建DOM...
  • 文本值相关操作

    2020-06-29 22:14:18
    ') //为所有div设置标签p。 //亦可设置div内部的文本。 $('div').html('uuuu') //设置所有div的文本为“uuuu” 获取html: $('div').html() //获取第一个div的标签内的html。 (2)text()方法(与原生js的...
  • attribute 是原生js dom 对象上的一个属性,这个属性有很多属性,比如 isId(判断属性是否是Id) , name (获取属性名称) , value (获取属性值),attributes 用来获取dom元素所有属性集合。 话不多说,上例子...
  • 超实用的jQuery代码段

    2019-03-04 10:20:41
    7.8 获取图片原生尺寸的方法 7.9 检查图像是否已经被完全加载 7.10 单击改变背景图案 7.11 如何显示Flickr网站的图片 7.12 如何显示Google Picasaweb的图片 7.13 按比例调整图片的大小 7.14 滑动效果的背景图片 7.15...
  • 理解作用域链是Js编程中一个必须要具备的,作用域决定了变量和函数有权力访问哪些数据。在Web浏览器中,全局执行环境是window对象,这也意味着所有的全局变量或者方法都是window对象的属性或方法...
  • 使用这些扩展的JS函数的时候就跟调用原生JS函数一样方便,只需要在函数前边加上external.即可。 使用示例: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <body&...
  • 精通AngularJS part1

    2016-10-10 15:32:02
    Plunker与jsFiddle10 IDE扩展和插件10 12AngularJS速成10 HelloWorld——AngularJS示例10 双向数据绑定12 AngularJS中的MVC模式12 鸟瞰13 深入作用域15 视图21 模块与依赖注入26 模块26 协作对象27 注册...
  • <p>Dep : 用于收集当前响应式对象的依赖关系,每个响应式对象包括对象都拥有一个 Dep 实例(里面 subs 是 Watcher 实例数组),当数据有变更时,会通过 dep.notify()通知各个 watcher。 <p>Watcher : ...
  • 见 <a href="https://github.com/angular/angular.js/blob/master/CHANGELOG.md#156-arrow-stringification-2016-05-27">CHANGELOG</a>)中,如果require对象中属性名和require的控制器同名,...

空空如也

空空如也

1 2
收藏数 36
精华内容 14
关键字:

原生js获取所有子元素