10-DOM

DOM

        概念：文档对象模型 document Object Model

        作用：提供操作html文档，html标签元素的能力

        方法

                1. 获取标签元素的方法

               getElementById('title')
                  唯一元素       
               getElementsByClassName()
                  => 类数组(伪数组)
                    类数组 和 数组Array区别
                      1. 类数组不能使用Array的常用方法
                           push   pop  
                      2. 类数组可以遍历，可使用[]访问元素
                getElementsByTagName()
                    标签名
                getElementsByName

                2. querySelector 和 querySelectorAll    (常用)

                 querySelector()
                  css选择器
                  2.1 基本选择器 
                      id  class 标签
                  2.2 层级选择器
                      子代选择器  后代选择器
                      M > N   M N
                      兄弟选择器
                      M ~ N  M + n
                  2.3 伪类选择器
                      M N:nth-child(n)
                  2.4 属性选择器
                       input[name]
                       input[name='username']

                3. 类数组和数组Array区别

                        类数组不可使用数组的方法，可使用循环遍历等

                4. 操作内容 操作样式 操作属性 操作事件

                        -操作内容

                 var h2Ele = document.querySelector('#title')
                   h2Ele.innerHTML  // 获取内容
                   h2Ele.innerHTML = '新内容'  // 设置内容

                   innerText 获取内容

                   innerText 和 innerHTML 区别:
                     1. innerText 以纯文本形式显示
                          <h3>innerText设置的内容</h3>
                     2. innerHTML 
                   
                   value  表单元素内容
                   <input type="text"/>

                   操作非表单元素 innerText 和 innerHTML 
                   操作表单元素  value

                        -操作样式

        1. 行间样式 style
              ele.style.样式名
                 =>样式值
              ele.style.样式名 = 样式值

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

               获取非行间样式
                  window.getComputedStyle(元素).样式名
                     =>样式值

                -操作属性

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

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

                -操作事件

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