JS--DOM

Posted 2020-10-02

# DOM 基础
## Document Object Model 
- 文档对象模型
- DOM就是让我们可以通过JS来操作网页
- 文档
    - 文档指的是整个网页文档
- 对象
    - 将网页中的每一个部分都转换为了一个对象
- 模型
    - 通过模型来表示对象之间的关系,方便我们查找对象


### DOM 节点
- 节点是构成网页的最基本的单位.网页就是由节点构成的
- 节点又分为多种不同的类型:
    - 文档节点  (doument)
        - 代表整个网页
    - 元素节点    (element)
        - 代表网页中的标签
    - 属性节点    (arreibute)
        - 代表标签中的属性
    - 文本节点    (text)
        - 代表网页中的文本
        
### Document 对象方法
- document.getElementById("id属性值")
    - 根据元素的id属性值,查找一个元素节点
- document.getElementsByTagName("标签名")
    - 根据标签名,查询一组元素节点对象
- document.getElementsByName("name属性值")
    - 根据元素的name属性值,查找一组元素节点对象 (用于表单返回一个数组)
- document.getElementsByClassName(‘class属性值‘)
    - 根据class属性值获取一组元素节点对象
- **document.querySelector("CSS选择器")**
    - 根据css选择器去页面中查找对象
    - 只返回一个符合条件的元素
- **document.querySelectorAll("CSS选择器")**
    - 匹配的CSS选择器的所有元素节点列表
    - 将所有符合条件的元素封装到一个数组中返回
- **document.addEventListener()**
    - 第一个参数: 要绑定的事件(字符串格式.没有on)
    - 第二个参数: 回调函数(事件触发时函数执行.形参event)
    - 第三个参数: 是否在捕获阶段触发事件(默认false)
- document.createElement(‘标签名‘)
    - 可以根据标签名来创建一个指定的元素节点对象
- document.createTextNode(‘文本内容‘)
    - 可以根据文本内容创建一个文本节点对象
    
### Document 对象属性
- document.body
    - 可以用来获取页面中的body元素
- document.documentElement
    - 可以获取页面的根元素
- document.all 
    - 可以获取页面的所有元素

----------


### element方法
- element.childNodes
    - 获取当前元素所有的子节点
    - 包括空白的文本节点
- element.children
    - 获取当前元素所有的子节点
    - 不包括文本节点
- element.firstChild
    - 获取当前元素的第一个子节点
- element.lastChild
    - 获取当前元素的最后一个子节点
- element.prentNode
    - 获取当前元素的父节点
- element.previousSibling
    - 获取当前元素的前一个兄弟节点
    - previousElementSibling(不包括空白文本)
- element.nextSibling
    - 获取当前元素的后一个兄弟节点
    - nextElementSibling (不包括空白文本)
- element.appendChild()
    - 为元素添加一个新的子元素
- element.insertBefore()
    - 在指定的子节点前插入新的子节点
    - 第一个参数:新的节点
    - 第二个参数:要添加新的节点前的子节点
- element.replaceChild()
    - 指定子节点替换现有的
    - 第一个参数: 要插入的节点
    - 第二个参数: 要移除的节点
- element.removeChild()
    - 删除一个子节点
- element.cloneNode()
    - 克隆某个元素
    - 参数: true 表示深度克隆
### element属性
- element.className
    - 设置或返回元素的class属性
- element.innerhtml
    - 获取和设置元素内部的html代码
- element.innerText
    - 获取和设置元素内部的文本内容
- element.nodeValue
    - 文本节点可以通过nodeValue属性获取和设置文本节点的内容
- **element.classList**
    - 操作 class 属性的对象
    - classList.add(); 为一个DOM动态“追加”一个类(class)
    - classList.remove();为一个DOM动态“删除”一个类(class)
    - classList.toggle();切换一个class属性的状态
    - classList.contanins() 是否包含某class属性
    - length 获取类选择器的个数

### arreibute属性相关
- element.getAttribute()
    - 获取指定元素的属性值
- element.removeAttribute()
    - 从元素中删除指定属性
- element.setAttribute()
    - 设置或改变指定属性并指定值
    - 第一个参数: 要添加的属性名
    - 第二个参数: 要添加的属性值
- attr.name
    - 返回属性名
- attr.value
    - 设置或返回属性值
    
### DOM修改CSS样式
- 语法: 元素.style.样式名 = 样式值;
- 样式名需要将其修改为驼峰命名法
- 通过style修改的样式都是元素的内联样式.所以优先级最高
#####  getComputedStyle()
- 第一个参数: 要获取样式的元素
- 第二个参数: 要获取元素的伪类. 不需要的话传null
##### 兼容IE8的获取样式函数
- 第一个参数: 要获取样式的元素
- 第二个参数: 要获取的样式的名字

        function getStyle(obj,name){
          if(window.getComputedStyle){
              return getComputedStyle(obj,null)[name];
          }else{
              return obj.currentStyle[name];
            };
          };
#### 其他CSS样式修改
-  clientWidth
-  clientHeight
    - 获取元素的可见宽度和高度
    - 包括元素的内容区和内边距
    - 只读
- offsetWidth
- offsetHeight 
    - 获取元素整个可见框大小
    - 包括内容区内边距和边框
- offsetParent
    - 返回当前元素的定位父元素
    - 最近开启了定位的祖先元素
    - 如果没有开启定位则返回body
- offsetLeft 水平偏移量
- offsetTop 垂直偏移量 
    - 获取当前元素相对于其定位父元素的偏移量
- scrollHeight
- scrollWidth
    - 获取元素滚动区域的高度和宽度
- scrollTop
    - 垂直滚动条滚动的距离
- scrollLeft
    - 水平滚动条滚动的距离
- clientX
    - 可以获取鼠标指针的水平坐标
- clientY
    - 可以获取鼠标指针的垂直坐标
- pageX
- pageY
    - 可以获取鼠标指针相对于页面的坐标
        

### DOM事件 event
- 事件指的用户和网页或浏览器之间的交互行为
- 需要为事件绑定响应函数来处理事件
      - e.pageX/Y   绝对定位
      - e.clientX/Y   基于视口
      - e.offsetX/Y  相对定位
      
#### 文档加载
- 浏览器在加载一个页面时,是按照自上向下的顺序加载
- 如果将js代码写在页面最上边,在JS代码执行时,页面还没有加载完毕就会导致无法正常获取到DOM对象
- 解决方法
    - 将js代码写在body标签的下边
    - 将js代码写在````window.onload = function( ){ }; ````里面.onload回调函数会在页面加载完毕以后执行
#### 事件处理中的this 
- 在事件处理程序内的 this 所引用的对象即是设定了该事件处理程序的元素。
- 事件给哪个对象绑定的 this就是哪个对象
#### 取消默认行为
- return false 适合dom0
- event.preventDefault(); 适合dom2
#### 事件对象
- 当浏览器调用事件的响应函数时,每次都会传递进一个事件对象,作为参数
- 在事件对象中封装了当前事件相关的信息.
- **event 作为形参注入到函数里作为事件对象**
#### 冒泡
- 冒泡简单来说就是事件的向上传导. (结构上的关系.不是表现上面的)
- 当后代元素上的事件被触发时,将会导致祖先元素上的相同事件也被触发
- 大部分情况下冒泡都是对开发有利的.它可以简化我们的开发
- 如果不希望发生事件的冒泡.则可以通过事件对象来取消冒泡
- 取消冒泡
    - event.stopPropagation()
    - event.cancelBubble = true
#### 事件委派
- 统一将多个元素上的事件绑定到他们共同的祖先元素上.
- 这样我们只需要绑定一次即可同时处理多个元素上的相同事件
- 这样简化了代码开发.这样也确保新添加的元素上也可以有事件响应函数.
- target属性 ---> 事件由谁触发谁就是target

#### 事件监听 
- addEventListener() 普通浏览器
    - 第一个参数: 要绑定的事件(字符串格式.没有on)
    - 第二个参数: 回调函数(事件触发时函数执行.形参event)
    - 第三个参数: 是否在捕获阶段触发事件(默认false)
- attachEvent() IE浏览器
    - 第一个参数: 绑定的事件 (字符串格式.需要on)
    - 第二个参数: 回调函数

###### 事件监听 (兼容IE8)
参数:

- obj 要绑定事件的对象
- eventStr 事件的字符串
- callback 回调函数.事件触发时调用的函数

        function bind(obj,eventStr,callback){
             if(obj.addEventListener){
                obj.addEventListener(eventStr,callback,false)
            }else{
                attachEvent()
                obj.attachEvent("on"+eventStr,function(){
                callback.call(obj);
              });
          }

#### 事件的传播
- 捕获阶段
    - 事件从最外层的元素(document),向目标元素进行事件的捕获
    - 该阶段默认不会触发
- 目标阶段
    - 触发事件的元素.捕获到目标元素则捕获阶段停止
- 冒泡阶段
    - 事件从目标元素向祖先元素中冒泡. 此时开始触发事件
    

##### 鼠标相关事件
- onclick 鼠标单击事件
- ondbclick 鼠标双击事件
- onmousemove 鼠标移动事件
- onmouseenter 鼠标移入元素时触发
- onmouseleave 鼠标移出元素时触发
- onmouseover 鼠标移到某元素之上时触发
- onmousedown 鼠标按下时
    - contextmenu  右键菜单
    - e.button == 0 左键
    - e.button == 1 滚轮键
    - e.button == 2 右键
- onmouseup 鼠标松开时

##### 键盘相关事件
- onkeydown 某个按键按下时
    - event.keyCode 确认按下的键
- onkeyperss 按键被按下并松开
- onkeyup 按键松开时

##### 其他重要事件
- onload 当页面加载完成时
- onresize 当窗口被调整时
- onscroll  滚动条滚动时触发的事件
- onblur 元素失去焦点时触发
- onfocus 元素获取焦点时触发
- onchange 当input输入值失去焦点发生改变会触发该事件
- oninput 实时记录input表单输入的内容



##### 滚轮相关事件
**ie/chrome : onmousewheel(dom0)**

    event.wheelDelta
        上：120
        下：-120
            
**firefox : DOMMouseScroll 必须用(dom2的标准模式)**

    event.detail
        上：-3
        下：3

- return false阻止的是  dom0 所触发的默认行为
- dom2 需要通过event下面的event.preventDefault();