Web Apls

一.DOM

1.获取节点DOM

• 节点：标签、文本、属性

ById

• 参数：id的字符串
• 返回值：DOM节点 也是对象

document.getElementById('id字符串');
//获取body
document.body

ByTagName

• 参数：标签名的1字符串
• 返回值：伪数组 没有forEach方法 可以遍历 、可以使用for循环

document.getElementsByTagName('li')

ByClassName

• 参数：类名的字符串
• 返回值 伪数组 没有forEach方法 可以遍历 可以使用for循环

document.getElementsByClassName('.box');

querySelectorAll

• 参数：css选择器
• 返回值 伪数组 可以使用forEach循环 遍历 for循环

var lis=document.querySelectorAll('li');

2.注册事件on+事件类型

注册点击click事件

• 事件源
• 点击行为
• 响应

注册focus和blur事件

• focus 获取焦点
• blur 失去焦点

鼠标按下mousedown

box.onmousemove=function(){
    
}

鼠标移动mousemove

box.onmousemove=function(){
    
}

鼠标弹起mouseup

box.onmouseup=function(){
    
}

键盘按下keydown

document.onkeydown=function(e){
    console.log(e.keyCode);//返回不同的键的码数
    console.log(e.ctrlKey);//判断按下的键是否为ctrl键
}

键盘弹起keyup

document.onkeyup=function(){
    
}

鼠标进入

box.onmouseover=function(){
    
}

鼠标移出

box.onmouseout=function(){
    
}

滚动事件

p.onscroll=function(){
    //卷入的高度
    console.log(p.scrollTop);
}

3.对象属性

属性：

• 标准属性：style

            console.log(btn.style);//返回是style对象

            //获取
            console.log(btn.style.width);

            //设置
            btn.style.backgroundColor='red';

开关属性:

值的状态只有两个 true false

disabled 设置是否禁用

checked 设置是否选择

selected 设置下拉框是否选择

操作属性的方法：

对属性进行增删改查

• 获取属性getAttribute(‘属性名’)
• 参数：属性名
• 返回值：属性值

box.getAttribute('abc');//可以获取标准属性和自定义属性，还可以获取自己定义的属性名

设置属性setAttribute

• ‘属性名’,‘属性值’
• 参数：属性名和属性值

box.setAttribute('abc','234');

删除属性removeAttribute(‘属性名’)

• 参数：删除的属性名

box.removeAttribute('属性名');

4.设置和获取类名

语法：

//获取
console.log(box.className);
//设置   原来的类名完全被覆盖
box.className='e'；
box.className+='bg_red';

5.classList

• 对类名进行增删改
• 返回值：返回一个对象

添加类名：

btn.onclick=function(){
    div.classList.add('bg_red');
}

删除类名

btn.onclick=function(){
    div.classList.remove('bg_red');
}

切换类名

btn.onclick=function(){
    div.classList.toggle('bg_red');
}

6.自定义属性

• 自定义属性名：

//以data-开头进行命名
<input type="button" data-src='./images/01.jpg'>

• 自定义属性获取

console.log(input.dataset);
//返回一个对象
console.log(input.dataset['src']);//input.dataset.src

7.注册事件addEventListener

作用:

• 多次注册事件 不被覆盖

语法:

btn.addEventListener('click',function(){
    
})

8.事件三个阶段

• 捕获：从外向里
• 到达目标
• 冒泡：从内向外 默认事件是在冒泡阶段执行的

box.addEventListener('click',function(){
    
},false);//默认是false 表示冒泡阶段执行事件

box.addEventListener('click',function(){
    
},true);//true 表示捕获阶段执行事件

• 阻止冒泡

box.addEventListener('click',function(e){
    e.stopPropagation();
},false)

二.事件对象

• 描述一次点击行为，看成是一个对象

获取目标对象:

• e.target

获取绑定事件对象

• e.currentTarget==this

阻止浏览器默认行为

• e.preventDefault()
• return false

1.获取元素位置

• 当子元素没有设置定位时

box.offsetLeft=父元素的边框+父元素的 marginLeft+父元素的

paddingLeft+子元素的 marginLeft

box.offsetTop=父元素的边框+父元素的 marginTop+父元素的

paddingTop+子元素的 marginTop

• 当子元素设置定位

box.offsetLeft=left+marginLeft //无论是以谁定位
box.offsetTop=top+marginTop   //无论是以谁定位

2.事件解绑

• 当用on+事件类型进行解绑方式

btn.onclick=function(){
    btn.onclick=null;
}

• 当用addEventListener事件进行解绑方式

btn.onclick=function(){
    btn.onclick=null;
}

3.事件委托

概念:

• 当一些本身存在的子元素设置某些事件，一旦父元素想办法进行添加一些新的子元素的时候，之前设置的子元素的某些事件就会失效，所以引入事件委托
• 为了让新增的子元素也有此事件的行为
• 给子元素的父元素注册事件 利用冒泡原理 实现父元素所有子元素注册事件

案例:

//e.target.nodeType:
//节点标签：1
//属性：2
//文本：3

//e.target.nodeValue
//节点标签：null
//属性:属性值
//文本：文本内容

//e.target.nodeName
//节点标签：eg:LI
//属性：小写属性名
//文本：#text

ul.addEventListener('click',function(e){
    if(e.target.nodeName=='LI'){
        alert('1');
    }
})

4.修改、创建、添加节点

修改

• 设置DOM节点内部html结构 识别HTML结构

		box.innerHTML='<a href="#">百度</a>';

创建节点

• 只是在js中创建，在页面中不显示

var li=document.createElement('li');
document.write();//识别html结构

添加节点

• 在父元素的最后一个子元素后面添加

ul.appendChild(li);

• 在指定位置添加子元素

ul.insertBefore(li,first);

三.BOM

1.window

概念:

• window是顶级对象
• window上大部分的属性和方法都是window调用的
• 所有全局变量和函数都是window顶级对象上的属性和方法

语法:

window.a;
var a;
function fn(){}
window.fn();

2.定时器

一次性定时器

• 第一个参数：等待一定时间后执行的函数
• 第二个参数：设置等待多久 毫秒
• 返回值：清除定时器

var timer=setTimeout(function(){
    
},1000)

//清除定时器
clearTimeout(timer);

永久定时器

• 第一个参数：等待一定时间后执行的函数
• 第二个参数：设置等待多久 毫秒

var timer=setInterval(function(){
    
},1000)
//清除定时器
clearInterval(timer);

3.JSON

作用:

• 因为本地数据存储为字符串格式，当遇到一些对象时，需要转换为字符串，因此BOM提供其JSON格式的字符串的转换
• 一般格式(字符串 数字)
• 所有的键和使用双引号包起来
• 字符串也用双引号包起来

语法:

var arr=[
    {
        info:"",
        
    }
]

4.获取DOM节点的样式

• 获取行内样式

div.style.left;

BOM中的getComputedStyle

• 参数是DOM节点
• 返回值：返回DOM节点的样式对象

window.getComputedStyle(box).width;

返回盒子的实际宽度和高度

• width=content+padding+border
• height=content+padding+border
• 返回值：数字类型

box.offsetWidth;
box.offsetHeight;
console.log(box.style.width); //返回字符串 eg:120px; 只能获取行内元素 可以进行获取和设置
console.log(box.offsetWidth); //返回数字 eg:120;只能进行获取不能设置 获取行内和css内部的样式 获取盒子真实宽度
console.log(window.getComputedStyle(box).width); //返回字符串 eg:120px 返回的就是盒子的内容区域 只能进行获取 可以获取行内和css样式里的样式
console.log(box.clientWidth); //返回数字，eg:100 返回的是盒子的可视区域的宽度，即width+padding 可以获取行内和css内部的样式