javascript进阶dom

javascript进阶

1、获取元素的方式

• 通过id获取—— getElementById
• 通过标签名获取——getElementsByTagName,
• 通过H5新增的方法获取——1、getElementsByClassName2、querySelector3、querySelectorAll
• 通过特殊元素获取——1、body2、documentElement

2、事件(触发——响应机制)

时间源、事件处理类型、事件处理程序

  let btn  = document.getElementById('btn')
  btn.onclick = function(){
    alert('你好')
  }

• onclick——鼠标点击
• onmouseover——鼠标经过
• onmouseout——鼠标离开
• onmousedown——鼠标按下
• onmouseup——鼠标弹起
• onmousemove——鼠标移动
• onfocus——鼠标聚焦
• onblur ——鼠标失去焦点

2、操作元素

2.1 innerText（可读写的）

• 不会识别html标签

2.2 innerHTML（可读写的）

• 识别html标签

2.3 src、href

let btn  = document.getElementById('btn')
  let img  = document.getElementById('img')
  btn.onclick = function(){
    img.src = 'images/img1.png'
  }

2.4 id、title、alt

let btn  = document.getElementById('btn')
  let img  = document.getElementById('img')
  btn.onclick = function(){
    img.src = 'images/img1.png'
    img.title= '图片'
  }

2.4 form表单

 let btn  = document.getElementById('btn')
  let input  = document.querySelector('input')
  btn.onclick = function(){
    input.value = '123'  
    // input.disabled = true
    // input.type= 'text'


  }

2.4 样式

• element.style

 let wrap1 = document.querySelector('.wrap1')
  wrap1.onclick = function(){
   this.style.backgroundColor = 'pink'
  }

• element.className

let wrap1 = document.querySelector('.wrap1')
  wrap1.onclick = function(){
    this.className = 'change'
  }

2.5 获取自定义属性值

• 获取element.getAttribute(‘属性’)
• 设置element.setAttribute(‘属性’，‘值’)
• 移除element.setAttribute(‘属性’)