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
  }