DOM

DOM(Document Object Model)

1. DOM 文档对象模型 ： 提供操作html文档，html标签的能力

 document文档对象   window.document

2. 属性和方法

   2.1 方法
   
   1.获取标签元素的方法   

        getElementById()
        getElementsByClassName()
                =>类数组(伪数组)
                类数组 和 数组Array区别
                     1.类数组不能使用Array的常用方法
                          push  pop ...
                     2.类数组可以遍历，可以使用[]访问元素
        getElementsByTagName()
        getElementsByName()
   2.querySelector 和 querySeletorAll
                       
        querySelector()
             css选择器
                1.基本选择器  id class 标签
                2.层级选择器  子代选择器  后代选择器  兄弟选择器
                                M > N     M N    M ~ N  M + N
                3.伪类选择器   M N:nth-child(n)
                4.属性选择器   input[name]   input[name = 'username']

3. 操作内容

       3.1操作内容

                var h2e = document.querySelector('#title')
                h2e.innerHTML  //获取内容
                h2e.innerHTML = '新内容' //设置内容
                innerText   获取内容
                innerText 和 innerHTML的区别

                    innerText 以纯文本形式显示
                value 表单元素内容

4. 操作元素CSS样式

使用js代码动态操作样式

          1. 行间样式 style

         ele.style.样式名
           =>样式值
         ele.style.样式名 = 样式值

          2. 类样式

         ele.className=类名
            注: 后面的类名会覆盖前面的类名              
         ele.classList.add(类名1)

         ele.classList.add(类名2)
              '类名1 类名2 '
         获取非行间样式
           window.getComputedStyle(元素).样式名
              =>样式值

5. 操作属性

操作属性
           js代码动态获取属性值或设置属性
        1. 获取属性值
             ele.getAttribute(属性名)
               => 属性值
            ele.属性   必须是本身拥有的属性
               =>属性值
        2. 设置属性
            ele.setAttribute(属性名,属性值)
            ele.属性名 = 属性值
        3. 删除属性
            ele.removeAttribute(属性名)

        4. data-属性名
             ele.dataset.属性名 

6.操作事件

操作事件
           给元素绑定点击事件
             直接给元素添加onclick属性实现
             
            绑定事件
               1. 属性事件
               2. 元素和事件行为分离