1.DOM操作
DOM(document object mode的缩写) - 文本对象模型
a.documrnt：js会将整个当前网页转换成一个js对象叫document
如果想要通过js获取网页中的内容，必须通过document来获取
(这个系统是系统创建的，会使用就行)
b.document结构：是一个树结构，树下面就是各种节点(Node，是js中element对象指向的html中的标签)；
Element对象有哪些属性，就看Element对应的标签有哪些html属性
(节点即标签)
2.BOM操作

3.事件

DOM节点操作

<p id="p1">这是段落</p>
<img src="img/luffy.jpg"/>
<br />
<div id="div1" class="c1">
这是div
<p id="p2">这是段落2</p>
</div>
<div class="c1">
...
</div>
<div id="div2">
<h1>标题1</h1>
<h1>标题2</h1>
</div>

1.获取节点

1.1直接获取节点

a)通过id值来获取节点
补充：HTML标签在js中全部都是对象，标签的属性就是对象的属性；
双标签的内容对应的是innerText和innerHtml属性
innerHtml指向的是内容的文本和标签；innerText指向内容中的文本(自己和所有子标签的文本)

pNode = document.getElementById('p1')
console.log(pNode, typeof(pNode), pNode.id, pNode.innerText, pNode.innerHTML)

divNode = document.getElementById('div1')
console.log('html:',divNode.innerHTML)
console.log('text:',divNode.innerText)

//divNode.innerHTML = '<a href="http://www.baidu.com">这是超链接</a>'
//divNode.innerText = '<a href="http://www.baidu.com">这是超链接</a>'

b) 通过class值获取节点：document.getElementsByclassName(class属性) - 返回一个数组

c1NodeArray = document.getElementsByClassName('c1')
console.log(c1NodeArray, typeof(c1NodeArray))

//根据下标获取元素
imgNode = c1NodeArray[1]
imgNode.title = '路飞'

c) 通过标签名获取节点：document.getElemensByTagName（标签名) - 返回一个数组

pNode = document.getElementsByTagName('P')
console.log(pNode)

d)通过name属性获取节点(被淘汰)：document.getElementsByName(name属性值)

// document.getElementsByName()

1.2获取父节点

// 子节点.parentElement - 获取指定节点对应的父节点
bodyNode = pNode.parentElement
console.log(bodyNode)

1.3获取子节点(所有的) - 返回数组

a) 获取所有的子节点：节点.children - 获取所有的子节点(不会获取孙子节点)

children1 = bodyNode.children
console.log(children1)

// children2 = bodyNode.childNodes
// console.log(children2)

b) 获取第一个子节点：节点.firstElementChild

firstNode = bodyNode.firstElementChild
console.log(firstNode)

c) 获取最后一个子节点

lastNode = bodyNode.lastElementChild
console.log(lastNode)

2.创建节点

document.createElement(标签名) - 创建指定标签对象的节点对象
注意：创建的节点在添加到网页中之前是不会显示的

inputNode = document.createElement('input')

3.添加节点

div2Node = document.getElementById('div2')
// 节点1.appendChild(节点2) - 在节点1的最后添加节点2
div2Node.appendChild(inputNode)

// 节点1.insertBefore(插入节点, 节点3) - 在节点1中的节点3前插入节点
div2Node.insertBefore(inputNode, div2Node.firstElementChild)

/*上面添加节点添加了两次，但是实际上只能添加一次节点，因为节点只有一个*/

4.拷贝节点
节点.cloneNode() - 赋值指定节点，产生一个新的节点

inputNode2 = inputNode.cloneNode()
inputNode2.placeholder = '新节点'
div2Node.appendChild(inputNode2)

5.删除节点
a) 节点1.removeChild(节点2) - 删除节点1中的子节点节点2

div2Node.removeChild(div2Node.firstElementChild)

b) 节点.remove() - 删除指定节点(节点里面的子节点也会被删除)

div2Node.remove()

练习

<table border="" cellspacing="1" cellpadding="" id="table">
  <tr id="tr1">
    <td>11</td>
    <td>12</td>
    <td>13</td>
  </tr>
  <tr id="tr2">
    <td>21</td>
    <td>22</td>
    <td>23</td>
  </tr>
  <tr id="tr3">
    <td>31</td>
    <td>32</td>
    <td>33</td>
  </tr>
</table>

1. 用js将table的背景色设置为随机颜色
2. 将第一列的文字颜色全部变成红色
3. 在最后插入一行表格，内容分别是41,42,43

<script type="text/javascript">
  /*// 产生1-10的随机整数(不包括10)
  randomNum = parseInt(Math.random()*10+1)
  console.log(randomNum)

  // 产生0-255的随机整数(不包括255)
  randomNum = parseInt(Math.random()*255)
  console.log(randomNum)*/

  // 1) 用js将table的背景色设置为随机颜色
  //获取table节点
  tableNode = document.getElementById('table')
  //产生随机颜色
  red = parseInt(Math.random()*256)
  green = parseInt(Math.random()*256)
  blue = parseInt(Math.random()*256)
  // 设置背景颜色属性
  tableNode.style.backgroundColor = 'rgba('+red+','+green+','+blue+','+'0.5)'

  //2) 将第一列的文字颜色全部变成红色
  trNodes = document.getElementsByTagName('tr')
  console.log(trNodes)
  for(x in trNodes){
  console.log(x)
  if(x == 'length'){
  break
  }
  //获取每个tr
  trNode = trNodes[x]
  //获取每一行的第一个td
  tdNode = trNode.firstElementChild
  //修改文字颜色
  tdNode.style = 'color:red; font-size:25px'
  }

  //3) 在最后插入一行表格，内容分别是41,42,43
  trNode = document.createElement('tr')
  //tdNode = document.createElement('td')
  //tdNode.innerText = '41'
  //trNode.appendChild(tdNode)

  //tdNode = tdNode.cloneNode()
  //tdNode.innerText = '42'
  //trNode.appendChild(tdNode)

  //tdNode = tdNode.cloneNode()
  //tdNode.innerText = '42'
  //trNode.appendChild(tdNode)
  for(x=1;x<=3;x++){
    tdNode = document.createElement('td')
    tdNode.innerText = '4'+x
    trNode.appendChild(tdNode)
  }

  tableNode.appendChild(trNode)
</script>

BOM操作

<script type="text/javascript">
  // 1.什么是BOM
  // BOM(browser object model)浏览器对象模型
  // js自带一个window对象,指向当前浏览器；js中所有的全局变量都是绑定在window对象上的属性
  // 在使用的时候，window可以省略
  num = 10  // 相当于window.num = 10
  console.log(window.num, num)

  function func1(){
  console.log('这是函数')
  }
  window.func1()

  // 2.window基本操作
  // 1) 打开新的窗口
  // open(url, name属性, 窗口大小)
  // 1) 打开新的窗口：open(url)  -  在新的窗口中打开新页面，返回新窗口的对象
  //    new_window = window.open('http://ww.baidu.com')
  //    console.log(new_window)
  // b) 打开新的窗口,同时设置窗口的宽度和高度
  //    new_window2 = open('','','width=400,height=300')

  // 2) 关闭窗口
  // 窗口对象.close()
  // window.close() / close() - 关闭当前窗口
  // close()

  // 关闭其他窗口
  // new_window.close()

  // 3)移动窗口 (只能移动小窗口)
  new_window2.moveTo(100, 100)

  // 4)获取窗口的宽度和高度
  // innerWidth/innerWidth - 获取浏览器能够显示内容的部分的宽高
  //    console.log(window.innerWidth, window.innerWidth)

  // outerWidth/outerHeight - 整个浏览器的宽高
  //    console.log(window.outerWidth, window.outerHeight)

  // 3.弹框
  // 1) 只有确定按钮再加提示信息的弹框
  alert('提示信息！')

  // 2) 一个提示信息，再加确定和取消按钮；根据返回值是true还是false来判断选择的是确定还是取消
  result = confirm('是否删除？')
  console.log(result)

  // 3) 一个提示信息，再加一个输入框和取消确定按钮；根据返回值是否是null判断点击的是取消还是确定
  result = prompt('提示信息标题','输入框中默认值')
  console.log()
</script>

定时事件

<script type="text/javascript">
  // 1.setTimeout - 开启定时
  /*
  setTimeout(函数, 定时时间, 实参列表) - 指定时间后调用指定函数,并且传入指定的参数；返回一个定时器对象
  函数 - 可以是匿名函数，也可以是普通函数的函数名
  定时时间 - 单位是毫秒
  参数列表 - 给函数提供参数
  **/
  t1 = setTimeout(function(){
    console.log('时间到')
  }, 1000)

  t2 = setTimeout(function(name, age){
    console.log(name, age)
  }, 5000, '小明', 18)

  // t1和t3的功能一样
  function timeFunc(){
    console.log('时间到了。')
  }
  t3 = setTimeout(timeFunc(), 1000)

  /*
  2) setInterval(函数, 定时时间, 参数列表) - 每隔指定的时间调用一次函数
  * */
  num = 1
  t4 = setInterval(function(){
    num ++
    console.log('~~~:',num)
    if(num == 10){
      clearInterval(t4)
    }
  }, 1000)
  // 2.清除定时
  // clearTimeout(定时对象)
  clearTimeout(t2)

  // clearInterval(定时对象)

  //练习：实现5s后自动跳转页面
  divNode = document.getElementById('div1')
  lab = document.createElement('label')
  timeNum = 5
  t5 = setInterval(function(){
    timeNum --
    lab.innerText = timeNum+'S后跳转页面'
    divNode.appendChild(lab)
    if(timeNum == 1){
      clearInterval(t5)
      open('http://www.baidu.com')
    }
  }, 1000)
</script>

自动跳转

<p id="p1">5秒后自动跳转</p>
<script type="text/javascript">
  time = 5
  pNode = document.getElementById('p1')
  t1 = setInterval(function(){
    time--
    if(time == 0){
      open('http://www.baidu.com')
      clearInterval(t1)
    }
    pNode.innerText = time+'秒后自动跳转'
  }, 1000)
</script>

事件

<!--事件绑定方式1(不推荐使用)-->
  <button onclick="alert('...')">按钮1</button>
  <button id="btn1" onclick="btnClick()">删除1</button>
  <button id="btn2" onclick="btnClick()">删除2</button>
  <br /><br />
        
  <!--事件绑定方式2(推荐使用)-->
  <button id="btn3">删除3</button>
  <button class="btn1">删除3</button>
  <button class="btn1">删除4</button>
  <button class="btn1">删除5</button>
  <br /><br />

<!--事件绑定方式3(推荐使用)-->
<button id="btn4">按钮</button>

<script type="text/javascript">
  // js是事件驱动语言
  // 1.事件三要素：事件源、事件、事件驱动程序
  // 事件源发生某个事件就做什么事情(事件驱动程序)
  // 2.事件的绑定
  // 1) 在标签内部给标签的事件属性赋值
  // 注意：这种方式绑定的时候，this指向的是window
  function btnClick(){
    console.log(this)
    result = confirm('是否删除')
    if(result){
      document.getElementById('btn1').remove()
    }
  }

  // 2) 通过给节点对象的事件属性赋值来绑定
  // 注意：这种方式绑定的时候,this指向的是事件源
  btnNode = document.getElementById('btn3')
  // 給事件属性赋函数名
  btnNode.onclick = btnClick

  // 获取所有class值是btn1的标签对应的节点
  btn1Nodes = document.getElementsByClassName('btn1')
  for(x=0;x<btn1Nodes.length;x++){
  btn1Node = btn1Nodes[x]
    // 給事件属性赋匿名函数
    btn1Node.onclick = function(){
      console.log(this)
      result = confirm('是否删除')
      if(result){
      this.remove()
      }
    }
  }

  // 3) 通过addEventListener方法进行绑定
  /*
  a.语法
  事件源节点.addEventListener(事件名称，函数驱动程序)
  b.说明
  事件名称 - 事件属性名去掉on
  事件驱动程序 - 事件发生后需要调用的函数
  c.注意
  this是事件源
  可以给同一个节点的同一个事件绑定不同是事件驱动程序
  * */
  btn4Node = document.getElementById('btn4')
  btn4Node.addEventListener('click', function(){
    console.log(this)
  alert('你好')
  })
  btn4Node.addEventListener('click',function(){
    this.style.color = 'red'
  })
</script>

常见事件类型

<script type="text/javascript">
  // 1.onload事件 - 页面加载完成对应的事件(标签加载成功)
  window.onload = function(){
    // 在这儿的代码，在页面加载完成后才会执行
    pNode = document.getElementById('p1')
    console.log(pNode)
  }
</script>

<script type="text/javascript">
  // 2.鼠标事件
  pNode = document.getElementById('p1')
  // 1) onclick - 鼠标点击事件
  pNode.onclick = function(evt){
    alert('p标签被点击')
    console.log(evt)
  }

  // 2) onmouseover - 鼠标悬停事件
  pNode.onmouseover = function(){
    // alert('鼠标移动到标签上')
    this.style = 'background-color:yellow'
  }

  // 3) onmouseout
  pNode.onmouseout = function(){
    this.style = 'background-color:pink'
  }


  // 3.键盘事件
  // 键盘事件一般绑定在输入框对应的标签上
  // 1) onkeypress - 按下弹起
  inputNode = document.getElementById('input1')
  inputNode.onkeypress = function(){
    console.log('键盘按下弹起')
    console.log(Key)
  }

  // 2)onkeydown - 按键按下、onkeyup - 按键弹起
  inputNode.onkeydown = function(){
    console.log('键盘按下')
  }
  inputNode.onkeyup = function(){
    console.log('键盘弹起')
  }

  //4.输入框事件
  // onchange - 输入框中的输入内容的时候按回车
  inputNode2 = document.getElementById('input2')
  inputNode2.onchange = function(evt){
    console.log('内容发生改变')
    console.log(evt)
  }

  // oninput - 正在输入
  inputNode2.oninput = function(){
    console.log('正在输入')
  }

  //5.事件对象
  /*
  每个事件驱动程序中，都可以设置一个参数来表示当前事件对象 不同类型的事件对于事件类型和事件属性不同
  1) 鼠标事件对象
  clientX/clientY - 鼠标的位置到浏览器左边和顶部的距离
  offsetX/offsetY - 鼠标的位置到事件源标签左边和顶部的距离

  2) 键盘事件对象
  key - 哪个按键被按下
  */
</script>