JavaScript基础 实现动态创建列表

js基础

获取元素的六种方式 :
	  1、通过ID获取           获取单个元素
      2、通过类名获取          取多个元素
      3、通过标签名获取        获取多个元素
      4、通过name名获取        获取多个元素
      5、通过querySelector()获取  获取单个元素   获取指定选择器的第一个元素  参数是选择器    
      6、通过querySelectorAll()获取  获取多个元素  获取指定选择器的全部元素  参数是选择器
  <header id="head">我是头部标签</header>
  <div class="box">我是盒子一</div>
  <div class="box">我是盒子二</div>
  <div class="box">我是盒子三</div>

  <input type="text" name="user">
  <div name="user">盒子</div>


  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
  </ul>

脚本:

// 1、通过ID名获取
  var head = document.getElementById('head')
  console.log(head);


  // 2、通过类名获取
  var boxArr = document.getElementsByClassName('box')
  console.log(boxArr);
  // 伪数组 :拥有索引、长度length 可以进行循环遍历  但是不能用数组中专有的方法
  for (var i = 0; i < boxArr.length; i++) {
    console.log(boxArr[i]);
  }


  // 3、通过标签名获取
  var divArr1 = document.getElementsByTagName('div')
  console.log(divArr1);


  // 4、通过name获取
  var user = document.getElementsByName('user')
  console.log(user);



  // 5、通过querySelector()获取
  var div1 = document.querySelector('div')
  console.log(div1);


  // 6、通过querySelectorAll()获取
  var lilist = document.querySelectorAll('li')
  console.log(lilist);

事件

事件的三要素 : (重点)(提问)
        1、事件源 :被触发的元素
        2、事件类型 :事件触发的方式 (鼠标事件 键盘事件 浏览器事件)
        3、处理程序 :事件触发后要执行的代码(以函数的形式)

绑定事件  (重点)
事件源.事件类型=事件的处理程序


事件是异步的

创建元素的三种方式 :

1、document.write ()  弊端 :只能在body区域内添加标签

2、innerHTML  弊端 :覆盖掉原来的元素

 3、document.createElement()
      (1)创建元素 :var 变量名 = document.createElement('标签名')
      (2)添加元素 :父元素.append Child(创建的元素)
      (3)设置属性 :创建的元素.setAttribute('属性名','属性值')
      (4)添加文本内容 :创建的元素.innerText ='文本内容'
  删除元素 :父元素.remove(创建的元素)
<div id="box">
    <span id="span1">111</span>
  </div>

脚本

	var h1 = document.createElement('h1')
 	console.log(h1);
  	box.appendChild(h1)
  	h1.setAttribute('class', 'h1')
  	h1.innerText = '我是标题标签'
  	// 删除元素  removeChild()
  	box.removeChild(h1)
动态创建列表 :

以下为代码片段 :

思路 :
      1、搭建静态页面
      2、获取元素
      3、创建数组
      4、给按钮绑定事件
      5、创建ul
      6、遍历数组
      7、在ul里创建li
      8、将数组中的内容放到li中
      9、给li移入、移出事件
      10、点击删除
      11、按钮禁用
 #btn {
    width: 300px;
    height: 100px;
  }

  #box {
    margin-top: 20px;
    width: 300px;
    height: 400px;
    border: 3px solid red;
  }
 <!-- 1 -->
  <button id="btn">点我创建动态的无序列表</button>
  <div id="box"></div>
// 2、
  var btn = document.getElementById('btn');
  var box = document.getElementById('box')
  console.log(btn, box);

  // 3、
  var arr = ["降龙十八掌", "吸星大法", "葵花宝典", "辟邪剑谱", "乾坤大挪移", "独孤九剑", "六脉神剑"];

  // 4、
  btn.onclick = function () {
    // 5、
    var ul = document.createElement('ul')
    console.log(ul);;
    box.appendChild(ul);

    // 6、
    arr.forEach(function (value, index) {

      // 7、
      var li = document.createElement('li')
      ul.appendChild(li);

      // 8、
      li.innerText = value;
      li.setAttribute('class', 'li' + (index + 1));
      // 9、
      li.onmouseover = function () {
        this.style.backgroundColor = 'red';
      }
      li.onmouseout = function () {
        this.style.backgroundColor = '';
      }
      li.onclick = function () {
        ul.removeChild(this);
      }
    })
    this.disabled = true
  }
  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值