JS——DOM

获取元素

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

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

返回的是一个元素对象

2. 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
//以上黑色为常用的

创建,删除,添加元素

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

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

扫描二维码关注公众号，回复： 15950286 查看本文章

4. node.insertBefore(child, 指定元素)

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

5. document.replaceChild(element) 替换元素
6. document.write(text) 文档执行完毕,导致页面全部重绘
7. 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约束验证

1. 图像按钮

具体

动画

事件监听

事件类型

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

事件流

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

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

1. 捕获阶段
2. 当前目标阶段
3. 冒泡阶段

注意::

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

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