JS、DOM

平时编辑HTML文件,只是在编辑文件而已
当这个编辑好的页面被浏览器加载并渲染完毕之后,会根据BOM 生成一个window 会根据DOM生成一个 document

获取元素

  1. getElementById 根据ID获取元素
    该方法接受的是字符串 返回根据该字符串作为id寻找到的元素 只找到第一个  
    返回的是单个元素 如果根据字符串找不到对应的元素 则返回null
  2. getElementsByTagName   根据标签名获取元素集合 集合里面的才是元素
  3. getElementsByName 根据name属性值 获取元素集合 集合里面的才是元素 注:该方法不兼容   
  4. getElementsByClassName 根据类名获取元素集合 集合里面的才是元素 注:该方法不兼容
  5. querySelector 根据选择器找到一个元素
  6. querySelectorAll 根据选择器找到一个元素集合

操作属性

  HTML属性分两种:
    1 标准属性 都是W3C规定的 
        通用属性: 每一个标签都有的属性比如 id class style title ...
        非通用属性: 只要有一个标签不认识这个属性就叫做非通用属性 比如 src href type  name 
    2 自定义属性 用户自己定义的

  操作标准属性  
    box.className = ""; // 清空所有类名       
    box.className  = "   bbb";添加类名       
    box.className = box.className.replace("b", "");类名去掉一个

    style 指的是行内样式对象 读取它就是在读取行内样式 设置它就是在设置行内样式 
     box.style = "width: 240px;"  //  不推荐用 因为会把其他的样式也遮蔽掉
     推荐的方式就是把style当对象来设置 或者 读取 要修改谁就只设置谁
     box.style.width = "240px";

  操作自定义或标准属性
  元素.setAttribute(name, value);  设置HTML标签的属性并显示在标签上
  元素.getAttribute(name);  从HTML标签的属性部分读取属性值
  元素.removeAttrbite(name);   移除HTML标签的属性

  内容操作
    元素.innerHTML = "<div>abc</div>"; HTML文本
    元素.innerText = "你好";            纯文本
  快速获取特定元素
   document.body                body
   document.documentElement     html
   document.head                head
   document.title               title(文本)

DOM节点

• DOM 的节点我们一般分为常用的三大类 元素节点 / 文本节点 / 属性节点
• 什么是分类，比如我们在获取元素的时候，通过各种方法获取到的我们叫做元素节点（标签节点）
• 比如我们标签里面写的文字，那么就是文本节点
• 写在每一个标签上的属性，就是属性节点

元素节点

• 我们通过 getElementBy... 获取到的都是元素节点

属性节点

• 我们通过 getAttribute 获取的就是元素的属性节点

文本节点

• 我们通过 innerText 获取到的就是元素的文本节点 空格换行也是

获取节点

• childNodes：获取某一个节点下 所有的子一级节点
• children ：获取某一节点下所有的子一级 元素节点
• firstChild：获取某一节点下子一级的 第一个节点
• lastChild：获取某一节点下子一级的 最后一个节点
• firstElementChild：获取某一节点下子一级 第一个元素节点
• lastElementChild：获取某一节点下子一级 最后一个元素节点
• nextSibling：获取某一个节点的 下一个兄弟节点
• previousSibling：获取某一个节点的 上一个兄弟节点
• nextElementSibling：获取某一个节点的 下一个元素节点
• previousElementSibling：获取某一个节点的 上一个元素节点
• parentNode：获取某一个节点的 父节点
• attributes：获取某一个 元素节点 的所有 属性节点

节点属性

• nodeType：获取节点的节点类型，用数字表示

  • nodeType === 1 就表示该节点是一个 元素节点
  • nodeType === 2 就表示该节点是一个 属性节点
  • nodeType === 3 就表示该节点是一个 文本节点
  • nodeType === 8 就表示该节点是一个 注释节点
  • nodeType === 9 就表示该节点是一个 文档节点

• nodeName：获取节点的节点名称

  • 元素节点的 nodeName 就是 大写标签名
  • 属性节点的 nodeName 就是 属性名
  • 文本节点的 nodeName 都是 #text
  • 注释节点的 nodeName 都是 #comment
  • 文档节点的 nodeName 都是 #document

• nodeValue： 获取节点的值

  • 元素节点没有 nodeValue
  • 属性节点的 nodeValue 就是 属性值
  • 文本节点的 nodeValue 就是 文本内容

-	nodeType	nodeName	nodeValue
元素节点	1	大写标签名	null
属性节点	2	属性名	属性值
文本节点	3	#text	文本内容

操作 DOM 节点

创建一个节点

• createElement：用于创建一个元素节点
  document.createElement(‘div’)
• createTextNode：用于创建一个文本节点
  document.createTextNode(‘我是一个文本’)
• document.createComment(“我是一个注释”);

向页面中加入一个节点

• appendChild：是向一个元素节点的末尾追加一个节点
  • 语法： 父节点.appendChild(要插入的子节点)
• insertBefore：向某一个节点前插入一个节点
  • 语法： 父节点.insertBefore(要插入的节点，插入在哪一个节点的前面)

删除页面中的某一个节点

• removeChild：移除某一节点下的某一个节点
  remove方法移除的是自己 removeChild移除的是子元素
  • 语法：父节点.removeChild(要移除的字节点)
    a.remove();
    document.body.removeChild(a);

修改页面中的某一个节点

• replaceChild：将页面中的某一个节点替换掉
  • 语法： 父节点.replace(新节点，旧节点)

克隆节点 Node.cloneNode(deep)

deep为true，克隆Node节点以及它的后代节点，为false，只克隆Node节点本身。（不写默认false）
    var a = document.getElementsByTagName("div")[0];
    var aClone = a.cloneNode(true); // cloneNode方法默认只会克隆元素本身
    document.body.appendChild(aClone);

获取元素的非行间样式

• 元素.style.xxx只能获取到元素 行间样式，也就是写在行内的样式

getComputedStyle（非IE使用）

- 语法：`window.getComputedStyle(元素, null).要获取的属性`

currentStyle（IE使用）

- 语法： `元素.currentStyle.要获取的属性`
// 获取box的计算后的样式对象
    // var cssObj = window.getComputedStyle(box);
    var cssObj = null;
    // 能力检测利用的是 “从对象身上访问属性无论如何也不会报错 如果成功就是函数 如果失败就是undefiend”的特点
    if (window.getComputedStyle) {
        // 能力检测
        cssObj = getComputedStyle(box);
    } else {
        cssObj = box.currentStyle;
    }

快捷尺寸

clientWidth、clientHeight

该属性是每一个元素都有的属性，读取到的是该元素的**宽度+padding**

offsetWidth、offsetHeight

该属性是每一个元素都有的属性，读取到的是该元素的**宽度+padding+border**

offsetLeft offsetTop

获取到定位父元素的距离 都是从自己的边框外 到定位父元素的边框内(IE8除外 IE8是到父元素的边框外)	

clientLeft、 clientTop

该属性是每一个元素都有的属性，读取到的是**左、上边框的宽度**

获取页面的卷动值

scrollTop
指的是页面中位于视口上方的页面的高度
IE 火狐 通过html元素获取 比如早期的chrome 通过body元素获取
var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
该属性 可以获取 可以设置

获取窗口区域的宽度高度

window.innerWidth window.innerHeight

获取视口的宽度高度

document.documentElement.clientWidth 
document.documentElement.clientHeight

事件对象

当浏览器中的事件被触发时，会产生许许多多的信息。有时我们会需要使用到这些信息。
获取方式，就是通过事件对象。
事件对象是：浏览器在触发事件时，帮助我们收集的许多信息的集合对象。

事件对象的位置

• 高级浏览器
  • 事件函数的形参
• IE浏览器
  • window.event

event 是事件对象

altKey 表示事件触发时 键盘的alt键是否按下 false表示没有按下 true表示按下
shiftKey  表示事件触发时 键盘的shift键是否按下 false表示没有按下 true表示按下
ctrlKey 表示事件触发时 键盘的ctrl键是否按下 false表示没有按下 true表示按下
clientX 表示事件触发时 鼠标位于视口的横坐标上的值(到视口左边的距离)
clientY 表示事件触发时 鼠标位于视口的纵坐标上的值(到视口上边的距离)
offsetX 表示事件触发时 鼠标位于元素的横坐标上的值(到元素左边的距离) 
offsetY 表示事件触发时 鼠标位于元素的纵坐标上的值(到元素上边的距离)
注: offsetX offsetY 会被子元素影响
pageX 表示事件触发时 鼠标位于页面的横坐标上的值(到页面左边的距离) 
pageY 表示事件触发时 鼠标位于页面的纵坐标上的值(到页面上边的距离) 
注：pageX pageY有兼容性问题 IE没有 可以使用clientX + scrollTop clientY + scrollLeft
target 在高级浏览器中表示触发事件的元素
srcElement 在IE浏览器中表示触发事件的元素

事件流程分3阶段：

1 捕获阶段
    事件应当从最顶层元素开始执行 一层层往下 直到最精确的元素
2 处于目标阶段
    事件在最精确的元素身上执行
3 冒泡阶段
    事件应当从最精确元素开始执行 一层层往上 直到最顶层元素
最顶层元素： IE8及以下中 最顶层元素是`document`
高级浏览器中 最顶层元素是`window`

DOM0级事件绑定方式

`元素.on事件类型 = 函数`  这种方式 是
    // 它只能够绑定到冒泡阶段

DOM2级事件绑定方式

元素.addEventListener(type, handler, boolean); 
    type 事件类型字符串  不带on
    handler 事件处理函数
    boolean 布尔值  如果值为true 该绑定是绑定到捕获阶段 否则绑定到冒泡阶段

元素.removeEventListener(type, handler, boolean);
    type 事件类型字符串  不带on
    handler 事件处理函数
    boolean 布尔值  如果值为true 该移除是移除捕获阶段 否则移除冒泡阶段


// IE8 浏览器及以下的浏览器 不支持addEventListener 

    元素.attachEvent(type, handler)
        type 事件类型字符串  带on
        handler 事件处理函数
        没有第三个参数 表示不能绑定到捕获阶段 
    元素.detachEvent(type, handler)
        type 事件类型字符串  带on
        handler 事件处理函数
    
function bindEvent(dom, type, handler) {
        // 判定是哪种浏览器
        if (dom.addEventListener) {
            dom.addEventListener(type, handler, false);
        } else if (dom.attachEvent) {
            dom.attachEvent("on" + type, handler);
        } else {
            dom["on" + type] = handler;
        }
    }

    bindEvent(document, "click", function() {
        console.log("绑定成功");
    })

阻止冒泡

冒泡指的是当子元素的事件触发之后 不要让父元素的事件触发

• 高级浏览器中
  • e.stopPropagation()
• IE浏览器中
  • e.cancelBubble = true;

停止默认行为

在浏览器中，有许许多多的元素，有一些元素是具备默认行为的
比如:

• a标签点击的时候会默认跳转页面
  • 1 只适用于dom0级
    return false;
    2 通过事件对象
    e.preventDefault();
• submit按钮点击时会默认触发表单的submit事件

委托模式

将事件绑定给不会被移除的父元素 通过判定方式让代码只再符合某种条件时执行
tbody.onclick = function(e) {
// 判定 如果是最后一个元素 我们就将当前的行移除
if (e.target === e.target.parentNode.lastChild) {
e.target.parentNode.remove();
}
}