js-day11Dom

DOM： 页面中的标签，我们通过 js 获取到以后，就把这个对象叫做 DOM 对象
作用： 文档对象模型 提供操作html文档对象能力,提供API 
操作Dom:
​ 1.获取标签元素
  2.操作内容
  3.操作样式
  4.操作属性
核心对象：文档对象 
  document 对象是浏览器内置的一个对象，里面存储着专门用来操作元素的各种方法
  window对象的子对象 Document

1.getElements系列
​1.1document.getElementById()
    =>document是window对象子对象，可以省略
  =>返回html 标签元素(节点对象) id唯一，获取到的就是元素
 1.2getElementsByTagName()
  =>根据标签名获取html元素
    =>返回的是一个伪数组
  =>必须要用索引才能得到准确的Dom元素
  伪数组
     =>可以通过索引号访问伪数组中元素
     =>可以进行for循环遍历
     =>不能使用数组Array常用方法 ex:arr.push...
     =>一般获取多个html标签元素存储在伪数组中
 1.3getElementsByClassName()
  =>返回的是一个伪数组
  =>必须要用索引才能得到准确的Dom元素
 1.4getElementsByName() // 标签中有name属性的
  =>返回的是一个伪数组
  =>必须要用索引才能得到准确的Dom元素

2.query系列 =>javascript获取标签元素新方法
 2.1 querySelector() //返回元素 （#id名） （.class名）
 2.2 querySelectorAll() //返回伪数组
       =>根据选择器获取html标签元素
       css选择器都可以用

1.获取内容
  非表单内容
      innerHTML 属性
        innerText 属性
    表单元素内容
        value 属性
2.设置内容 ele:获取的元素节点的名字
    ele.innerHTML = '<h1>内容</h1>'  内容中有标签会被解析
    ele.innerText = '<h1>内容</h1>'  标签作为文本内容
    ele.value = '内容'

=> ele.style.color = 'red'  给其添加的是行内样式
=> ele.className = '类名'    类样式 会覆盖前面类名的样式，相当于赋值
=> ele.classList.add('类名')        添加一个类样式 不会覆盖
=> ele.classList.remove('类名')     删除一个类样式

<div onclick = ' js代码 '> </div>

function test1(){
  //获取div元素节点
  var div = document.querySelector('div')
  //绑定点击事件
  div.onclick = function(){
     js代码
  }
}

1.设置属性
     setAttribute('属性名','属性值')
     aEle.setAttribute('href','http://www.baidu.com')
2.获取属性
     getAttribute('属性名')
3.移除属性
     removeAttribute('属性名')

根据不同场景表示不同对象 
1. 事件处理函数中 this 表示  事件源