DOM中的查找

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<ul id='ceshi'>
       <li>
       电影
       <ul>
           <li>后来的我们</li>
           <li>复仇者联盟</li>
           <li>死侍</li>
       </ul>
       </li>
       <li>
          电视剧
          <ul>
             <li>乡村爱情</li> 
             <li>杨光的快乐生活</li> 
             <li>亮剑</li> 
             <li>回村的诱惑</li> 
          </ul>
          
       </li>
       <li>
          综艺
          <ul class="main">
              <li>跑男</li>
              <li>跨界歌王</li>
              <li>创造101</li>
              <li>儿子去哪儿</li>
          </ul>
       </li>
       <li>
         动漫
         <ul>
             <li>海贼王</li>
             <li>不良人</li>
             <li>尸兄</li>
             <li>天线宝宝</li>
         </ul>
       </li>
   </ul>
    <input name="uname"></input>
    <script>
Dom: 操作页面元素(增删改查)
        
//  1.查找：
//     一.通过元素间的关系查找
//       1)父子关系
//       parentElement  查找一个元素的父元素
            console.log(ceshi.parentElement) //查找id为ceshi的父元素
                  ceshi.parentElement.style.backgroundColor='#ccf'; //设置ceshi父元素的背景色
//       
//       children   查找一个元素的所有子元素(输出为数组形式)
                console.log(ceshi.children); //查找id为ceshi的所有子元素(!结果为数组形式!)
                ceshi.children[2].style.color='#f00';//给ceshi的子元素中下标为2的设字体颜色
                
           var a=ceshi.children;        //给ceshi的所有子元素的设置字体颜色
                for(var i=0;i<a.length;i++){
                ceshi.children[i].style.backgroundColor='#0f0';
            }

           console.log(ceshi.children[2].children[0].children[2])
           var b=ceshi.children[2].children[0].children[2];
           b.style.color='#50f';

//       firstElementChild  查找一个元素的第一个子元素(输出为原来的形式)
//       lastElementChild  查找一个元素的最后一个子元素(输出为原来的形式)
           // console.log(ceshi.firstElementChild.)

//       2）兄弟关系
//       previousElementSibling   前一个兄弟
//       nextElementSibling    下一个兄弟
           
//          找 阳光的快乐生活
           var c=ceshi.firstElementChild.nextElementSibling.children[0].firstElementChild.nextElementSibling;
           console.log(c);
           c.style.backgroundColor='#00f';

//          找 回村的诱惑
           var d=ceshi.children[2].previousElementSibling.firstElementChild.lastElementChild;
           console.log(d);
           d.style.color='#ff0';

//          找 儿子去哪儿
           var e=ceshi.firstElementChild.nextElementSibling.nextElementSibling.firstElementChild.lastElementChild
           console.log(e);
           e.style.backgroundColor='#0ff';
        
        
//     二.通过HTML查找
//       1）通过id查找
//        var ele=document.getElementById('id号'); //只能找到一个
           var id=document.getElementById('ceshi');
           console.log(id);
           id.style.backgroundColor='#f0f';
         
//       2)通过class查找
//        var ele=document.getElementsByClassName('class名'); //可以找到多个  并且返回一个动态集合(数组)
           var main=document.getElementsByClassName('main');
           console.log(main);
           main[0].style.backgroundColor='#ff0';
       
//       3)通过标签名查找
//        var ele=document.getElementsByTagName('标签名') //可以找到多个  并且返回一个动态集合(数组)
           var li=document.getElementsByTagName('li');
           console.log(li);
           for(var i=0;i<li.length;i++){
               li[i].style.color='#c2c';
           };
        
//       4)通过name属性查找    
         var  ele=document.getElementsByName('name'); //可以找到多个  返回动态集合 (数组)
           var uname=document.getElementsByName('uname');
           console.log(uname)
        
//     三.通过选择器查找
//       1) var ele=document.querySelector('选择器');  //只能找到一个
               var lia=document.querySelector('#ceshi>li>ul>li:last-child');
               console.log(lia);
               lia.style.color='#f0f';
//       2) var ele=document.querySelectorAll('选择器'); 查找所有   返回动态集合 (数组)
               var liall=document.querySelectorAll('.main>li');
               console.log(liall);
               for(var i=0;i<liall.length;i++){
                   liall[i].style.backgroundColor='#cf0';
               }
      
    </script>
</body>
</html>
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 216,544评论 6赞 501
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 92,430评论 3赞 392
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 162,764评论 0赞 353
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 58,193评论 1赞 292
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 67,216评论 6赞 388
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 51,182评论 1赞 299
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 40,063评论 3赞 418
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 38,917评论 0赞 274
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 45,329评论 1赞 310
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,543评论 2赞 332
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,722评论 1赞 348
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 35,425评论 5赞 343
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 41,019评论 3赞 326
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,671评论 0赞 22
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,825评论 1赞 269
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 47,729评论 2赞 368
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 44,614评论 2赞 353

推荐阅读更多精彩内容