获取元素

getElementById(id)	通过元素 id 来查找元素

参数:id 是大小写敏感的字符串, 代表了所要查找的元素的唯一的值.

返回的是一个元素对象

getElementsByTagName(name)	通过标签名来查找元素

返回的是获取过来元素对象的集合以伪数组的形式存储

getElementsByClassName(name)	通过类名来查找元
querySelector(CSS选择器的形式)	查找匹配指定 CSS 选择器（id、类名、类型、属性、属性值等等）的第一个HTML 元素
querySelectorAll(CSS选择器的形式)	指定选择器的所有元素

获取 body / html 元素

document.body  //返回 body 元素对象
document.documentElement  //返回 html 元素对象

操作元素

element.innerHTML	可用于获取或替换 HTML 元素的内容,识别HTML标签,读写时全部保留
element.innerText	不识别HTML标签
element.属性	获取属性值
element.getAttribute(‘属性’)	获得自定义属性值
element.attribute = ‘值’	改变或设置HTML元素的属性值;属性采取驼峰式命名法
element.setAttribute = (‘属性’, ‘值’)	改变或设置自定义属性 (通常以data-开头)
element.removeAttribute(‘属性’)	移除某个属性
element.dataset.index	H5新增的获取自定义属性;dataset是所有以data开头的自定义属性的集合,ie11才可用
element.style.property = new style	改变HTML元素的样式,加入行内样式,权重较高

使用类名修改样式

//当样式较多,或者功能复杂时,可以直接在CSS内创建一个类名写入样式,在js内添加这个类,以类名为"change"为例
element.className = 'change';
//className 会直接更改元素的类名,覆盖原先的类名,如果想要保留之前的样式,可以写成'change 原先的类名'即在多个类名间添加空格

隐藏,显示:1. visibility = hidden 2. visibility = visible

节点操作

node 节点

元素节点(nodeType=1),属性节点(2),文本节点(3),注释节点

parentNode
//父级节点,返回离元素最近的节点
//子节点 
//1. childNodes 所有的子节点 包含元素节点 文本节点等等
//2. 
children 获取所有的子元素节点
//第一个子节点,最后一个子节点
//1. firstChild lastChild 包含元素节点 文本节点等等
//2. firstElementChild (id9以上支持)lastElementChild (ie9以上支持) 只有元素节点
//实际开发写法  
element.childern[0]...element.childern[element.childern.length - 1]
//兄弟(sibling)节点
//1. nextSibling previouSibling
//2. nextElementSibling previousElementSibking
//以上黑色为常用的

创建,删除,添加元素

document.createElement(‘tagName’)
node.removeChild(child) 删除父节点中的子节点
node.appendChild(child)

将一个节点添加到指定父节点的子节点的末尾

node.insertBefore(child, 指定元素)

将一个节点添加到指定父节点的子节点的前面

document.replaceChild(element) 替换元素
document.write(text) 文档执行完毕,导致页面全部重绘
node.clone(); 克隆节点

括号为空或者里面是 false 只克隆复制节点本身,不克隆里面的子节点;括号参数为 true,深度拷贝,会复制节点本身以及里面所有的子节点

innerHTML 与 createElement 区别

innerHTML 创建多个元素的效率更高(不要拼接字符串,采取数组的形式拼接),结构稍微复杂

createElement() 创建多个元素的效率稍低一点点,但结构更清晰

eg:在class=inner的元素内 添加100个空链接
var inner = document.querySelector('.inner');
var array = [];
for(var i = 0; i < 100; i++) {
    array.push('<a href="#"></a>');
}
inner.innerHTML = array.join('');//将数组转为字符串

阻止链接跳转

<a href="javascript:;">xxx</a>

表单

<form action="url地址"> //规定当提交表单时，向何处发送表单数据
用户名: <input type="text" value="输入内容" name="">
<button></button>
</form>

var btn = document.querySelector('button');
var input = document.querySelector('input');
btn.onclick = function() {
    this.disabled = true //禁用按钮
}

显示隐藏密码

var flag = 0;
eye.onclick = function() {
    if(flag == 0) {
        pwd.type = 'text';
        flag = 1;
    } else {
        pwd.type = 'password';
        flag = 0;
    }
}

精灵图循环

for(var i = 0; i < lis.length; i++) {
    //索引号×一个数
    var index = i * 一个数
    lis[i].style.backgroundPosition = '0 -' + index + 'px';
}

表单全选,取消全选

<table>
    <thead>
      <tr>
          <th>
              <input type="checkbox" id="j_cbAll"/>
            </th>
            <th></th>
        </tr>
    </thead>
    <tbody id="j_tb">
      <tr>
          <th>
              <input type="checkbox" />
            </th>
            <th></th>
        </tr>
        <tr>
          <th>
              <input type="checkbox" />
            </th>
            <th></th>
        </tr> 
    </tbody>
</table>

var j_cbAll = document.getElementById('j_cbAll') //全选按钮
var j_tbs = document.getElementById('j_tb').getElementsByTagName('input');  //tbody里面的所有复选框
j_cbAll.onclick = function() {
    //this.checked 返回当前复选框的选中状态,true为选中,false为未选中
    for(var i = 0; i < j_tbs.length; i++) {
        j_tbs[i].checked = this.checked
    }
}
for(var i = 0; i < j_tbs.length; i++) {
    j_tbs[i].onclick = function() {
        //flag 控制全选按钮是否选中
        var flag = true;
        //每次点击复选框 都循环检查所有小按钮是否全被选中
        for(var i = 0; i < j_tbs.length; i++) {
            if(!j_tbs[i].checked) {
                flag = false;
                break; //只要一个没选中,就跳出for循环
            }
        }
        j_cbAll.checked = flag;
    }
}

如果表单字段 (fname) 为空，则 required 属性会阻止提交此表单

数据验证

HTML约束验证

图像按钮

具体

动画

事件监听

事件类型

onfocus	获得焦点
onblur	失去焦点
onmouseover	鼠标经过
onmouseout	鼠标离开

事件流

事件流指从页面中接收事件的顺序.

DOM事件流指事情发生时会在元素节点之间特定的顺序传播的过程.

捕获阶段
当前目标阶段
冒泡阶段

注意::

JS代码只能执行捕获或冒泡其中一个阶段
onclick 和 attachEvent 只能得到冒泡阶段
addEventListener(type, function() {}, ),第三个参数如果是 true , 表示在事件捕获阶段调用事件处理程序; 如果是false(不写默认为false) , 表示在事件冒泡阶段调用事件处理程序.
实际开发中我们很少使用事件捕获,更关注事件冒泡
有些事件没有冒泡,如 onblur,onfocus,onmouseenter,onmouseleave

绑定事件

var div = document.querySelector('div');
//传统方法
    div.onclick = function() {
    }
//事件监听 div.addEventListener(type,,)
//(1)
    div.addEventListener('click',function(){
    })
//(2)
    div.addEventListener('click', fu)
    function fu() {
    }

删除事件

//传统方法
div.onclick = null;
//法二
div.addEventListener('click', fn)
    function fn() {
      // 方法体
      div.removeEventListener('click', fn);
    }

事件对象

div.onclick = function(event) {}

div.addEventListener(‘click’, function(event) {})

event 就是一个事件对象
事件对象只有有了事件才会存在, 他是系统给我们自动创建的, 不需要传递参数
事件对象是我们事件的一系列相关数据的结合, 跟事件相关的 (eg:鼠标点击事件包含了鼠标的相关信息,键盘事件就包含了键盘的相关信息)
兼容性问题兼容性的写法: event = event || window.event

常见的属性和方法

e.target

返回的是触发事件的对象(元素)

eg:

<ul>
        <li></li>
        <li></li>
    </ul>
<script>
      var ul = document.querySelector('ul');
    ul.addEventListener('click', function(e) {
          console.log(e.target); //返回<li></li>
          console.log(this);   //返回<ul></ul>
          //this 返回绑定该事件的元素
      })
</script>

e.type 返回事件类型

e.preventDefault()

阻止默认行为(事件)

var a = document.querySelector('a');
a.addEventListener('click', function(e) {
    e.preventDefault();// dom 标准写法
});
// 传统注册方式-----------------------------------
a.onclick = function(e) {
    e.preventDefault(); //普通浏览器
    e.returnValue;  //低版本浏览器 ie678
    return false; //没有兼容性问题,但是 return 后面的代码就不执行了
}

e.stopPropgation()

阻止冒泡事件

var a = document.querySelector('a');
a.addEventListener('click', function(e) {
   e.stopPropgation()
});

事件委托+排他思想

原理: 不是每个子节点单独设置事件监听器,而是事件监听器设置在其父节点上,然后利用冒泡原理影响设置每个子节点

<ul>
  <li></li>
    <li></li>
    <li></li>
  <li></li>
</ul>

var ul = document.querySelector('ul');
var li = ul.querySelector('li');
ul.addEventListener('click', function() {
//排他思想-----------------------------------
    for(var i = 0;i < li.length; i++) {
        li[i].style.backgroundColor = '';
    }
//------------------------------------------
    e.target.style.backgroundColor = 'pink';
})

常用的鼠标事件

contextmenu禁用右键菜单

document.addEventListener('contextmenu', function(e) {
    e.preventDefault();
})

selectstart禁止选中文字

document.addEventListener('selectstart', function(e) {
    e.preventDefault();
})

案例:跟随鼠标事件

e.clientX	返回鼠标相对于浏览器窗口可视区的X坐标
e.clientY	返回鼠标相对于浏览器窗口可视区的Y坐标
e.pageX	返回鼠标相对于文档页面的X坐标
e.pageY	返回鼠标相对于文档页面的Y坐标
e.screenX	返回鼠标相对于电脑屏幕的X坐标
e.screenY	返回鼠标相对于电脑屏幕的Y坐标

mousemove

img {
    position: absolute;
}

var pic = document.querySelector('img');
document.addEventListener('mousemove', function(e) {
    //获取鼠标在文档中的坐标
    var x = e.pageX;
    var y = e.pageY;
    // 记住加上单位!!!  图片居中还要减去图片的一半
    pic.style.left = x + 'px';
    pic.style.top = y + 'px';
})

常用的键盘事件

keyup	某个键盘按键被松开时触发
keydown	某个键盘按键被按下时触发
keypress	某个键盘按键被按下时触发,但是不识别功能键

三个事件的执行顺序: keydown - keypress - keyup

keyup 与 keydown 不区分大小写

keypress 区分大小写

e.keyCode	返回按键的ASCII值

JS——DOM