DOM学习

DOM:是文档对象模型，是一套操作HTML和XML文档的API

DOM的作用:

  1.找对象(元素)
  getElementById() //根据id属性获取一个DOM对象
  getElementsByTagName()//根据标签返回多个DOM对象
  H5中新增:
         1. getElementsByClassName() 通过类名获取元素，以类数组形式存在
         2.document.querySelector() 通过css选择器获取元素，返回匹配条件的第一个元素
         3.document.querySelectorAll() 通过CSS选择器获取元素，以类数组形式存在。
 DOM对象的属性和HTML的标签属性几乎是一致的
     src title className href
 DOM对象中的表单对象拥有的属性:
     type value checked selected disabled
 DOM对象的解析:
    innerHTML会把内容解析到DOM树上
    -获取标签之间的内容
    -设置标签之间的内容

2.设置对象的属性
  getAttribute()
 setAttribute()
 removeAttribute()
直接使用.属性的方式不可以设置自定义属性(IE除外)，getAttribute什么时候都可以使用

设置元素的样式
  1.className
  2.style
      无论设置还是获取都只能操作行内样式
      DOM的style属性只能获取标签中使用style设置的样式
  无法获取嵌入或外部样式
  style.cssText获取style里面的字符串
style里面的常用属性:
  backgroundColor
  backgroundImage
  color
  width
  height
  border
  opacity
  注意DOM对象style的属性和标签中style内的值不一样，因为JS中-不能作为表示符
 h5新增:
          1、Node.classList.add('class') 添加class
          2、Node.classList.remove('class') 移除class
          3、Node.classList.toggle('class') 切换class，有则移除，无则添加
          4、Node.classList.contains('class') 检测是否存在class
Node指一个有效的DOM节点，是一个通称。

h5中可以自定义属性:
    在HTML5中我们可以自定义属性，其格式如下data-*=""，例如
    data-info="我是自定义属性"，通过Node.dataset['info'] 我们便可以获取到自定义的属性值。
    Node.dataset是以类对象形式存在的
    当标签的自定义属性格式为:data-my-name时,则需要以驼峰格式才能正确获取:Node.dataset['myName']
 <!--给标签添加自定义属性,必须以data-开头-->
    例子:
    <div class="box" title="盒子" data-my-name="zs" data-content="我是一个div">div</div>
    <script>
        var box = document.querySelector(".box")
        //获取标签的自定义属性 需要通过dataset[]方式来获取
        console.log(box.dataset["content"])
        //给自定义的属性赋值
        box.dataset["content"] = "这是一个测试而已"

        //当标签的自定义属性格式为:data-my-name时,则需要以驼峰格式才能正确获取:Node.dataset['myName']
        console.log(box.dataset['myName'])

3.动态的创建和删除元素
方式一:innerHTML
方式二:createElement()
方式三:document.write()

appendChild()
removeChild()
insertBefore()
replaceChild()

  4.动态的创建和删除表格
方式1
createElement()
方式2
rows                          (只读，table和textarea能用)
insertRow()              (只有table能调用)
deleteRow()           (只有table能调用)
cells                 (只读，table和textarea能用)
insertCell()               (只有tr能调用)
deleteCell()              (只有tr能调用)

5.事件-触发响应
  事件源
  事件名称
  事件程序