JavaScript获取ul中li个数的方法 js获取ul第二个li

转载

charlesc 2023-12-07 07:15:20

文章标签 javascript 选择器元素节点类名 文章分类 JavaScript 前端开发

题目

1.js中创建元素的方式有几种，分别是什么？有什么特点？如何使用？

2.使用两种方式在ul的末尾添加一个li ，并在li中添加文本为：我是新来的

3.js获取元素的方式有哪些，

4.使用选择器名获取元素的方式有几种？，分别如何使用？，若没有该元素则返回？

5.使用选择器获取元素时，返回值为？

6.使用选择器获取多个元素和类名获取多个元素有什么区别

7.求下面代码的输出结果

8. console.log(newLi); 与console.dir(newLi);有什么区别

9.求下面代码的输出结果

10.在ul中的第一行

11.求下面代码的输出结果

12.什么是节点？节点的类型有哪些？

13.根据需求和相关代码写出相应的代码，

答案

1.js中创建元素的方式有几种，分别是什么？有什么特点？如何使用（可以举例）？

2.使用两种方式在ul中添加一个li ，并在li中添加文本为：我是新来的

3.js获取元素的方式有哪些，

4.使用选择器名获取元素的方式有几种？，分别如何使用？，若没有该元素则返回？

5.使用选择器(document.querySelectorAll('css选择器')获取元素时，返回值为？

6.使用选择器获取多个元素和类名获取多个元素有什么区别

7.求下面代码的输出结果

8. console.log(newLi); 与console.dir(newLi);有什么区别

9.求下面代码的输出结果

10.在ul中的第一行

11.求下面代码的输出结果

12.什么是节点？节点的类型有哪些？

13.节点与节点之间有什么关系？通过节点获取相关元素有哪几种方式？直接看第14题

14.根据需求和相关代码写出相应的代码，

题目

1.js中创建元素的方式有几种，分别是什么？有什么特点？如何使用？

2.使用两种方式在ul的末尾添加一个li ，并在li中添加文本为：我是新来的

<body>
    <ul>
      <li><a href="#">我司第1个</a></li>
      <li><a href="#">我司第2个</a></li>
      <li><a href="#">我司第3个</a></li>
      <li><a href="#">我司第4个</a></li>
      <li><a href="#">我司第5个</a></li>
    </ul>
  </body>

3.js获取元素的方式有哪些，

4.使用选择器名获取元素的方式有几种？，分别如何使用？，若没有该元素则返回？

5.使用选择器获取元素时，返回值为？

6.使用选择器获取多个元素和类名获取多个元素有什么区别

7.求下面代码的输出结果

var newLi = document.createElement("li");
    newLi.innerHTML = "我是新来的";
    console.log(newLi);

8. console.log(newLi); 与console.dir(newLi);有什么区别

9.求下面代码的输出结果

<body>
    <ul class="ul1">
      <li id="box">1</li>
    </ul>
    <ul class="ul2">
      <li>a</li>
      <li>b</li>
      <li>c</li>
    </ul>
  </body>

<script>    
    var ul2 = document.querySelector(".ul2");  
    var oldLi = document.querySelector(".ul2 li");
    console.log(oldLi);
  </script>

10.在ul中的第一行<li>a</li>前面添加<li>我是新来的</li>

<body>
    <ul class="ul1">
      <li id="box">1</li>
    </ul>
    <ul class="ul2">
      <li>a</li>
      <li>b</li>
      <li>c</li>
    </ul>
  </body>

<script>   
   
    console.log(ul2);
 </script>

11.求下面代码的输出结果

<body>
    <ul>
      <li><a href="#">我司第1个</a></li>
      <li><a href="#">我司第2个</a></li>
      <li><a href="#">我司第3个</a></li>
    </ul>
  </body>

var ul = document.querySelector('ul');
  var li = document.createElement('li');
  ul.appendChild(li);
  console.log(ul);

12.什么是节点？节点的类型有哪些？

13.根据需求和相关代码写出相应的代码，

<body>
    <div class="father">
      <div class="son">1</div>
      <div class="son">2</div>
      <div class="son">3</div>
      <!-- <div></div> -->
      <div class="son">4</div>
      <div class="son">5</div>
    </div>
  </body>

<script>


 
    var father = document.querySelector(".father");
     ？   //1.获取father中全部子元素

     ？   //2.获取father中第一个节点
     ？   //3.获取father中第一个元素节点  

     ？   //4.获取father中最后一个节点
     ？   //5.获取father中最后一个元素节点

    // console.log(nodes);




    //子元素获取父元素
    ？  //6.获取father的整个父元素以及父元素中的内容，包括了script
    ？  //7.获取father的/整个父元素以及父元素中的内容，包括了script

    // console.log(nodes);



    //兄弟节点
    var divs = document.querySelector(".father div:nth-child(3)");
 
   ？//8.获取divs的 上一个节点兄弟 (回车)
   ？//9.获取divs的上一个节点元素兄弟

   ？//10.获取divs的下一个节点兄弟 (回车)
   ？// 11.获取divs的下一个元素兄弟
  

    console.log(nodes); 
  </script>

答案

1.js中创建元素的方式有几种，分别是什么？有什么特点？如何使用（可以举例）？

第一题答案：

第一种：innerHTML

使用方式：元素.innerHTML='html方式的字符串

'ul.innerHTML = '<li><a href="#">我是新来的</a></li>'

特点：会覆盖之前的内容实现效率低

第二种 document.createElement()

用法： var 对象（element）=document.createElement('tagname')

// element 是一个元素对象

// TagName 标签名

特点：创建之后，不会自己出现在页面里面需要我们手动添加

内容属性都是空的可以自己定义实现效果高

var ul = document.querySelector('ul');//获取被添加的元素

  var li = document.createElement('li');//新建元素

  ul.appendChild(li);//将新建的元素加入到被添加的元素

2.使用两种方式在ul中添加一个li ，并在li中添加文本为：我是新来的

<body>
    <ul>
      <li><a href="#">我司第1个</a></li>
      <li><a href="#">我司第2个</a></li>
      <li><a href="#">我司第3个</a></li>
      <li><a href="#">我司第4个</a></li>
      <li><a href="#">我司第5个</a></li>
    </ul>
  </body>

方法一：

var ul = document.querySelector("ul");

ul.innerHTML ='<li><a href="#">我是新来的</a></li>';

方法二：

var li = document.createElement("li");

li.innerText = "我是新来的";

ul.appendChild(li);

3.js获取元素的方式有哪些，

id名类名标签名 name属性

选择器名

4.使用选择器名获取元素的方式有几种？，分别如何使用？，若没有该元素则返回？

第一种获取单个元素

用法 var element = document.querySelector(选择器)

var box=document.querySelector('.box');

第二种

获取多个元素

用法 var element = document.querySelectorAll('css选择器')

var box=document.querySelectorAll('.box');

返回:null

5.使用选择器(document.querySelectorAll('css选择器')获取元素时，返回值为？

返回值：返回一个nodelist对象是一个伪数组对象.里面有所有满足条件的元素

6.使用选择器获取多个元素和类名获取多个元素有什么区别

使用选择器获取的元素集合可以被forEach进行遍历

使用类名获取的元素集合无法使用forEach进行遍历，会报错

备注：使用Tagname 获取的元集合也不能用forEach进行遍历。

var box = document.querySelectorAll(".box");
    var box1 = document.getElementsByClassName("box");


    // 两种不同的集合的不同之处

//下面的代码不会报错
    box.forEach(function (e) {
      console.log(e);
    });



//下面的代码会报错

    box1.forEach(function (e) {
      console.log(e);
    });

7.求下面代码的输出结果

var newLi = document.createElement("li");
    newLi.innerHTML = "我是新来的";
    console.log(newLi);

<li>我是新来的</li>

8. console.log(newLi); 与console.dir(newLi);有什么区别

console.log(newLi); //log 什么都能输出

console.dir(newLi); //dir 只能输出对象

9.求下面代码的输出结果

<body>
    <ul class="ul1">
      <li id="box">1</li>
    </ul>
    <ul class="ul2">
      <li>a</li>
      <li>b</li>
      <li>c</li>
    </ul>
  </body>

<script>    
    var ul2 = document.querySelector(".ul2");  
    var oldLi = document.querySelector(".ul2 li");
    console.log(oldLi);
  </script>

10.在ul中的第一行<li>a</li>前面添加<li>我是新来的</li>

<body>
    <ul class="ul1">
      <li id="box">1</li>
    </ul>
    <ul class="ul2">
      <li>a</li>
      <li>b</li>
      <li>c</li>
    </ul>
  </body>

<script>   
    var ul2 = document.querySelector(".ul2");  
    var oldLi = document.querySelector(".ul2 li");
    var newLi = document.createElement("li");
    newLi.innerTEXT = "我是新来的";   
    ul2.insertBefore(newLi, oldLi);
    console.log(ul2);
 </script>

11.求下面代码的输出结果

<body>
    <ul>
      <li>我司第1个</li>
      <li>我司第2个</li>
    </ul>
  </body>

var ul = document.querySelector('ul');
  var li = document.createElement('li');
  ul.appendChild(li);
  console.log(ul);

<ul>

</ul>

12.什么是节点？节点的类型有哪些？

节点:树形结构里面的东西都是节点

目前接触到的节点 : 元素节点属性节点文本节点

13.节点与节点之间有什么关系？通过节点获取相关元素有哪几种方式？直接看第14题

通过父元素找子元素

var father = document.querySelector(".father");
 
    // var nodes = father.childNodes;   //全部子元素  
 
    // var nodes = father.firstElementChild; //第一个元素节点
    // var nodes = father.firstChild;  //第一个节点
 
    // var nodes = father.lastElementChild;//最后一个元素节点
    // var nodes = father.lastChild;  //最后一个节点

通过子元素获取父元素，两种方式结果是一样的

// var nodes  = father.parentNode;//整个父元素以及父元素中的内容，若结果为body则包括了script
  // var nodes = father.parentElement;//整个父元素以及父元素中的内容，若结果为body则包括了script

通过兄弟节点获取兄弟元素

var divs = document.querySelector(".father div:nth-child(3)");
 
   // var nodes = divs.previousElementSibling;//上一个节点元素兄弟
    // var nodes = divs.previousSibling;// 上一个节点兄弟 (回车)
   
    // var nodes = divs.nextElementSibling; // 下一个元素兄弟
    // var nodes = divs.nextSibling; //下一个节点兄弟 (回车)

14.根据需求和相关代码写出相应的代码，

<body>
    <div class="father">
      <div class="son">1</div>
      <div class="son">2</div>
      <div class="son">3</div>
      <!-- <div></div> -->
      <div class="son">4</div>
      <div class="son">5</div>
    </div>
  </body>

根据下拉script代码补充问号内容，注释为题目，别偷看13题

<script>


 
    var father = document.querySelector(".father");
     ？   //1.获取father中全部子元素

     ？   //2.获取father中第一个节点
     ？   //3.获取father中第一个元素节点  

     ？   //4.获取father中最后一个节点
     ？   //5.获取father中最后一个元素节点

    // console.log(nodes);




    //子元素获取父元素
    ？  //6.获取father的整个父元素以及父元素中的内容，包括了script
    ？  //7.获取father的/整个父元素以及父元素中的内容，包括了script

    // console.log(nodes);



    //兄弟节点
    var divs = document.querySelector(".father div:nth-child(3)");
 
   ？//8.获取divs的 上一个节点兄弟 (回车)
   ？//9.获取divs的上一个节点元素兄弟

   ？//10.获取divs的下一个节点兄弟 (回车)
   ？// 11.获取divs的下一个元素兄弟
  

    console.log(nodes); 
  </script>